A table you can filter. With some built in options.
Project here on Telex.
|
Column 1 ↕
|
Column 2 ↕
|
Column 3 ↕
|
|---|---|---|
| Something to sort | Another thing | — |
| Hat | A dog | A cat |
| 123 | A parrot | Banana |
Prompt
Create a Gutenberg block for sortable, filterable data tables with spreadsheet-like editing. In the editor, provide a grid interface where users can add or remove rows and columns, set column headers and data types for text, number, date, currency, and percentage, drag to reorder columns and rows, import CSV data via paste or file upload, configure styling through sidebar panels for colors, borders, padding, alignment, and responsive behavior, and set display options like row striping, hover effects, row height, sticky headers, and pagination limits. Include toolbar buttons for quick row and column insertion and a column settings modal for individual column configuration. On the frontend, render an interactive table where clicking column headers toggles ascending or descending sort with visual arrows, Shift-click enables multi-column sorting, a global search box filters all data in real time, per-column filters appear as dropdowns or inputs, number and date ranges can be filtered, and pagination controls appear when enabled. Store all table data and settings as JSON in block attributes. Ensure keyboard accessibility, ARIA labels, and graceful degradation without JavaScript showing static data. Support mobile responsive modes with horizontal scroll or stacked layout.