Dados

Tabela de dados

Tabela com filtros, busca, seleção, ordenação por coluna e paginação. Gera clientes fictícios: é demonstração.

data-u="datatable"Demonstração

Exemplo

<article class="u-card u-wall" data-wall="table">
  <div data-u="datatable" data-u-props='{"pageSize": 5, "count": 48}'></div>
</article>

Tabela de dados vem no pacote completo, em unslop.css e unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

Um bloco pronto que usa tabela de dados:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-table

Sem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.

Vão em data-u-props, como JSON.

Prop	Tipo	Padrão	O que faz
`pageSize`	number	5	Linhas por página.
`count`	number	48	Quantas linhas fictícias gerar.
`rows`	array	sem padrão	Linhas no formato interno da demo (id, name, c, product, region, status, del, date, price). Pra dado real, monte a marcação `u-dt` à mão.

Onde	Atributo	O que diz
tabela	`role="table"`, `"row"`, `"columnheader"`, `"cell"`, `"rowgroup"`	Estrutura de tabela em divs.
coluna ordenada	`aria-sort`	ascending ou descending.
paginação	`role="navigation"`, `aria-current="page"`	A página atual fica marcada.
checkboxes e filtros	`aria-label`	Cada um com nome próprio.

Tecla	Faz
Tab	anda por filtros, busca, cabeçalhos e paginação
Enter	ordena pela coluna focada
Espaço	marca a linha

Evento	detail	Quando
`u:change`	`{ value, label, index }`	Vem dos selects de dentro (filtros e status) e sobe pela página. Filtre pelo alvo se escutar no document.

Todo evento sobe pela página (bubbles). Escute no próprio elemento: el.addEventListener("u:change", (e) => e.detail).