Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ag-grid angular format data before exporting

I have grid which I want to export:

initializeColumnDefs() {
    this.columnDefs = [];
    this.columnDefs.push({
        headerName: 'time,
        field: 'completedTimestamp',
        cellRenderer: (params: any) => {
          if (params.data.isMomentarily)
            return '';
          return DatagridComponent.DefaultDatetimeCellRenderer(params);
        },
        comparator: (valueA: number, valueB: number) => {
          return DatagridComponent.DefaultDatetimeCellComparator(valueA, valueB);
        }
      },
      {
        headerName: 'people',
        field: 'people',
        cellRenderer: (params: any) => {
          if (!params || !params.value || params.value.length <= 0)
            return '';
          let titles = '';
          params.value.forEach(element => {
            if (element.name) {
              titles += element.name + ',';
            }
          });
          return titles.substring(0, titles.length - 1);
        }
      }
    );
  }

Above there's example of two columns: one with timestamp, one with object.

My export() method which I use to export as csv:

  export() {
let header = this.columnDefs.map(columnDef => {
  let id = columnDef.field || columnDef.colId || columnDef.value;
  let headerName = columnDef.headerName;
    return headerName;
  });
  let a: any;
  let params: any = {
    fileName: 'export.csv',
    columnSeparator: ';',
    skipHeader: true,
    columnKeys: this.columnDefs.map(c => c.field || c.colId).filter(c => !!c)
  };
  params.customHeader = header.join(params.columnSeparator) + '\n';
  this.grid.api.exportDataAsCsv(params);
}

However, I have trouble finding how format values before exporting, because here I only get header and field and no value? And when I export my grid to csv instead of datetime I get e.g. enter image description here

which is timestamp and for my object I get enter image description here

Instead of having Tom, Bob, Ben

Does anyone know how to format these values before exporting?

like image 752
user122222 Avatar asked Sep 11 '25 09:09

user122222


1 Answers

In your export() function, you will have to add a parameter processCellCallback.

Something like this:

export() {
    let header = this.columnDefs.map(columnDef => {
      let id = columnDef.field || columnDef.colId || columnDef.value;
      let headerName = columnDef.headerName;
        return headerName;
      });
      let a: any;
      let params: any = {
        fileName: 'export.csv',
        columnSeparator: ';',
        skipHeader: true,
        columnKeys: this.columnDefs.map(c => c.field || c.colId).filter(c => !!c)
      };
      params.customHeader = header.join(params.columnSeparator) + '\n';
      params.processCellCallback = function(cellParams) {
             if(cellParams && cellParams.column.colId === 'yourTimestampfield') {
                     return this.formatter; //apply your timestamp formatter      
             } else if(cellParams && cellParams.column.colId === 'yourObjectfield') {
                     return this.formatter; //apply your object formatter  
             } else 
                    return cellParams.value // no formatting
          }
      this.grid.api.exportDataAsCsv(params);
    }

Read more in the example and docs here.

like image 185
Pratik Bhat Avatar answered Sep 12 '25 23:09

Pratik Bhat