Skip to content

feat(data_table): DataTable component with TanStack Table Core#450

Open
djalmaaraujo wants to merge 51 commits intoruby-ui:mainfrom
djalmaaraujo:da-datatable-test
Open

feat(data_table): DataTable component with TanStack Table Core#450
djalmaaraujo wants to merge 51 commits intoruby-ui:mainfrom
djalmaaraujo:da-datatable-test

Conversation

@djalmaaraujo
Copy link
Copy Markdown
Contributor

Summary

Adds a fully-featured DataTable component powered by TanStack Table Core (framework-agnostic, vanilla JS) and wired with a Stimulus controller.

Architecture: TanStack manages all table state (pagination, sorting, filtering, row selection, column visibility, row expansion) client-side. For server-driven tables, the Stimulus controller fetches JSON from a src: endpoint and re-renders rows via JS. For static tables, everything works entirely client-side with no server round-trips.

Components added

  • DataTable — root wrapper, hosts the Stimulus controller
  • DataTableContent — renders <table>, <thead>, <tbody> with Stimulus targets; includes <template> elements for sort icons, checkboxes, chevrons, and expanded row markup
  • DataTableToolbar — search input + per-page selector
  • DataTableBulkActions — selection count bar with slot for action buttons
  • DataTableColumnToggle — column visibility dropdown (show/hide columns)
  • DataTablePagination — prev/next buttons + page indicator
  • DataTableCell* — typed cell renderers: Text, Badge, Currency, Number, Percent, Date, Boolean, Link, Truncate
  • DataTableExpandedRow — content slot for expandable rows

Stimulus controller features

  • Server-driven mode (src: value) — fetches application/json, updates TanStack data, re-renders rows
  • Client-side mode (no src:) — sort, filter, paginate entirely in-browser
  • URL sync (sync_url: true) — reflects current page/sort/search in the address bar
  • Row selection with bulk actions, select-all checkbox
  • Column visibility toggle with server-aware refetch
  • Expandable rows
  • Generic TanStack options pass-through (options: value) for advanced use cases

Docs page

Full interactive demo with 100 fake employees, server-side search/sort/pagination via a demo controller (Docs::DataTableDemoController). Includes prose documentation, code examples for all major features, and a component API table.

Test plan

  • Visit /docs/data_table — hero demo loads with 10 rows
  • Search filters rows; URL updates
  • Click a column header to sort asc/desc; URL updates
  • Navigate pages; URL updates
  • Change per-page selector
  • Select rows; bulk actions bar appears with correct count
  • Toggle column visibility — columns show/hide
  • Expandable rows example works
  • Client-side sort example (no src:) works without network requests

- Add DataTable component files and Stimulus controller
- Add docs page with live search, sort, and pagination demo
- Add demo controller with fake employee data
- Add route, controller action, and menu entry
@djalmaaraujo djalmaaraujo requested a review from cirdes as a code owner April 15, 2026 23:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant