POC: Export to CSV, XLSX, PDF #2355
Conversation
| @@ -208,6 +209,7 @@ function DataGrid<R, SR>({ | |||
| // Toggles and modes | |||
| enableFilterRow = false, | |||
| cellNavigationMode = 'NONE', | |||
| enableVirtualization = true, | |||
There was a problem hiding this comment.
Not sure about the prop name. Any suggessions? disableVirtualization makes more sense but I kept this to be consistent with enableFilterRow . We can also consider forwarding this prop to the formatters to users can use it during printing.
There was a problem hiding this comment.
Prop name is good to me. I prefer avoiding "negative" prop/variable names as they make reading logic harder.
We can also consider forwarding this prop to the formatters to users can use it during printing.
What use case do you have in mind?
There was a problem hiding this comment.
If for example there is a cell that shows a complex data like an icon with a tooltip. It may not work out of the box and it would be helpful to provide an alternate formatter for printing. We can revisit if needed
There was a problem hiding this comment.
Sounds like it should be a separate thing, and it could be implemented by the user via a provider.
| } | ||
|
|
||
|
|
||
| export function exportToPdf<R, SR>(gridElement: ReactElement<DataGridProps<R, SR>>, fileName: string) { |
There was a problem hiding this comment.
https://github.com/simonbengtsson/jsPDF-AutoTable
Handy plugin to convert table to pdf
| downloadFile(fileName, new Blob([content], { type: 'text/csv;charset=utf-8;' })); | ||
| } | ||
|
|
||
| export function exportToXlsx<R, SR>(gridElement: ReactElement<DataGridProps<R, SR>>, fileName: string) { |
There was a problem hiding this comment.
https://github.com/SheetJS/sheetjs
We can use the commercial version
stories/demos/exportUtils.tsx
Outdated
| } | ||
|
|
||
| function getGridContent<R, SR>(gridElement: ReactElement<DataGridProps<R, SR>>) { | ||
| const grid = document.createElement('content'); |
There was a problem hiding this comment.
The idea is to grab the text content of each cell and create an array of arrays. Both pdf and xlsx libraries handle array of arrays
| @@ -208,6 +209,7 @@ function DataGrid<R, SR>({ | |||
| // Toggles and modes | |||
| enableFilterRow = false, | |||
| cellNavigationMode = 'NONE', | |||
| enableVirtualization = true, | |||
There was a problem hiding this comment.
Prop name is good to me. I prefer avoiding "negative" prop/variable names as they make reading logic harder.
We can also consider forwarding this prop to the formatters to users can use it during printing.
What use case do you have in mind?
| ).map(gridRow => { | ||
| return Array.from( | ||
| gridRow.querySelectorAll<HTMLDivElement>('.rdg-cell') | ||
| ).map(gridCell => gridCell.innerText); |
There was a problem hiding this comment.
So the cell ends up empty when we display an image, a checkbox, or a progress element for example?
There was a problem hiding this comment.
Correct. We can manually update cell value during export or provide a flag to the formatter so it can return a print friendly value
|
|
||
| function getGridContent<R, SR>(gridElement: ReactElement<DataGridProps<R, SR>>) { | ||
| const grid = document.createElement('content'); | ||
| grid.innerHTML = renderToStaticMarkup(cloneElement(gridElement, { |
There was a problem hiding this comment.
If we're rendering images, it might end up downloading a lot of images at once.
We could avoid this by rendering the grid in an anonymous document: https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createDocument
There was a problem hiding this comment.
Good to know. We can add it if needed or I will create a followup PR
| } | ||
| } | ||
|
|
||
| function serialiseCellValue(value: unknown) { |
There was a problem hiding this comment.
Should we handle \n as well?
There was a problem hiding this comment.
We can. It works for now so may be next PR if needed
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
* Initial commit * Fix dependencies * Add utility function to export * serialiseCellValue * Export to pdf and xlsx * Update src/hooks/useViewportColumns.ts Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Update src/hooks/useViewportRows.ts Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Update stories/demos/exportUtils.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Update stories/demos/exportUtils.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
No description provided.