Then import the writeXlsxFile from "write-excel-file" and use it instead of globalThis.writeXlsxFile:
import writeXlsxFile from "write-excel-file";
and
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)
};
})
}
);
And the last issue was, how you were declaring the feature:
//Correct way of doing it
excelExporterFeature: {
xlsProvider: CustomExcelFileProvider,
},
I have one more question please > the following code to excel export > but i would like to add a functionality:
a) If the grid has selected rows > export only the selected rows
b) If the grid don't have selected rows > export all the rows.
Because i have CustomExcelFileProvider on a different file > so i can use the same provider for all the grid to use excel export. >
Is there a way to access the grid ? I did check the static write(props) > the props and i didn't find any source or grid variable which i can use to retrieve the grid and find the selectedRecords.
export 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;
cell.align = "center"
if (cell.type === String && typeof cell.value !== 'string') {
cell.value = `${cell.value}`;
} else if (cell.type === Date) {
cell.type = String;
cell.value = `${cell.value}`;
if (cell.value.length > 20) {
cell.backgroundColor = '#FFFF00';
}
}
if (cell.type === Number) {
const index = columns.findIndex(col => col.field === 'transferPrice');
// 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 === 0) {
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';
});
writeXlsxFile(
// data starts with array of header and is followed by the actual data
[columns, ...rows],
{
dateFormat: 'DD/MM/YYYY HH:mm',
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)
};
})
}
);
}
}
To achieve the functionality of exporting only selected rows if any are selected, and all rows otherwise, you can handle this logic before calling the write method of your CustomExcelFileProvider. The write method itself won't have access to the grid instance or its selected records directly.
Here's how you can implement this:
Before calling the export method, check if there are any selected records in the grid.
Pass the selected records to the export method if they exist, otherwise pass all records.
Here's a sample implementation:
const grid = new Grid({
// Your grid configuration
features: {
excelExporterFeature: {
xlsProvider: CustomExcelFileProvider
}
}
});
// Function to handle export
function handleExport() {
const selectedRecords = grid.selectedRecords;
const recordsToExport = selectedRecords.length ? selectedRecords : grid.store.records;
grid.features.excelExporter.export({
filename: 'Export',
exporterConfig: {
rows: recordsToExport
}
});
}
// Button to trigger export
const exportButton = {
type: 'button',
text: 'Export to Excel',
onAction: handleExport
};
// Add the button to your toolbar or UI
This way, you can control which records are passed to the export method based on the selection state of the grid.
