DataTable
O DataTable é um wrapper da tabela base, que adiciona funcionalidades de usabilidade e personalização para visualização e interação com dados tabulares.
Quando usar:
- Quando for necessário exibir dados em formato tabular com funcionalidades extras como personalização de colunas, exibição da contagem total de registros e ações complementares (ex: exportações);
- Quando o contexto exigir uma interface para manipulação e leitura de dados, como painéis administrativos, relatórios dinâmicos ou listas interativas;
- Quando o desenvolvedor quiser aproveitar a API da tabela base mas com uma estrutura visual e funcional mais completa e pronta para uso.
Quando não usar:
- Quando a tabela base já atende completamente às necessidades da interface, sem necessidade de contagem de registros, personalização ou ações adicionais;
- Quando o controle total sobre o layout da tabela for necessário e o uso de slots for inadequado ao contexto visual.
Obs.:
- O DataTable utiliza internamente o componente table. Isso significa que todas as props aceitas pela tabela original e todos os eventos emitidos por ela também são aceitos e emitidos pelo DataTable, garantindo total compatibilidade com a API da tabela base.
Uso
js
<CdsDataTable
:fields="fields"
:items="items"
:totalItems="100"
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
selectionVariant | string | 'green' | green teal blue indigo violet pink red orange amber dark | Variante de cor usada na estilização do componente. |
* totalItems (required) | number | -- | Quantidade total de registros encontrados. | |
customFieldsList | array | [] | -- | Lista de colunas que serão exibidas na tabela personalizada. |
customFieldsSearchable | boolean | false | -- | Especifica se deve ter pesquisa por colunas na personalização da tabela. |
hideCustomizeButton | boolean | false | -- | Especifica se o botão de personalizar tabela deve ser escondido. |
presetsOptions | array | [] | -- | Define as opções de presets que serão exibidas no sidesheet de personalizar tabela. Se nenhum for fornecido, não será exibido. |
customFieldsTrackBy | string | 'id' | -- | Define o campo que será usado como chave na lista de customFieldsList. |
loadingCustomFields | boolean | false | -- | Ativa o feedback de loading no sidesheet de personalizar tabela. |
minVisibleFields | number | 1 | -- | Especifica a quantidade mínima de colunas que devem ser visíveis na tabela. |
maxVisibleFields | number | 0 | -- | Especifica a quantidade máxima de colunas que devem ser visíveis na tabela. Se for `0`, não há limite. |
withSearch | boolean | false | -- | Especifica se a barra de busca da tabela deve ser exibida. |
searchPlaceholder | string | 'Buscar...' | -- | Especifica o placeholder da barra de busca. |
withSearchButton | boolean | false | -- | Especifica se deve ser mostrado botão junto à barra de busca. |
loading | boolean | false | -- | Ativa o estado de carregamento do componente, desabilitando as ações superiores e exibindo um Skeleton para a tabela. |
emptySrcImg | string | null | -- | Caminho da imagem que vai ser renderizada quando o estado for empty. |
emptyTitle | string | 'Nenhum registro' | -- | Título que vai ser renderizado quando o estado for empty. |
emptyDescription | string | 'Certifique-se de ajustar os filtros para encontrar resultados.' | -- | Descrição que vai ser renderizado quando o estado for empty. |
searchInputDelay | number | 500 | -- | Tempo de atraso entre a digitação e a emissão do evento de busca (em ms). |
Eventos
Nome | Descrição |
|---|---|
@update-fields-list | |
@customize-click | |
@search | |
@search-button-click |
Slots
Nome | Descrição |
|---|---|
#right | Slot para renderização de conteúdo à direita do DataTable header. |
#empty | |
#header-item | |
#table-item |