[REACT] Excel Export

[tjmeal]

Dear all,

I have followng the configuration https://bryntum.com/products/grid/examples/exporttoexcel/ for excel export. My code is bellow >

I am when hitting excel export i am getting the following error ( see image attached).

  excelExporterFeature: {
    excelExporter: {
      xlsProvider: CustomExcelFileProvider,
    }
  },
  tbar: [
    {
      type     : 'button',
      text     : 'Export (default settings)',
      icon     : 'b-fa b-fa-file-excel',
      ref      : 'excelExportBtn1',
      onAction : (props) => {
        props.source.up().up().features.excelExporter.export()
    }
    },
  ]
  // rowExpanderFeature: {
  //   //if the expander content depends on row record data, the expander can be re-rendered on record update
  //   refreshOnRecordChange: true,
  //   // columnPosition : 'last',
  //   //
  //   // // Expander column configs
  //   // column : {
  //   //   width : 80
  //   // },
  //   renderer({ record, expanderElement, rowElement, region }) {
  //     // This renderer will load data async from a json file and generate a table and some buttons.
  //     // return {
  //     //   className: 'expander-content',
  //     //   children: [
  //     //     {
  //     //       className: 'buttons',
  //     //       children: [
  //     //         {
  //     //           text: 'HISTORY',
  //     //           'data-btip': 'View this runners results from previous races'
  //     //         }]
  //     //     },
  //     //     /*await generateTable(record)*/
  //     //   ]
  //     // };
  //
  //
  //     return {
  //       autoHeight: true,
  //       type: 'grid',
  //       columns: [
  //         { text: 'Origin Details', field: 'originDetails', readOnly: true },
  //         { text: 'Destination Details', field: 'destinationDetails', readOnly: true },
  //         { text: 'Passenger Name', field: 'passengerName', readOnly: true },
  //
  //         { text: 'Driver Details', field: 'driverDetails', readOnly: true },
  //         { text: 'Supplier Details', field: 'supplierDetails', readOnly: true },
  //         { text: 'Private Details', field: 'privateDetails', readOnly: true },
  //
  //         { text: 'Accounting Status', field: 'accountingStatus.name', readOnly: true },
  //         { text: 'Status', field: 'status.name', readOnly: true },
  //       ],
  //       data: [record]
  //     }
  //   }
  // },
};

const typeMap = {
  string  : String,
  number  : Number,
  date    : Date,
  boolean : Boolean,
  bool    : Boolean
};

// This is a custom provider class which uses more styling on cells based on certain conditions
class CustomExcelFileProvider extends XlsProviderBase {
  // This method is called by the exporter feature to write the file
  static write({ filename, columns, rows }) {
    rows.forEach(row => {
      row.forEach(cell => {
        // Convert cell type as library expects it
        cell.type = typeMap[cell.type] || String;

    if (cell.type === String && typeof cell.value !== 'string') {
      cell.value = `${cell.value}`;
    }

    if (cell.type === Number) {
      const index = columns.findIndex(col => col.field === 'firstName');

      // Style cells based on value
      if (cell.value < 30) {
        cell.backgroundColor = '#FFFF00';

        // Style the name cell in the same row
        if (index !== -1) {
          row[index].fontWeight = 'bold';
        }
      }
      else if (cell.value > 70) {
        cell.backgroundColor = '#FF0000';

        if (index !== -1) {
          row[index].fontStyle = 'italic';
        }
      }
    }
  });
});

// Columns are just the first line of the data containing column headers
columns.map(cell => {
  // Delete type, header is always text
  delete cell.type;
  delete cell.field;
  // Style the header cell
  cell.fontWeight = 'bold';
  cell.align = 'center';
});

globalThis.writeXlsxFile(
  // data starts with array of header and is followed by the actual data
  [columns, ...rows],
  {
    dateFormat : 'yyyy-mm-dd',
    fileName   : filename,
    columns    : columns.map(cell => {
      return {
        // write-excel-file library expects width in characters, we receive with in pixels
        width : Math.round((cell.width || 100) / 10)
      };
    })
  }
);
  }

[alex.l]

Hi,

Looks like you didn't provide xlsProvider or zipcelx, make sure they are loaded and available, links are correct.

[Maxim Gorkovsky]

Hello.
Put a debugger there and see the value of xlsProvider in your configuration. I suspect that symbol is undefined/null

[tjmeal]

Is this what you mean ?

[alex.l]

As you can see, xlsProvider equals to undefined. You need to find the reason. Make sure you set it, it's exists, it was imported, links are correct

[tjmeal]

What else do i need to do ?

[tjmeal]

Maybe the fact that i am on react need a different implementation ?

[alex.l]

Please change this code

  excelExporterFeature: {
    excelExporter: {
      xlsProvider: CustomExcelFileProvider,
    }
  },

to

  excelExporterFeature: {
      xlsProvider: CustomExcelFileProvider
  },

according to docs. Let us know if it helped!

[tjmeal]

Same error...

Attached a bare grid > with just excel button throwing the same error.

[tjmeal]

Fine bare grid code attached with the issue > if you could fix it to work there it would be great.