-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we handle \n
as well?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.