Ive got my function to format a data to be downloaded as xlsx file.
const excelJSFormatter = async (list, options, setFileContents) => {
// list - an array of export rows representing one row of data for the table;
// options - the options object passed from the download function
// setFileContents - function to call to pass the formatted data to the downloader
// get some formatting data from the table
const columnSpec = jobsTable.getColumnLayout().filter((c) => !!c.field).map((c) => ({ width: c.width / 11 })); // convert pixel width to character count (roughly)
// get theme colours from the DOM
const brandColor = window.getComputedStyle(document.body).getPropertyValue('--color-primary').substring(1);
const brandContrastColor = window.getComputedStyle(document.body).getPropertyValue('--color-on-primary').substring(1);
const brandLightColor = window.getComputedStyle(document.body).getPropertyValue('--color-primary-light').substring(1);
const brandLightContrastColor = window.getComputedStyle(document.body).getPropertyValue('--color-on-primary-light').substring(1);
const foreColor = window.getComputedStyle(document.body).getPropertyValue('--color-foreground').substring(1);
const groupColor = window.getComputedStyle(document.body).getPropertyValue('--color-neutral-300').substring(1);
const calcColor = window.getComputedStyle(document.body).getPropertyValue('--color-neutral-100').substring(1);
// define styles
const styles = {
header: {
fill: {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: brandColor },
},
font: {
color: { argb: brandContrastColor },
},
},
group: {
fill: {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: groupColor },
},
font: {
color: { argb: foreColor },
},
},
calc: {
fill: {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: calcColor },
},
font: {
color: { argb: foreColor },
},
},
footer: {
fill: {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: brandLightColor },
},
font: {
color: { argb: brandLightContrastColor },
},
},
row: {
fill: null,
font: null,
},
};
// define header and footer content
const productionDate = new Date();
const projectName = selectedProject.name;
const header = [ projectName ];
const footer = [ `Produced ${productionDate.toLocaleDateString()} ${productionDate.toLocaleTimeString()}` ];
// create the workbook
const workbook = new ExcelJS.default.Workbook();
// create worksheet
const sheet = workbook.addWorksheet(projectName, { views: [{ showGridLines: false }] });
// set column widths
sheet.columns = columnSpec;
// add header
sheet.addRow(header);
sheet.addRow([]);
// update style for table footer
if (list[list.length - 1].type === 'calc') {
list[list.length - 1].type = 'footer';
}
// iterate over rows
list.forEach((row) => {
// quick implementation adding data and styling by row
// more control can be taken by adding the cells individually
if (row.type === 'row') {
row.columns.forEach((col) => {
if (col && Array.isArray(col.value)) {
if (col.value.length === 0) col.value = '';
if (col.value.length > 0) {
col.value = col.value.toString().replace(',', ', ');
}
}
});
}
const rowData = row.columns.map((c) => c.value);
const sheetrow = sheet.addRow(rowData);
sheetrow.fill = styles[row.type].fill;
sheetrow.font = styles[row.type].font;
});
// add footer
sheet.addRow([]);
sheet.addRow(footer);
// write to a new buffer
const buffer = await workbook.xlsx.writeBuffer();
// trigger file download, passing the formatted data and mime type
setFileContents(buffer, 'application/xlsx');
};
It works as expected in general, in terms of styling I’m mainly using the function for.
However I would like to do some more formatting I can’t find the way to align the footer content (Produced date) to the right, to be aligned with the last table column. The numbers of columns can be different each time I’m generating the excel sheet.