DataList
O List com toolbar: visões em abas com contagem, busca, filtros por campo com chips removíveis, atualizar, seleção com ações em massa e a consulta salva no navegador. Em modo servidor, só avisa a consulta e mostra o que chegar.
Membros
Busca por nome, e-mail, colunas e valores dos filtros. As visões são abas; cada uma soma seus filtros aos que a pessoa aplicar. A consulta fica salva em persistKey.
8 itens
Uso
<DataList
aria-label="Membros da conta"
items={items}
searchable
filterFields={[
{ id: "role", label: "Papel", accessor: (item) => item.data.role, options: roles },
]}
views={[{ id: "admins", label: "Administradores", filters: { role: ["admin"] } }]}
selectable
bulkActions={[{ label: "Arquivar", onClick: (ids) => archive(ids) }]}
onRefresh={refetch}
persistKey="membros"
/>Props
Aceita também as props do List (layout, groups, renderItem, getMenuItems, enableDnD…).
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| title | string | "Todos" | Nome da primeira aba. |
| searchable · searchPlaceholder | boolean · string | — | Campo de busca com atraso de 300ms. |
| filterFields | DataListFilterField[] | — | { id, label, options, accessor }. Várias opções no mesmo campo somam (OU); campos diferentes se cruzam (E). |
| views | DataListView[] | — | { id, label, filters }. Viram abas com contagem. |
| selectable · bulkActions · onSelectionChange | boolean · DataListBulkAction[] · (ids) => void | — | Seleção com marcar todos e barra de ações em massa. |
| onRefresh · refreshing | () => void · boolean | — | Botão de atualizar com indicador. |
| actions | ReactNode | — | Ações extras à direita da toolbar. |
| persistKey | string | — | Salva visão, busca e filtros no localStorage. |
| mode · onQueryChange · total | "client" | "server" · (query) => void · number | "client" | No servidor a lista não filtra: avisa a consulta e mostra os itens recebidos. |
| loading | boolean | false | Esqueletos no lugar dos cards. |