[DataGridPremium] Use web worker for Excel export #7770
Conversation
m4theushw
added
the
component: data grid
These are the results for the performance tests:
|
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
removed
the
PR: out-of-date
| ### Using a web worker | ||
|
|
||
| :::warning | ||
| This feature only works with `@mui/styled-engine` v5.11.8 or newer. |
There was a problem hiding this comment.
Because of mui/material-ui#36001
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
| ::: | ||
|
|
||
| Instead of generating the Excel file locally, you can delegate the task to a web worker. | ||
| This method reduces the amount of time that the main thread remains frozen, allowing to interact with the grid while the data is exported in background. |
There was a problem hiding this comment.
allowing to interact with the grid
May the interaction interfere with the exported data?
There was a problem hiding this comment.
I don't think it will be a problem. While the UI is frozen (during serialization) the user can't interact with it, but once interaction is possible is because serialization is finished and the worker is preparing the Excel file.
| // Creates a temp worksheet to obtain the column letters | ||
| const excelJS = await getExcelJs(); | ||
| const workbook: Excel.Workbook = new excelJS.Workbook(); | ||
| const worksheet = workbook.addWorksheet('Sheet1'); |
There was a problem hiding this comment.
I don't get why is it needed, but it should not be a problem
There was a problem hiding this comment.
I need to get the column letters to be able to serialize the value options. The only why I found to get this without duplicating the code was to create a temp worksheet.
packages/grid/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx
Outdated
Show resolved
Hide resolved
packages/grid/x-data-grid-premium/src/models/dataGridPremiumProps.ts
Outdated
Show resolved
Hide resolved
| ) { | ||
| // eslint-disable-next-line no-restricted-globals | ||
| addEventListener('message', async (event: MessageEvent<ExcelExportInitEvent>) => { | ||
| const { |
There was a problem hiding this comment.
Could we refactor buildExcel to use the serialized data instead of apiRef and reuse buildExcel in setupExcelExportWebWorker?
function setupExcelExportWebWorker() {
addEventListener('message', async (event: MessageEvent<ExcelExportInitEvent>) => {
const workbook = await buildExcel(event.data);
postMessage(await workbook.xlsx.writeBuffer());
}
}There was a problem hiding this comment.
This can be done in a follow-up, I'll open an issue. We need to rework the interfaces for buildExcel to accept the same params that are passed when the worker is used..
packages/grid/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts
Outdated
Show resolved
Hide resolved
github-actions
bot
removed
the
PR: out-of-date
Preview: https://deploy-preview-7770--material-ui-x.netlify.app/x/react-data-grid/export/#using-a-web-worker
Closes #6772