Content v1.0.0

Data Table

A flexible data table component with composable features. Supports pagination, sorting, filtering, search, row selection with bulk actions, CSV export, and column visibility toggle. All features are enabled via options and can be combined as needed.

Preview & Code

Options

Name Type Default Description
data * Array required Array of hashes representing table rows
columns Array nil Optional column config [{ key: :name, label: 'Name' }]. Auto-inferred from data keys if omitted
pagination Boolean/Integer false Enable pagination. Set to integer (10, 25, 50) to set default per-page
sortable Boolean false Enable column sorting by clicking headers
searchable Boolean false Enable global search input
filterable Boolean false Enable per-column filtering (includes sorting)
selectable Boolean false Enable row checkboxes for bulk selection
exportable Boolean false Enable CSV export button
column_toggle Boolean false Enable show/hide columns dropdown
class String "" Additional CSS classes for the container

Changelog v1.0.0

- v1.0.0: Initial release with full feature set
- Client-side pagination with configurable rows per page
- Click-to-sort column headers with ascending/descending toggle
- Global search with debounced filtering
- Per-column filter inputs
- Row selection with select-all checkbox
- CSV export of current filtered/sorted data
- Column visibility toggle with dropdown

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now