Skip to content

[Feature] DataTable component with Hotwire (sorting, filtering, pagination)#353

Draft
djalmaaraujo wants to merge 3 commits intomainfrom
da-datatable-hotwire
Draft

[Feature] DataTable component with Hotwire (sorting, filtering, pagination)#353
djalmaaraujo wants to merge 3 commits intomainfrom
da-datatable-hotwire

Conversation

@djalmaaraujo
Copy link
Contributor

@djalmaaraujo djalmaaraujo commented Mar 21, 2026

Related issue

N/A — new component proposal

Description

Introduces a composable DataTable component that wraps the existing Table with interactive features via Stimulus (server-driven Hotwire pattern).

Components:

  • DataTable — main wrapper with Stimulus controller
  • DataTableToolbar — layout container for search/filter controls
  • DataTableSearch — debounced search input
  • DataTableSortableHeader — clickable column headers with sort direction indicators
  • DataTableContent — content area for Turbo Frame targeting
  • DataTablePagination — prev/next page controls
  • DataTablePerPage — rows-per-page selector

All interactions are server-driven: Stimulus handles UI events, updates URL params, and triggers Turbo Frame reload. No client-side data manipulation.

Before After
No DataTable component Composable DataTable with sorting, search, pagination

Testing instructions

  1. Run unit tests: bundle exec ruby -Itest test/ruby_ui/data_table_test.rb (15 tests)
  2. Run full suite: bundle exec rake test
  3. Run linter: bundle exec rake standard
  4. In a consuming Rails app, render a DataTable with sample data and verify Stimulus controller connects and interactions work (sort, search, paginate)

Composable DataTable wrapping existing Table with Stimulus-driven
sorting, filtering, search and pagination (server-driven pattern).

Components: DataTable, DataTableToolbar, DataTableSearch,
DataTableSortableHeader, DataTableContent, DataTablePagination,
DataTablePerPage.

Includes 15 unit tests for all sub-components.
@djalmaaraujo djalmaaraujo force-pushed the da-datatable-hotwire branch from 99af161 to 9b18785 Compare March 22, 2026 00:20
@djalmaaraujo djalmaaraujo changed the title feat: DataTable component with Hotwire (sorting, filtering, pagination) [Feature] DataTable component with Hotwire (sorting, filtering, pagination) Mar 22, 2026
DataTableSearch now composes RubyUI::Input instead of raw HTML input.
DataTablePerPage now composes RubyUI::NativeSelect + NativeSelectOption
instead of raw HTML select/option elements.
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