Search code examples
reactjsag-grid

ag-grid (React) having custom column for exports

Say I have the following data:

[
  { name: 'Cesar', date: '2023-10-10 05:10AM' },
  { name: 'James', date: '2023-10-11 10:10AM' }
]

and I have the following columnDefs for ag-grid:

[
  { headerName: 'Name', field: 'name' },
  { headerName: 'Date', field: 'date' }
]

If I export it (CSV or Excel) I get the same exact 2 columns, which is the default behavior.

But, how can I have the export functionality (CSV and Excel) to split the date column into two columns? This is the data structure we expect to see in the exported files.

| Name  | Date       | Time    |
| ----- | ---------- | ------- |
| Cesar | 2023-10-10 | 05:10AM |
| James | 2023-10-11 | 10:10AM |

Things I've tried

  1. processCellCallback and processHeaderCallback to split the date column into 2 columns; but the "2 columns" are rendered in the same column 👎

two columns in one

  1. I tried adding a third column to my columnDefs which is hide: true and lockVisible: true:
[
  { headerName: 'Name', field: 'name' },
  { headerName: 'Date', field: 'date' }, 
  { headerName: 'Time', field: 'date', hide: true, lockVisible: true } // with the right getter
]

This works partially because the column shows up in the Column Menu columnsMenuTab column showing in the menu

The checkbox is disabled, so the column cannot be shown ever; but we need the "time" column to be only available on the exported files, not in the UI

Solution

  • Congrats! You're very close to solve this puzzle.

    suppressColumnsToolPanel

    Set to true if you do not want this column or group to appear in the Columns Tool Panel.

    { 
  headerName: "Time", 
  field: 'date', 
  hide: true, 
  suppressColumnsToolPanel: true // this one
}

    Here's an example

    Example

    https://plnkr.co/plunk/UWTdLRgBM5H9ooLh