Data Table

Uma tabela com filtro, ordenação, paginação, seleção de linhas e escolha de colunas visíveis, tudo no navegador.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add data-table --yes

O item data-table do registry instala estes arquivos:

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

Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= 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 }
      ]) %>

Exemplos

Padrão

Filtro por e-mail, colunas ordenáveis e seleção de linhas.

	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
Sem resultados.

<%= 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 }
      ]) %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`DataTable`	`columns`	`—`	As colunas, como hashes `{ key:, label:, sortable:, sort_value: }`.
`DataTable`	`rows`	`—`	As linhas, como hashes indexados pelo `key` das colunas. Um `id` identifica a linha.
`DataTable`	`filter_key`	`nil`	A coluna que o campo de filtro busca; sem ela não há campo de filtro.
`DataTable`	`filter_placeholder`	`"Filter…"`	O placeholder do campo de filtro.
`DataTable`	`page_size`	`5`	Linhas por página.
`DataTable`	`selectable`	`true`	Adiciona uma coluna de checkboxes para selecionar linhas.
`DataTable`	`empty_text`	`"No results."`	O que a tabela mostra quando nenhuma linha corresponde.