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

[AoLiGei1221]

User description

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: Fixes Export table data with "Search box" enabled #35141
• 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

---

CodeAnt-AI Description

Export only the currently visible table rows from Explore and clarify data export options

What Changed

• Table charts now expose an “Export Current View” submenu that exports only the rows currently visible after client-side filters/search, to CSV, JSON, or Excel
• Data export options in Explore are reorganized under a “Data Export Options” menu, separating “Export All Data” from “Export Current View” so it’s clear whether the whole result set or just the on-screen view is exported
• When exporting a table’s current view in client-side mode, exports are generated directly from the browser snapshot instead of re-querying the backend, so exported rows and columns match what users see
• Chart queries are no longer re-run when only client-side view details (like the current table snapshot for export) change, avoiding unnecessary chart reloads
• The image export option is relabeled to “Export screenshot (jpeg)” for clearer wording

Impact

✅ Exports respect table search and client-side filters
✅ Clearer choice between exporting all data vs current view
✅ Fewer unnecessary chart reloads during table interactions

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[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 evan@preset.io.

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).

[AoLiGei1221]

@rusackas Hey Evan! Thank you for communicating with one of my teammate Rebecca. Could you please run the test again?

[rusackas]

Looks like pre-commit needs to be run, and that might unblock some of the other failing CI jobs.

[Copilot]

Pull request overview

This PR implements a feature to export filtered table data when the search box is enabled and client-side pagination is used. Previously, exports would include all data regardless of search filters. The implementation adds a new "Export Current View" option alongside the existing "Export All Data" option, with the current view export respecting client-side search filters.

Key Changes:

• Added client-side export functions (CSV, JSON, XLSX) that work with filtered data stored in component state
• Introduced a new two-level menu structure: "Export All Data" and "Export Current View" (when supported by the chart type)
• Implemented a callback mechanism to pass filtered rows from DataTable to TableChart, which are then stored in ownState for export access

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx	Added client-side export functions (CSV, JSON, XLSX) and restructured the export menu to include "Export All Data" and "Export Current View" options
superset-frontend/src/explore/components/ExploreViewContainer/index.jsx	Modified ownState comparison to exclude clientView from triggering re-queries, preventing unnecessary backend calls
superset-frontend/plugins/plugin-chart-table/src/index.ts	Registered 'EXPORT_CURRENT_VIEW' as a custom behavior for the Table chart plugin
superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx	Added state management for clientView data and pushed filtered rows/columns to ownState via setDataMask
superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx	Implemented onFilteredRowsChange callback to emit filtered rows to parent component using RAF for performance
superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/externalAPIs.ts	Fixed arrow function syntax for consistency (added curly braces)
superset-frontend/plugins/plugin-chart-table/src/DataTable/types/react-table.d.ts	Added clientView property to TableOwnState interface

Comments suppressed due to low confidence (1)

superset-frontend/src/explore/components/ExploreViewContainer/index.jsx:611

• The useEffect at line 604 is missing onQuery and reRenderChart from its dependency array. While these are wrapped in useCallback and likely stable, they should still be included in the dependency array for completeness and to satisfy ESLint's exhaustive-deps rule. Add them to the dependency array at line 611:

}, [props.ownState, onQuery, reRenderChart, previousOwnState]);

  useEffect(() => {
    const strip = s =>
      s && typeof s === 'object' ? omit(s, ['clientView']) : s;
    if (!isEqual(strip(previousOwnState), strip(props.ownState))) {
      onQuery();
      reRenderChart();
    }
  }, [props.ownState]);

[Copilot]

[nitpick] Using as any to add a custom behavior bypasses TypeScript's type safety. Consider either:

1. Adding EXPORT_CURRENT_VIEW to the Behavior enum in @superset-ui/core if this is intended to be a standard behavior, or
2. Extending the behaviors array type to support string literals for custom behaviors.

This would make the implementation more type-safe and maintainable.

Suggested change

	'EXPORT_CURRENT_VIEW' as any,
	],
	'EXPORT_CURRENT_VIEW',
	] as (Behavior | 'EXPORT_CURRENT_VIEW')[],

[AoLiGei1221]

Hey @rusackas!
I’ve just run the pre-commit hooks locally. Please take a look and re-run on your end when you get a chance.

I noticed that mypy (main) reported a few Unused "type: ignore" warnings during git commit.
Code:

mypy (main)..............................................................Failed

• hook id: mypy
• exit code: 1

superset/core/api/core_api_injection.py:58: error: Unused "type: ignore[assignment, misc]" comment [unused-ignore]
superset/core/api/core_api_injection.py:59: error: Unused "type: ignore[assignment, misc]" comment [unused-ignore]
superset/core/api/core_api_injection.py:60: error: Unused "type: ignore[assignment, misc]" comment [unused-ignore]
superset/core/api/core_api_injection.py:61: error: Unused "type: ignore[assignment, misc]" comment [unused-ignore]
superset/core/api/core_api_injection.py:62: error: Unused "type: ignore[assignment, misc]" comment [unused-ignore]
superset/core/api/core_api_injection.py:63: error: Unused "type: ignore[assignment, misc]" comment [unused-ignore]
superset/core/api/core_api_injection.py:64: error: Unused "type: ignore[assignment, misc]" comment [unused-ignore]
superset/core/api/core_api_injection.py:65: error: Unused "type: ignore[assignment, misc]" comment [unused-ignore]
superset/core/api/core_api_injection.py:66: error: Unused "type: ignore[assignment, misc]" comment [unused-ignore]

but when I ran:

pre-commit run --all-files

everything passed successfully with no errors.

I believe this should be fine since pre-commit run --all-files is consistent with the checks performed in CI.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 67.97%. Comparing base (c458f99) to head (0ce21f2).
⚠️ Report is 40 commits behind head on master.

Additional details and impacted files

@@             Coverage Diff             @@
##           master   #36281       +/-   ##
===========================================
+ Coverage        0   67.97%   +67.97%     
===========================================
  Files           0      634      +634     
  Lines           0    46727    +46727     
  Branches        0     5070     +5070     
===========================================
+ Hits            0    31763    +31763     
- Misses          0    13697    +13697     
- Partials        0     1267     +1267     

Flag	Coverage Δ
hive	43.71% <ø> (?)
mysql	67.03% <ø> (?)
postgres	67.08% <ø> (?)
presto	47.35% <ø> (?)
python	67.94% <ø> (?)
sqlite	66.79% <ø> (?)
unit	100.00% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codeant-ai-for-open-source]

CodeAnt AI is reviewing your PR.

[codeant-ai-for-open-source]

Nitpicks 🔍

🔒 No security issues identified

⚡ Recommended areas for review Data Export Accuracy The client-side "Current View" CSV export (downloadClientCSV) directly stringifies cell values. For table cells that are objects (e.g., with input/formatter like those handled in downloadClientJSON and downloadClientXLSX), this can export [object Object] instead of the underlying value, leading to incorrect CSV content compared to JSON/XLSX and server-side exports. Consider normalizing values similarly to the JSON/XLSX paths. Possible Bug In the "Export Current View" submenu, the JSON and Excel handlers fall back to calling exportJson()/exportExcel() without passing ownState when server_pagination is enabled or clientView is missing, while the CSV handler explicitly passes ownState in its server path. This may cause JSON/XLSX "current view" exports to ignore some client-side state (e.g., search box filters) or behave differently from the CSV export for the same menu section. It's worth verifying whether ownState should also be forwarded in these fallback branches.

[AoLiGei1221]

@rusackas All good locally now in my side! When you have a moment, please rerun CI. Thanks!

[codeant-ai-for-open-source]

CodeAnt AI is running Incremental review

[AoLiGei1221]

Thank you @msyavuz for running the test for me. Now, all good. Evan @rusackas ,do you mind helping us to merge this PR please? Thank you so much!

[rusackas]

LGTM! Thank you for following through on all this!