shadcn.io is not affiliated with official shadcn/ui
Export Table Block for React
A sales table with a search and row checkboxes and an Export dialog that asks which rows (visible, selected or all, with counts), whether to include hidden columns and a file name, then downloads a real CSV, shown open in place.
Installation
Overview
Export exactly what someone is looking at, with this export table for React with Base UI. A framed stage holds a native table of 24 orders from a florist's sales report, with a search over it and a Checkbox on every row; the header's Export opens a Dialog. The dialog asks which rows as a Radio Group (Visible rows 6, Selected 2, All 24, each count live), whether to include the columns the table hides as a Switch, and what to call the file in an Input. The one Shine Button builds a real CSV from that choice in the browser, quoting every cell that needs it, and a Download Trigger saves it; the page then says "Exported 6 rows and 5 columns as sales-oct.csv." There is no preview, no format choice and no upload. On load the dialog is drawn open in place over the table, which waits unseen until it is closed; pressing Export opens the real, modal one. It's built from Dialog, Radio Group, Switch, Input, Download Trigger, Shine Button, Checkbox and Guides, with a CSS entrance only. For reports, admin tables and anywhere people ask "can I get this as a spreadsheet".
FAQ
What exactly is in the file?
A header row of the column names, then one row per exported order in the table's order, joined with CRLF line endings. Any cell with a comma, a quote or a line break is wrapped in quotes with inner quotes doubled, and a text cell that starts with =, +, - or @ is kept as text with a leading apostrophe so a spreadsheet never runs it as a formula. Totals are plain decimals ("48.00") so they sort and sum in a spreadsheet.
How do Visible, Selected and All differ?
Visible is what the search currently shows, Selected is every order you have ticked (even ones the search hides), and All is the whole month. Each choice shows its live count, the file name line under the field repeats the count and the number of columns, and Export CSV is disabled when the chosen scope has no rows.
What are hidden columns?
The table shows five columns, and the data also has Placed on and Channel. The switch adds those two to the file, so the page can then say "7 columns". Add your own hidden fields to COLUMNS with shown: false.
What is the dialog doing open on load?
That is the preview's part. On load the dialog is drawn in place as a native non-modal dialog over the table, so nothing is trapped; the table behind it is unseen and unfocusable until you close it with Cancel, the close button or Escape. The header's Export opens the real dialog with the library's focus trap, Escape and focus return, and shares the same state. In your app keep only the real Dialog.
Is it accessible?
The table has a caption, headers and named checkboxes; the search is labelled; the dialog is named and described, the radio group is named "Which rows" and Enter in the file name field presses Export CSV. The result is announced by one polite status line, present from load, after the dialog closes.
Related
- Pro
Row Selection Table
Select and actA stock list with a checkbox on every row, a head checkbox that shows a dash when only some are ticked, Shift-click range select and a live line that adds up the price of the ticked rows.
- Pro
Bulk Actions Table
Select and actA contacts table whose head checkbox ticks the page, a strip that offers to select all 48 contacts across pages, a toolbar that swaps to Archive, Tag and Delete at the same height, and an Undo receipt.
- Pro
Searchable Catalogue Table
Sort and searchA library catalogue table with a search field and an availability menu: typing keeps the titles whose name or author holds the words and marks them, the foot says how many match, and an empty state under the head clears the search.
- Pro
Row Menu Table
Select and actA drafts table where every row has a three-dot menu named after it, with View, Edit, Duplicate, a Shared with team checkbox item, Archive and a destructive Delete that confirms in an alert dialog, shown open in place.
- Pro
Chip Filters Table
Sort and searchA bug table beside a rail of chip filters for priority and status: chips in a group are or, the groups are and, every chip counts what it would show, and an empty state clears them all.
- Pro
Column Visibility Table
Columns and pagingA shipment table with a Columns popover of checkboxes: tick a column to show or drop it, one always stays on, a badge counts what is hidden, and Reset restores the default six of eight.