Tips for showing various column information as tooltips in ag grid's pivot mode

Question

Tips for showing various column information as tooltips in ag grid's pivot mode

var ColumnDefinitions = [{
    headerName: "Column A",
    field: 'colA',
    rowGroup: true
  },
  {
    headerName: "Column B",
    field: 'colB',
    pivot: true,
    enablePivot: true
  },
  {
    headerName: "Column C",
    field: 'colC',
    rowGroup: true
  },
  {
    field: 'colD',
    aggFunc: 'first',
    valueFormatter: currencyFormatter,
    tooltip: function(params) {
      return (params.valueFormatted);
    },
  },
  {
    field: 'customTooltip',
    tooltipField: 'comment'
  },
  {
    field: 'colF'
  }
];
function currencyFormatter(params) {
  return params.value;
}

The code snippet above is taken from a previous question. While it works, I am looking to customize the tooltip for the 'colD' field using a different 'comment' field. This customization is needed due to the use of group and pivot in the ag-Grid configuration. Any suggestions on how to achieve this for group and pivot ag-Grid setups would be highly appreciated.

javascript angularjs ag-grid

Answer 1

Answer №1

It may be challenging to retrieve data in your unique grid scenario, as the rows and columns have been altered from the original model due to pivoting.

One solution could be to extract this information from the grid itself. If you need aggregated information to be displayed in a tooltip, the function for the tooltip might look something like this:

tooltip: params => {
  const country = params.node.key;
  const year = params.colDef.pivotKeys[0];
  const athletesWithNumbers = this.state.rowData
    .filter(d => d.year == year)
    .filter(d => d.country === country)
    .filter(d => d.gold > 0)
    .map(d => d.athlete + ': ' + d.gold);
  return athletesWithNumbers.join(', ');
}

For a practical example, you can refer to this plunker - although it may not be the exact solution you are looking for, it can provide insight into possible approaches.

Answer 2

It may be challenging to retrieve data in your unique grid scenario, as the rows and columns have been altered from the original model due to pivoting.

One solution could be to extract this information from the grid itself. If you need aggregated information to be displayed in a tooltip, the function for the tooltip might look something like this:

tooltip: params => {
  const country = params.node.key;
  const year = params.colDef.pivotKeys[0];
  const athletesWithNumbers = this.state.rowData
    .filter(d => d.year == year)
    .filter(d => d.country === country)
    .filter(d => d.gold > 0)
    .map(d => d.athlete + ': ' + d.gold);
  return athletesWithNumbers.join(', ');
}

For a practical example, you can refer to this plunker - although it may not be the exact solution you are looking for, it can provide insight into possible approaches.

Answer 3

Answer №2

simply utilize the tooltipValueGetter function

{
   field: 'message',
   headerName: 'Message',
   headerTooltip: 'Message',
   width: 110,
   filter: 'agSetColumnFilter',
   tooltipValueGetter: (params) =>  `${params.value} some text`
}

https://i.sstatic.net/ghAMr.png

or apply the same method for tooltipValueGetter https://i.sstatic.net/0Q2v3.png

UPDATE:

Understood, it's simple

There is a property in Ag-grid called tooltipField - where you can select any field from the grid

For instance, in the 'sport' column, the tooltip is showing the data from the previous column

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

https://i.sstatic.net/iClJA.png

OR

You can customize the data for each field using tooltipValueGetter with the following syntax:

tooltipValueGetter: function(params) {  
  return `Country: ${params.data.country}, Athlete: ${params.data.athlete}, Sport: ${params.data.sport}`;
},

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

Result: https://i.sstatic.net/Wa24F.png

UPDATE 2

Hello there! I followed your code snippet and it worked as desired

And it works as you want

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08 https://i.sstatic.net/xvCuJ.png

UPDATE 3

A bit of manipulation and I was able to retrieve the data

{ field: 'gold', aggFunc: 'sum',
    tooltipValueGetter: function(params) {  
    var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
    return model.allLeafChildren[0].data.silver;
  },
},

The Last: https://plnkr.co/edit/9qtYjkngKJg6Ihwb?preview

Answer 4

simply utilize the tooltipValueGetter function

{
   field: 'message',
   headerName: 'Message',
   headerTooltip: 'Message',
   width: 110,
   filter: 'agSetColumnFilter',
   tooltipValueGetter: (params) =>  `${params.value} some text`
}

https://i.sstatic.net/ghAMr.png

or apply the same method for tooltipValueGetter https://i.sstatic.net/0Q2v3.png

UPDATE:

Understood, it's simple

There is a property in Ag-grid called tooltipField - where you can select any field from the grid

For instance, in the 'sport' column, the tooltip is showing the data from the previous column

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

https://i.sstatic.net/iClJA.png

OR

You can customize the data for each field using tooltipValueGetter with the following syntax:

tooltipValueGetter: function(params) {  
  return `Country: ${params.data.country}, Athlete: ${params.data.athlete}, Sport: ${params.data.sport}`;
},

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

Result: https://i.sstatic.net/Wa24F.png

UPDATE 2

Hello there! I followed your code snippet and it worked as desired

And it works as you want

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08 https://i.sstatic.net/xvCuJ.png

UPDATE 3

A bit of manipulation and I was able to retrieve the data

{ field: 'gold', aggFunc: 'sum',
    tooltipValueGetter: function(params) {  
    var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
    return model.allLeafChildren[0].data.silver;
  },
},

The Last: https://plnkr.co/edit/9qtYjkngKJg6Ihwb?preview

Answer 5

Answer №3

    let ColDefinitions = [{
        headerName: "ColumnA",
        field: 'colA',
        rowGroup: true
      },
      {
        headerName: "ColumnB",
        field: 'colB',
        pivot: true,
        enablePivot: true
      },
      {
        headerName: "ColumnC",
        field: 'colC',
        rowGroup: true
      },
      {
        field: 'colD',
        aggFunc: 'last',
    tooltipValueGetter: customTooltipValueGetter
      },
      {
        field: 'comment'
      },
      {
        field: 'colF'
      }
    ];


    function customTooltipValueGetter(params) {
    const pivotKey = params.colDef.pivotKeys[0];
    let rowModel = params.api.getDisplayedRowAtIndex(params.rowIndex);
    for (let i = 0; i < rowModel.allLeafChildren.length ; i++) {
        if (rowModel.allLeafChildren[i].data.colB === pivotKey) {
          return rowModel.allLeafChildren[i].data.comments;
        }
      }
  }

This solution was derived from multiple sources to address the specific question at hand. For more details and context, please refer to the answers provided by @wctiger and @shuts.

Answer 6

    let ColDefinitions = [{
        headerName: "ColumnA",
        field: 'colA',
        rowGroup: true
      },
      {
        headerName: "ColumnB",
        field: 'colB',
        pivot: true,
        enablePivot: true
      },
      {
        headerName: "ColumnC",
        field: 'colC',
        rowGroup: true
      },
      {
        field: 'colD',
        aggFunc: 'last',
    tooltipValueGetter: customTooltipValueGetter
      },
      {
        field: 'comment'
      },
      {
        field: 'colF'
      }
    ];


    function customTooltipValueGetter(params) {
    const pivotKey = params.colDef.pivotKeys[0];
    let rowModel = params.api.getDisplayedRowAtIndex(params.rowIndex);
    for (let i = 0; i < rowModel.allLeafChildren.length ; i++) {
        if (rowModel.allLeafChildren[i].data.colB === pivotKey) {
          return rowModel.allLeafChildren[i].data.comments;
        }
      }
  }

This solution was derived from multiple sources to address the specific question at hand. For more details and context, please refer to the answers provided by @wctiger and @shuts.

Tips for showing various column information as tooltips in ag grid's pivot mode

Answer №1

Answer №2

Answer №3

Similar questions

The toLowerCase method seems to be malfunctioning along with several other functions

Ways to specify an unused parameter within a function

When deployed, Angular 14 and Bootsrap 5 are functioning properly on a local environment but encountering issues on an online

Employing the powerful Math.pow() function within the setState() method

React js: Caution - Ensure each child within a list is assigned a distinct "key" property

Is there a way to effortlessly launch a new window with just a single click?

An error was encountered while linting /app/layout.tsx at line 16: Rule "@typescript-eslint/no-empty-function" was violated due to inability to read properties of undefined (reading 'getTokens')

Retrieving Array keys from PHP using jQuery

AngularJS's ng-repeat feature is not properly re-embedding tweets

assigning attributes to web addresses

Update or Delete BreezeJS EntityManager After Losing Instance Reference

Configure Protractor's configuration file to utilize a personalized reporter

How can I click on an item when using pagination?

How can I modify the URL path using react-i18next?

"Exploring the World Wide Web with JavaScript and Ajax in Internet

Remove an element from an array within an object stored in a MongoDB document

React material-ui responsive carousel is a versatile tool that allows for

Update the image within the svg tag

unable to locate the font file I recently downloaded in the Windows terminal

In JavaScript, the "this" keyword points to a different object