Data table with multi-sort, per-column + global filters, pagination/load-more, selection, expandable rows and sticky/resizable/pinnable columns.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-table/latest/gs-table.min.css"> <script src="https://cdn.get-set.it/gs-table/latest/gs-table.min.js"></script>
import Table from '@get-set/gs-table'; export default function App() { return ( <Table> <div className="content">Your Table content</div> </Table> ); }
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Stable registry key. Auto-generated when omitted. |
| columns | Array<GSTableColumn<T>> | none | Column definitions. |
| data | T[] | none | Row data. |
| rowKey | string | ((row: T, index: number) => string | number) | none | Property name (or function) used as each row's stable key. |
| sortable | boolean | true | Enable sorting globally. Default true. |
| multiSort | boolean | false | Allow sorting by more than one column at once. Default false. |
| sort | GSTableSort[] | none | Initial / controlled sort state. |
| defaultSort | GSTableSort[] | none | Default sort applied on first render (uncontrolled). |
| filterable | boolean | true | Show the per-column filter row when any column is `filterable`. Default true. |
| filters | GSTableFilters | none | Initial / controlled per-column filter values. |
| searchable | boolean | false | Show the global search box in the toolbar. Default false. |
| search | string | none | Initial global search term. |
| searchPlaceholder | string | 'Search…' | Placeholder for the global search box. |
| filterDebounce | number | 0 | Debounce (ms) applied to search / filter input. Default 0. |
| pagination | GSTablePaginationMode | false | 'pagination' | Pagination behaviour. Default 'pagination'. `false` shows all rows. |
| pageSize | number | 10 | Rows per page. Default 10. |
| pageSizeOptions | number[] | none | Options offered by the page-size selector. Default [10, 25, 50, 100]. |
| showPageSizeSelector | boolean | true | Show the page-size selector. Default true. |
| page | number | 1 | Initial / controlled 1-based page. Default 1. |
| loadMoreText | string | 'Load more' | Label for the load-more button. |
| selectable | GSTableSelectionMode | false | Row selection mode. Default false. |
| showSelectAll | boolean | true | Show the header select-all checkbox (multiple mode). Default true. |
| selected | Array<string | number> | none | Initial / controlled selected row keys. |
| selectionActions | Array<GSTableSelectionAction<T>> | none | Bulk actions shown in a selection bar above the table while at least one row is selected (e.g. Delete, Export). The bar also shows the selected count and a clear (×) button. |
| expandable | boolean | false | Enable expandable detail rows. Default false. |
| expanded | Array<string | number> | none | Initially / controlled expanded row keys. |
| singleExpand | boolean | false | Allow only one row expanded at a time. Default false. |
| stickyHeader | boolean | true | Pin the header row while the body scrolls. Default true. |
| maxHeight | number | string | none | Max body height before it scrolls (enables sticky header). Number = px. |
| resizableColumns | boolean | false | Allow dragging column dividers to resize. Default false. |
| reorderableColumns | boolean | false | Allow drag-and-drop reordering of columns. Default false. |
| variant | GSTableVariant | GSTableVariant[] | none | Visual variants (stackable). |
| zebra | boolean | false | Shorthand for the `striped` variant. Default false. |
| density | GSTableDensity | 'comfortable' | Row + control density. Default 'comfortable'. |
| size | GSTableSize | 'md' | Component size scale. Default 'md'. |
| theme | GSTableTheme | 'auto' | Visual theme. Default 'auto'. |
| accentColor | string | none | Accent color (CSS var --gst-accent). |
| rtl | boolean | false | Right-to-left layout. Default false. |
| caption | string | none | Table caption (screen-reader + visible). |
| customClass | GSTableCustomClass | none | Per-part class overrides. |
| className | string | none | Extra class on the root element. |
| loading | boolean | false | Show skeleton loading rows instead of data. Default false. |
| skeletonRows | number | none | Number of skeleton rows to render while loading. Default = pageSize. |
| emptyText | string | 'No records to display' | Message shown when there are no rows (after filters). |
| emptyRender | unknown | none | Custom empty-state HTML (native) / node (React). |
| rowContextMenu | GSTableRowContextMenu<T> | none | Declarative per-row context-menu items, or a builder that returns them for the right-clicked row. A non-empty array opens the built-in menu at the cursor and prevents the native browser menu. Returning `false | null | undefined | []` suppresses the menu for that row. |
Sort by several columns at once.
Per-column and global filtering.
Pin, resize and freeze columns.
Checkbox selection with a bulk-action bar.