Data Table

A table with filtering, sorting, pagination, row selection and column visibility, all in the browser.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add data-table --yes

The data-table registry item installs these files:

app/components/ui_component.rb
app/components/ui/data_table_component.rb
app/components/ui/data_table_component.html.erb
app/helpers/ui/data_table_helper.rb
app/javascript/controllers/ui_data_table_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_data_table(
      filter_key: :email,
      columns: [
        { key: :status, label: "Status" },
        { key: :email, label: "E-mail", sortable: true },
        { key: :amount, label: "Valor", sortable: true }
      ],
      rows: [

<%= ui_data_table(
      filter_key: :email,
      columns: [
        { key: :status, label: "Status" },
        { key: :email, label: "E-mail", sortable: true },
        { key: :amount, label: "Valor", sortable: true }
      ],
      rows: [
        { id: 1, status: "Success", email: "ada@example.com", amount: 316 }
      ]) %>

Examples

Default

Filtering by email, sortable columns and row selection.

	Status
	Success	ken99@example.com	$316.00
	Success	abe45@example.com	$242.00
	Processing	monserrat44@example.com	$837.00
	Success	silas22@example.com	$874.00
	Failed	carmella@example.com	$721.00
	Processing	jason.bourne@example.com	$459.00
	Success	noah.kahan@example.com	$128.00
No results.

<%= ui_data_table(
      filter_key: :email,
      page_size: 5,
      columns: [
        { key: :status, label: "Status" },
        { key: :email, label: "Email", sortable: true },
        { key: :amount, label: "Amount", sortable: true, sort_value: :amount_value }
      ],

<%= ui_data_table(
      filter_key: :email,
      page_size: 5,
      columns: [
        { key: :status, label: "Status" },
        { key: :email, label: "Email", sortable: true },
        { key: :amount, label: "Amount", sortable: true, sort_value: :amount_value }
      ],
      rows: [
        { id: "m5gr84i9", status: "Success",  email: "ken99@example.com",    amount: "$316.00", amount_value: 316 },
        { id: "3u1reuv4", status: "Success",  email: "abe45@example.com",    amount: "$242.00", amount_value: 242 },
        { id: "derv1ws0", status: "Processing", email: "monserrat44@example.com", amount: "$837.00", amount_value: 837 },
        { id: "5kma53ae", status: "Success",  email: "silas22@example.com",   amount: "$874.00", amount_value: 874 },
        { id: "bhqecj4p", status: "Failed",   email: "carmella@example.com",  amount: "$721.00", amount_value: 721 },
        { id: "p0r9hl2k", status: "Processing", email: "jason.bourne@example.com", amount: "$459.00", amount_value: 459 },
        { id: "x7nf2qa1", status: "Success",  email: "noah.kahan@example.com", amount: "$128.00", amount_value: 128 }
      ]) %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`DataTable`	`columns`	`—`	The columns, as `{ key:, label:, sortable:, sort_value: }` hashes.
`DataTable`	`rows`	`—`	The rows, as hashes keyed by the columns' `key`. An `id` identifies a row.
`DataTable`	`filter_key`	`nil`	The column the filter input searches; without it there is no filter input.
`DataTable`	`filter_placeholder`	`"Filter…"`	The filter input's placeholder.
`DataTable`	`page_size`	`5`	Rows per page.
`DataTable`	`selectable`	`true`	Adds a checkbox column to select rows.
`DataTable`	`empty_text`	`"No results."`	What the table shows when no row matches.