Table
Tables são componentes utilizados para exibir e organizar conteúdo, facilitando a comparação e análise de informações.
Quando usar:
- Desejar comparar dados.
- For necessário exibir dados de forma tabulada.
Quando não usar:
- For necessário interagir/realizar uma ação com o conteúdo apresentado na tabela.
Uso
js
<CdsTable
image="static/media/CuidaTempLogo.f4adb1cc.png"
image-description="Imagem de empty state"
title="Título do empty state"
text="Para sair dessa situação de empty state, realize a ação abaixo"
action-button-text="Adicionar novo recurso"
@action-button-click="handleClick"
/>Preview
Field 1 | Field 2 | Field 3 | Field 4 |
|---|---|---|---|
| 2023-10-10a | 0 | 0 | 10298726432 |
| 2023-10-10a | 1 | 72 | 10298726432 |
| 2023-10-10a | field 2 content b | 10298726432 |
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
modelValue | array | [] | -- | Guarda os itens selecionados da tabela. |
* items (required) | array|object | () => ([]) | -- | Array contendo os itens a serem exibidos na tabela. Os itens devem estar no seguinte formato: ``{ 'exampleKey1': 'exampleValue1', 'exampleKey2': 'exampleValue2' }`` Com a 'key' sendo a mesma do campo da tabela onde o valor deve ser exibido |
fields | array | [] | -- | Array contendo os campos a serem exibidos no cabeçalho da tabela. Os campos devem estar no seguinte formato: ``{ key: 'exampleKey1', label: 'exampleLabel1' }`` Ou em formato de string simples (``'fieldkey'``). Neste caso, o valor exibido no cabeçalho da tabela será a string convertida para [Start Case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage). Caso essa propriedade não seja enviada, o cabeçalho da tabela será montado de acordo com as `keys` do primeiro objeto do array enviado através da prop `items`. |
hover | boolean | false | -- | Boolean, informa se o estilo será alterado no hover da linha. |
allowSelection | boolean | false | -- | Boolean, informa se devem ser exibidas checkboxes para selecionar linhas. |
selectionVariant | string | 'green' | green teal blue indigo violet pink red orange amber dark | A variante das checkboxes de seleção. São 10 variantes: 'teal', 'green', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange', 'amber' e 'dark'. |
sortable | boolean | false | -- | Boolean, informa se a UI de ordenação deve ser exibida nos itens do header |
sortBy | string | null | -- | Específica a propriedade (chave da coluna) usada para ordenação. Por padrão os itens são exibidos na sequência definida pelo array `items` |
fixedHeader | boolean | false | -- | Especifica se o cabeçalho da tabela deve ser fixo ou não. |
sortDesc | boolean | false | -- | Boolean, informa que a ordenação deve ser descendente, por padrão a ordenação é ascendente (`sortDesc: false`). |
noWrap | boolean | false | -- | Boolean, quando true, os textos do header e valores da tabela não terão quebra de linha. Por padrão, os textos do header e valores da tabela terão quebra de linha quando atingirem o tamanho máximo do container. |
transparent | boolean | false | -- | Remove a cor de fundo da tabela |
Eventos
Nome | Descrição |
|---|---|
@update:modelValue | Evento que indica que o valor do Select foi alterado |
Slots
Nome | Descrição |
|---|---|
#header-item | Slot usado para renderizar itens personalizados para o cabeçalho da tabela. Dados do item referente à coluna podem ser acessados através da propriedade `data`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ data } |
#table-item | Slot usado para renderizar itens personalizados para o conteúdo da tabela. Dados do item referente à linha podem ser acessados através da propriedade `data`, enquanto a key referente à coluna pode ser acessada através da propriedade `field`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ `data`, `field`, `rowIndex` e `colIndex` } |