feat: Enable download as excel feature on table widget. #39427
Conversation
rahulbarwal
requested review from
AmanAgarwal041 and
jacquesikot
and removed request for
KelvinOm
WalkthroughThis pull request introduces the new dependency Changes
Possibly Related PRs
Suggested Labels
Suggested Reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
Bug
github-actions
bot
added
Enhancement
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/13515084563. |
github-actions
bot
added
Bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/client/src/widgets/TableWidgetV2/component/header/actions/Download.tsx (3)
1-1: Confirm usage of @appsmith/ads-old.Double-check if referencing
@appsmith/ads-oldis intentional or if a newer package should be used.
88-91: Fix the spelling of "dowloadOptions".The array name contains a typo; consider renaming it to
downloadOptionsfor clarity.-const dowloadOptions: DownloadOptionProps[] = [ +const downloadOptions: DownloadOptionProps[] = [
144-193: Handle export errors gracefully.While console logging is acceptable for debugging, consider showing a user-facing alert or toast on failure. This helps users notice export issues.
catch (error) { console.error("Error loading Excel export functionality:", error); + // For example + // showToast("Failed to download data as Excel. Please try again."); }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
app/client/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (2)
app/client/package.json(1 hunks)app/client/src/widgets/TableWidgetV2/component/header/actions/Download.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (3)
app/client/package.json (1)
219-219: Watch out for potential duplication.You have added
"sheetjs": "^2.0.0"while also referencing"xlsx"at line 399. Consider whether both are needed or if one suffices, to avoid redundant dependencies.app/client/src/widgets/TableWidgetV2/component/header/actions/Download.tsx (2)
4-4: No immediate concerns.Using Blueprint's
Popoverhere looks straightforward.
9-11: Good approach using React.memo.Employing
memofor this component is a sound performance optimization.
|
Deploy-Preview-URL: https://ce-39427.dp.appsmith.com |
app/client/src/widgets/TableWidgetV2/component/header/actions/Download.tsx
Outdated
Show resolved
Hide resolved
app/client/src/widgets/TableWidgetV2/component/header/actions/Download.tsx
Outdated
Show resolved
Hide resolved
app/client/src/widgets/TableWidgetV2/component/header/actions/Download.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/client/src/widgets/TableWidgetV2/component/header/actions/Download.tsx (3)
86-95: Fix typo in variable name.The variable name has a typo:
dowloadOptionsshould bedownloadOptions.-const dowloadOptions: DownloadOptionProps[] = [ +const downloadOptions: DownloadOptionProps[] = [Don't forget to update the reference on line 250 as well.
143-197: Excel download implementation looks robust.Good implementation with dynamic import, proper error handling, and type conversion. A few suggestions:
- Add state management during download similar to CSV download (selectMenu state updates)
- Consider using a more descriptive sheet name than "Sheet1"
- const downloadTableDataAsExcel = async () => { + const downloadTableDataAsExcel = async () => { + selectMenu(true); try { // Dynamically import xlsx only when needed const XLSX = await import("xlsx"); const tableData: Array<Array<unknown>> = []; const headers = props.columns .filter((column: ReactTableColumnProps) => { return column.metaProperties && !column.metaProperties.isHidden; }) .map((column: ReactTableColumnProps) => column.Header); tableData.push(headers); for (let row = 0; row < props.data.length; row++) { const data = props.data[row]; const tableRow: Array<unknown> = []; props.columns.forEach((column) => { if (column.metaProperties && !column.metaProperties.isHidden) { const value = data[column.alias]; if ( column.columnProperties?.columnType === "number" && typeof value === "string" ) { tableRow.push(Number(value) || 0); } else { tableRow.push(value); } } }); tableData.push(tableRow); } // Create workbook and worksheet using the dynamically imported XLSX const ws = XLSX.utils.aoa_to_sheet(tableData); const wb = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); + XLSX.utils.book_append_sheet(wb, ws, props.widgetName); // Generate and download file XLSX.writeFile(wb, `${props.widgetName}.xlsx`); } catch (error) { AppsmithConsole.error({ text: `Error loading Excel export functionality: ${error}`, source: { id: props.widgetId, name: props.widgetName, type: ENTITY_TYPE.WIDGET, }, }); + } finally { + selectMenu(false); } };
250-250: Update variable reference.If you rename the
dowloadOptionsvariable as suggested, update this reference as well.- {dowloadOptions.map((item: DownloadOptionProps, index: number) => { + {downloadOptions.map((item: DownloadOptionProps, index: number) => {
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/client/src/widgets/TableWidgetV2/component/header/actions/Download.tsx(4 hunks)app/client/src/widgets/TableWidgetV2/component/header/actions/index.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / client-build / client-build
- GitHub Check: client-lint / client-lint
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (2)
app/client/src/widgets/TableWidgetV2/component/header/actions/index.tsx (1)
171-171: Changes look good - passing widgetId to TableDataDownload.The addition of the widgetId prop to TableDataDownload is correct and aligns with the interface changes in Download.tsx.
app/client/src/widgets/TableWidgetV2/component/header/actions/Download.tsx (1)
76-76: Property addition looks good.The widgetId property has been correctly added to the TableDataDownloadProps interface to match the new prop being passed.
rahulbarwal
deleted the
rahulbarwal/issue38995/Bug-download-as-excel-SHEETJS
branch
Description
Add SheetJS for Excel export in Table widget
Fixes #38995
or
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.Table"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/13518191583
Commit: 050fe04
Cypress dashboard.
Tags:
@tag.TableSpec:
Tue, 25 Feb 2025 10:21:46 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Refactor