Our blazing fast Grid component built with pure JavaScript


Post by dylan.sheffer »

Hello,

I have a grid with the excelExporter feature configured and it is working well. However, I have some data that I need to format before it is useful within a spreadsheet (example: transforming a UNIX timestamp into a Date object).

I found in the documentation that the excelExporter uses the TableExporter class and the TableExporter has an isExport property (https://www.bryntum.com/docs/grid/#Grid/util/TableExporter#column-renderers) I can destruct from the renderer parameter on the column definition. However, when I add a check for the isExport property, it is undefined in the normal column rendering (makes sense), but the generated Excel document is unchanged. I also found that the renderer function isn't logging anything to the console after exporting, so it looks like the function isn't being called during the export. In the example below, I would expect the Customer Status to read Something else in each column, but it displays the normal values.

{
        id: "customer.status",
        field: "customer.status",
        text: "Customer Status",
        width: 180,
        hidden: true,
        filterable: false,
        sortable: false,
        renderer: ({ record, cellElement, isExport }) => {
          if (isExport) {
            return "Something else"; 
          }
          cellElement.innerHTML = record?.data?.customer
            ? record.data.customer.status
            : "";
        }
      },

Any help would be much appreciated!


Post by mats »

Your column is hidden, export only includes visible columns.


Post by dylan.sheffer »

Thanks for the reply mats! That was my mistake, I forgot to remove the hidden property after some debugging 😅. I changed the hidden property to false and it is returning the actual value instead of Something else like I specified in the renderer. Am I doing something incorrectly or is the Excel exporter not using the renderer function at all?

customer status.jpg
customer status.jpg (67.18 KiB) Viewed 610 times

Post by dylan.sheffer »

This is the excelDownload function that is called when I click a download button.

  public excelDownload() {
    const visibleColumns = this.grid.columns.visibleColumns
      .map(v => {
        const col = v.data;
        // Exclude the Actions column
        if (col.text !== "Actions") {
          return {
            text: col.text,
            field: col.field,
            width: col.width
          };
        }
      })
      .filter(Boolean); // Filters out the undefined value from excluding Actions (https://michaeluloth.com/filter-boolean)

    this.grid.features.excelExporter.export({
      filename: this.refName,
      exporterConfig: {
        columns: visibleColumns
      }
    });
  }

Post by mats »

You hide the renderer here though:

return {
            text: col.text,
            field: col.field,
            width: col.width
          };

just return col from your map.

If the effort in your code is related to not exporting Actions column, just mark it not https://bryntum.com/docs/grid/#Grid/column/Column#config-exportable


Post Reply