shadcn.io is not affiliated with official shadcn/ui
Export Columns Checkbox Form Block for Solid
An invoice export panel with eight column checkboxes, Select all, Clear and Invert, a drawn preview of the chosen columns and a Download CSV that saves a real file.
Installation
Overview
Choose what goes into a file and see it before it does with this export columns form for Solid with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. A list of eight columns (Invoice, Client, Issued, Due, Status, Amount, Currency, Tax) has a box each and a sample value at the end, with a toolbar of Select all, Clear and Invert and a count ("5 of 8 columns"). From the tablet width a drawn preview table sits beside the list as a side cell: one head bar and five row bars per ticked column, with the count and the column names in text under it. The Shine Button in the foot, Download CSV, builds a real file in the browser from five typed invoices, with only the ticked columns, in the order listed, and quotes any field that has a comma, a quote or a line break. With no column ticked it says so and puts focus on the first box. It's built from the Checkbox, Label, Button and Guides, plus the browser's own Blob download. For data exports, report builders and any list where the choice is "which parts".
FAQ
How do I export my own rows?
Replace ROWS with your data and edit COLUMNS. csvOf builds the head row and one line per row from the ticked columns, and quote wraps any field that needs it. For large tables, ask your server for the file with the chosen column ids and point the button at that request instead.
How does the CSV avoid breaking in a spreadsheet?
A field with a comma, a quote or a line break is wrapped in quotes with inner quotes doubled; the last client in the sample, "Holloway Tutoring, Ltd", shows it. Lines end with a carriage return and a line feed. If your data can start with an equals sign, a plus, a minus or an at sign, prefix it with an apostrophe so a spreadsheet reads it as text.
How does it work with a keyboard and a screen reader?
The eight boxes are one group named by the "Columns" heading, each named by its row. The toolbar buttons come before the list in tab order, and the status line announces what Download did ("Downloaded 5 columns, 5 rows."). The preview is decorative and hidden from assistive technology; its count and column names are plain text.
How does it look on a phone?
The preview is hidden below the tablet width, since its facts are already in the count. The list keeps its rows and the toolbar wraps. The foot is pinned to the bottom of the screen with Download CSV at full width.