Shadwire
Componentes

Data Table

Tabela com filtro, ordenação, paginação, seleção de linhas e visibilidade de colunas — tudo no cliente.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação 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: 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: [

Exemplos

Padrão

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

Status
Sucesso ken99@example.com R$ 316
Sucesso abe45@example.com R$ 242
Processando monserrat44@example.com R$ 837
Sucesso silas22@example.com R$ 874
Falhou carmella@example.com R$ 721
Processando jason.bourne@example.com R$ 459
Sucesso noah.kahan@example.com R$ 128 
<%= ui_data_table(
      filter_key: :email,
      page_size: 5,
      columns: [
        { key: :status, label: "Status" },
        { key: :email, label: "E-mail", sortable: true },
        { key: :amount, label: "Valor", sortable: true, sort_value: :amount_value }
      ],