Adding Directive to columnTemplate

[Thoemmy]

Currently i want to add from PrimeNG the tooltip component to the Column Headers, so that if a user hovers over the column text which can be displayed with ellipsis he will receive a tooltip.

Ive tried following:

1. implement custom tooltip, to test the own tooltip, which is also not working unfortunately

      columnTemplate: (createElement: HyperFunc<VNode>, props: ColumnTemplateProp) => {
        return createElement(
          'div',
          {
            class: 'tooltip',
            innerHTML: props.name,
          },
          createElement('span', { class: 'tooltiptext' }, props.name)
        );
      },

the related css:

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

2. implement directive of PrimeNG Tooltip Module

      columnTemplate: (createElement: HyperFunc<VNode>, props: ColumnTemplateProp) => {
        return createElement(
          'span',
          {
            pTooltip: props.name,
          },
          props.name
        );
      },

PrimeNG example
https://codesandbox.io/p/sandbox/icon-of-rowdrag-is-not-displayed-properly-in-angular-using-any-material-theme-forked-q9ly99?file=%2Fsrc%2Findex.html

Is there a way to get this working?

[revolist]

You could use standard angular templates for headers, they work not only for cells
https://codesandbox.io/p/sandbox/rg-header-tooltip-angular-standalone-yz77gy?file=%2Fsrc%2Findex.html

We've updated type support in v4.8.13, you would probably want to update

[revolist]

Hi @Thoemmy,

I completely understand your perspective. While having a sandbox allows for direct customization, it can lead to issues if users modify code without a clear understanding, which could lead to confusion within the community.

Your point about maintaining two systems—documentation and the sandbox—is very valid. It could be beneficial to focus on one robust system that minimizes the risk of outdated examples and simplifies maintenance.

I’ve also considered creating a compilation of the main documentation to import into the sandbox and other tools. However, this approach would require some time to implement effectively.

[Thoemmy]

Hi @revolist,
Your last considered approach is also a way to do it, i will also think about some solutions and i will give you some suggestions.

short question: Do you have a master template in codesandbox which i can fork and use?

[Thoemmy]

Hi @revolist,

here is my current WIP demo for Angular: Link to CodeSandbox.

Could you please share your thoughts on it?

I plan to further optimize it and add additional features.

This will serve as a comprehensive demo. I will also extract certain parts and features to create smaller demo examples.

I have included some suggestions and my own implementations, and I would greatly appreciate your feedback on these as well.

Hope you like it 😄

p.s. i am also writing the MD's. for the revogrid docs repo

[revolist]

Hi @Thoemmy! 👋

Gr8 to see your progress!
You can definitely use any Angular example from the docs as a master template if it’s still relevant.

I love how you’ve cracked the RevoGrid settings and options—great job! Your example is super clear and easy to follow!

Here are a few suggestions to make it even better:

• Consider adding more comments to clarify each section for those who might be new to grids.
• For the revogridConfig, remember to use an uppercase first letter for interface naming in TypeScript.
• When importing plugins, it’s best to avoid generic names. How about renaming it to PluginDate instead of just Plugin?
• Adding color and some template properties could make it even more attractive.

Great work! 💪
Cheers!

[Thoemmy]

Hi @revolist,
Some of your feedback i already implemented.
Like naming convention of interface and the generic plugin name.

I suggest that you mean with template properties to add some more features like grouping rowdrag and others.

I will implememt it after my vaccation

If you have other suggestions, let me know ;)

B.R. Thömmy