feat(table): Export table data with "Search box" enabled

[AoLiGei1221]

SUMMARY

According to the issue#35141, the export functionality for table chart when the search box enabled and pagination is disabled has some unexpected behaviours for it. We fixed Table chart export by passing filtered rows from DataTable to TableChart using a new callback and storing them in ownState.clientView, allowing frontend exports without backend queries.

Unexpected Behaviour: When the search box is enabled, it will export all data if we do export .CSV, Excel, .JSON

Expected Behaviour: We should export the data appeared in the current view (i.e. filtered data)

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

The before screenshot can be checked in issue#35141. More details in the issue page.
The after screenshot:

TESTING INSTRUCTIONS

1. Click the Charts on the top of the superset page
2. Open an existing table chart or create a chart with type Table.
3. Click "Customize" and turn on the check box of "Search Box"
4. Click the "three dot" option on the right hand side of Save button.
5. Click "Data Export Options"
6. Choose the option between "Export All Data" and "Export Current View"
7. Choose your desired way to export data.

ADDITIONAL INFORMATION

• Has associated issue: Export table data with "Search box" enabled #35141 (comment)
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[bito-code-review]

Code Review Agent Run #041f8b

Actionable Suggestions - 0

Review Details

• Files reviewed - 7 · Commit Range: 9b63a6a..31f386e

  • superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
  • superset-frontend/plugins/plugin-chart-table/src/DataTable/types/react-table.d.ts
  • superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/externalAPIs.ts
  • superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
  • superset-frontend/plugins/plugin-chart-table/src/index.ts
  • superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
  • superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
• Files skipped - 0
• Tools

  • Eslint (Linter) - ✔︎ Successful
  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[rusackas]

Love it! I think the change I'd want to see (at least, as of when we chatted) would be to only show this new menu option when it's relevant. We might want to just enable it for charts where it's relevant, via an entry in the chart's metadata. In this case, that would be superset-frontend/plugins/plugin-chart-table/src/index.ts. Then it wouldn't appear for charts where it's not relevant (pie chart, for example) but could be added for charts where it is relevant (besides this one, maybe the line chart when it has the "Data Zoom" feature enabled).