Table

As tabelas de dados são usadas para organizar e exibir dados de forma eficiente. O componente Table permite a personalização com funcionalidade adicional, conforme a necessidade dos usuários do seu produto.

Playground

Propriedades do Table

Nome (* = obrigatório)

Tipo

Valores

Descrição

children

ReactNode

  • —

Como nos exemplos, os componentes da Table devem ser utilizados para montar uma tabela. Por questões de semântica e acessibilidade, é muito importante que o uso de todos os componentes que montam a estrutura da tabela seja respeitado (TableHead, TableBody, TableRow, etc.)

caption

string

  • —

Texto conciso e relevante para descrever a tabela. Importante para acessibilidade.

stickyHeader

boolean

  • false (default)

  • true

Define se o cabeçalho da tabela acompanha o scroll, ficando fixo em cima na tabela.

spacing

Table spacing token

  • innerBase02

  • innerBase03

  • innerBase04 (default)

Espaçamento das células da tabela e do header. Recomendamos usar o padrão (innerBase04) e reservar o uso das tabelas com espaçamentos menores quando a informação for muito simples e for preciso otimizar o espaço.

loading

boolean

  • false (default)

  • true

Quando true, coloca um overlay na tabela com um CircularLoader ao centro. Pode ser utilizado para dar um feedback à pessoa que os dados estão sendo carregados/alterados e impedir ações enquanto isso.

Propriedades do TableHeader

Nome (* = obrigatório)

Tipo

Valores

Descrição

asText

boolean

  • false (default)

  • true

Quando true, coloca o conteúdo em um Typography já com o estilo previsto para a tabela. É o estilo recomendado por padrão, tendo como exceção células com conteúdo complexo ou customizado.

align

TableHeaderAlign

  • left (default)

  • center

  • right

Alinhamento horizontal aplicado a célula do Header.

verticalAlign

TableHeaderVerticalAlign

  • middle (default)

  • top

  • bottom

Alinhamento vertical aplicado a célula do Header.

sortable

SortableProps

  • -

Se a coluna é ordenável ou não. Quando o objeto é passado, coloca o botão com ícone de ordenação, mas não é feita a ordenação em si. Quando essa propriedade for utilizada, é preciso passar no objeto o title para garantir acessibilidade e o onSort para implementar a ordenação.

SortableProps

Nome (* = obrigatório)

Tipo

Valores

Descrição

title

string

  • -

Título para o botão de ordenação da coluna em que o objeto sortable será passado. É importante que os títulos de botões de ordenação sejam claros, concisos e distintos entre si, para maior acessibilidade.

onSort

function

    Função chamada quando a coluna é ordenável e a ordenação é chamada.

    A função tem a seguinte tipagem (sorting: TableSortingState) => void, onde TableSortingState será UNSORTED, ASCENDING ou DESCENDING. Esses valores estão presentes na constante exportada TABLE_SORTING_STATE.

    Propriedades do TableRow

    Nome (* = obrigatório)

    Tipo

    Valores

    Descrição

    disabled

    boolean

    • false (default)

    • true

    Quando true, estiliza as células de dados com um cinza claro de cor de fundo. Note que os elementos interativos ainda devem ser desabilitados um a um.

    Propriedades do TableData

    Nome (* = obrigatório)

    Tipo

    Valores

    Descrição

    asText

    boolean

    • false (default)

    • true

    Quando true, coloca o conteúdo em um Typography já com o estilo previsto para a tabela. É o estilo recomendado por padrão, tendo como exceção células com conteúdo complexo ou customizado.

    align

    TableDataAlign

    • left (default)

    • center

    • right

    Alinhamento horizontal aplicado a célula.

    verticalAlign

    TableDataVerticalAlign

    • middle (default)

    • top

    • bottom

    Alinhamento vertical aplicado a célula.