Table

Componente compositivo para exibição de dados tabulares com semântica ARIA completa. Usa os sub-componentes mk-table-head, mk-table-body, mk-table-row, mk-table-header e mk-table-cell.

O mk-table é um conjunto compositivo de sub-componentes para renderização de tabelas de dados. A estrutura segue a semântica HTML nativa (table > thead > tr > th/td), com estilos e tokens do design system aplicados. Use mk-table-header para células de cabeçalho e mk-table-cell para células de dados.

Padrão

Componha a tabela aninhando mk-table-head, mk-table-body, mk-table-row, mk-table-header e mk-table-cell.

import { MkTable, MkTableHead, MkTableBody, MkTableRow, MkTableHeader, MkTableCell } from '@db1/makuco-ui-react';

<MkTable>
  <MkTableHead>
    <MkTableRow>
      <MkTableHeader>Nome</MkTableHeader>
      <MkTableHeader>Cargo</MkTableHeader>
    </MkTableRow>
  </MkTableHead>
  <MkTableBody>
    <MkTableRow>
      <MkTableCell>João Silva</MkTableCell>
      <MkTableCell>Desenvolvedor</MkTableCell>
    </MkTableRow>
  </MkTableBody>
</MkTable>

<mk-table>
  <mk-table-head>
    <mk-table-row>
      <mk-table-header>Nome</mk-table-header>
      <mk-table-header>Cargo</mk-table-header>
    </mk-table-row>
  </mk-table-head>
  <mk-table-body>
    <mk-table-row>
      <mk-table-cell>João Silva</mk-table-cell>
      <mk-table-cell>Desenvolvedor</mk-table-cell>
    </mk-table-row>
  </mk-table-body>
</mk-table>

Listrado

Use striped para alternar a cor de fundo nas linhas pares, melhorando a legibilidade em tabelas com muitas linhas.

<MkTable striped>
  {/* ... */}
</MkTable>

<mk-table striped>
  <!-- ... -->
</mk-table>

Linha destacada

Use highlighted em mk-table-row para destacar uma linha. O destaque prevalece sobre o hover e sobre a cor listrada.

<MkTableRow highlighted={row.id === selectedId}>
  {/* ... */}
</MkTableRow>

<mk-table-row [highlighted]="row.id === selectedId">
  <!-- ... -->
</mk-table-row>

Linhas clicáveis

mk-table-row emite mkRowClick ao ser clicado. Use para navegação ou seleção de linha.

<MkTable>
  {/* ... */}
  <MkTableBody>
    <MkTableRow onMkRowClick={(e) => console.log(e)}>
      <MkTableCell>João Silva</MkTableCell>
    </MkTableRow>
  </MkTableBody>
</MkTable>

<mk-table>
  <!-- ... -->
  <mk-table-body>
    <mk-table-row (mkRowClick)="onRowClick($event)">
      <mk-table-cell>João Silva</mk-table-cell>
    </mk-table-row>
  </mk-table-body>
</mk-table>

Ordenação

Adicione sort a um mk-table-header para exibir o ícone de ordenação e habilitar o clique. O evento mkSort carrega a próxima direção — o consumidor controla o estado externamente.

const [sortDir, setSortDir] = useState<'none' | 'ascending' | 'descending'>('none');

<MkTable>
  <MkTableHead>
    <MkTableRow>
      <MkTableHeader sort={sortDir} onMkSort={(e) => setSortDir(e.detail)}>
        Nome
      </MkTableHeader>
      <MkTableHeader>Cargo</MkTableHeader>
    </MkTableRow>
  </MkTableHead>
  <MkTableBody>
    {/* linhas ordenadas conforme sortDir */}
  </MkTableBody>
</MkTable>

<mk-table>
  <mk-table-head>
    <mk-table-row>
      <mk-table-header [sort]="sortDir" (mkSort)="onSort($event)">
        Nome
      </mk-table-header>
      <mk-table-header>Cargo</mk-table-header>
    </mk-table-row>
  </mk-table-head>
</mk-table>

Alinhamento

A prop align controla o alinhamento horizontal do conteúdo em mk-table-header e mk-table-cell: start (padrão), center ou end. Em mk-table-header, center e end alinham o conteúdo inteiro do cabeçalho — título, ícone de ajuda (helperText) e botão de ordenação.

<MkTableHeader align="center">Centro</MkTableHeader>
<MkTableCell align="end">Direita</MkTableCell>

<mk-table-header align="center">Centro</mk-table-header>
<mk-table-cell align="end">Direita</mk-table-cell>

Truncar texto

Use truncate em mk-table-cell para cortar conteúdo longo com reticências (…).

<MkTableCell truncate>
  Texto muito longo que será truncado...
</MkTableCell>

<mk-table-cell truncate>
  Texto muito longo que será truncado...
</mk-table-cell>

Cabeçalho de linha

Use rowHeader em mk-table-cell na célula que identifica o registro da linha. A célula recebe role="rowheader" e mantém o estilo de célula de dados.

<MkTableRow>
  <MkTableCell rowHeader>João Silva</MkTableCell>
  <MkTableCell>Desenvolvedor</MkTableCell>
</MkTableRow>

<mk-table-row>
  <mk-table-cell [rowHeader]="true">João Silva</mk-table-cell>
  <mk-table-cell>Desenvolvedor</mk-table-cell>
</mk-table-row>

Mesclar colunas

Use colSpan em mk-table-cell ou mk-table-header para que a célula ocupe mais de uma coluna, como o colspan de <td> e <th>. A mk-table define o número de colunas pela linha que ocupa mais colunas, somando os colSpan, e se ajusta quando linhas ou spans mudam. Uma linha que ocupa menos colunas fica com as últimas vazias.

<MkTableRow>
  <MkTableCell rowHeader>Caderno</MkTableCell>
  <MkTableCell colSpan={2} align="center">Sem estoque</MkTableCell>
</MkTableRow>

<mk-table-row>
  <mk-table-cell [rowHeader]="true">Caderno</mk-table-cell>
  <mk-table-cell [colSpan]="2" align="center">Sem estoque</mk-table-cell>
</mk-table-row>

Compatibilidade

O layout usa CSS grid com subgrid: Chrome 117, Safari 16 e Firefox 71 ou superiores. A centralização vertical do conteúdo usa align-content em bloco (Chrome 123, Safari 17.4, Firefox 125); em versões anteriores o conteúdo fica alinhado ao topo da célula. rowspan não é suportado.

Props — mk-table

Prop	Tipo	Padrão	Descrição
`striped`	`boolean`	`false`	Alterna cor de fundo nas linhas pares do corpo.
`caption`	`string`	`—`	Rótulo acessível para leitores de tela (mapeado para `aria-label`).

Props — mk-table-row

Prop	Tipo	Padrão	Descrição
`highlighted`	`boolean`	`false`	Destaca a linha. Prevalece sobre o hover e o listrado.

Props — mk-table-header

Prop	Tipo	Padrão	Descrição
`align`	`"start" \| "center" \| "end"`	`"start"`	Alinhamento horizontal do conteúdo da célula de cabeçalho. `center` e `end` alinham título, ícone de ajuda e botão de ordenação.
`sort`	`"none" \| "ascending" \| "descending"`	`—`	Estado de ordenação da coluna. Quando definido, exibe ícone e habilita clique.
`colSpan`	`number`	`—`	Número de colunas que a célula ocupa. Reflete `aria-colspan` quando maior que 1. Valores não inteiros ou menores que 1 contam como 1.

Props — mk-table-cell

Prop	Tipo	Padrão	Descrição
`align`	`"start" \| "center" \| "end"`	`"start"`	Alinhamento horizontal do conteúdo da célula.
`truncate`	`boolean`	`false`	Trunca o conteúdo com ellipsis quando excede o espaço disponível.
`rowHeader`	`boolean`	`false`	Marca a célula como cabeçalho da linha (`role="rowheader"`), com o estilo de célula de dados.
`colSpan`	`number`	`—`	Número de colunas que a célula ocupa. Reflete `aria-colspan` quando maior que 1. Valores não inteiros ou menores que 1 contam como 1.

Eventos

Evento	Componente	Payload	Descrição
`mkRowClick`	`mk-table-row`	`MouseEvent`	Emitido ao clicar sobre uma linha da tabela.
`mkSort`	`mk-table-header`	`"none" \| "ascending" \| "descending"`	Emitido ao clicar em um cabeçalho com `sort` definido. Payload é a próxima direção.

Slots

Componente	Slot	Descrição
`mk-table`	(default)	Recebe `mk-table-head` e `mk-table-body`.
`mk-table-head`	(default)	Recebe `mk-table-row` com células de cabeçalho.
`mk-table-body`	(default)	Recebe `mk-table-row` com dados.
`mk-table-row`	(default)	Recebe `mk-table-header` ou `mk-table-cell`.
`mk-table-header`	(default)	Rótulo da coluna (texto, componente).
`mk-table-cell`	(default)	Conteúdo da célula (texto, componentes).

Acessibilidade

mk-table expõe role="table". Forneça caption para nomear a tabela via aria-label quando o contexto não for óbvio.
mk-table-head e mk-table-body expõem role="rowgroup", equivalentes a <thead> e <tbody>.
mk-table-row expõe role="row", equivalente a <tr>.
mk-table-header expõe role="columnheader" e aria-sort quando sort está definido.
mk-table-cell expõe role="cell", equivalente a <td>, ou role="rowheader" com rowHeader, equivalente a <th scope="row">.
mk-table-cell e mk-table-header com colSpan maior que 1 expõem aria-colspan.

Tecla	Comportamento
`Tab`	Percorre os controles do cabeçalho (botões de ordenar e de ajuda), na ordem das colunas. Linhas e células não recebem foco.
`Enter` / `Space`	No botão de ordenar, emite `mkSort` com a próxima direção.

Table

On this page