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>

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.

<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>

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-header

Prop	Tipo	Padrão	Descrição
`align`	`"start" \| "center" \| "end"`	`"start"`	Alinhamento horizontal do conteúdo da célula de cabeçalho.
`sort`	`"none" \| "ascending" \| "descending"`	`—`	Estado de ordenação da coluna. Quando definido, exibe ícone e habilita clique.

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.
`sort`	`"none" \| "ascending" \| "descending"`	`—`	Estado de ordenação (uso legado via prop `header`). Prefira `mk-table-header` para novas implementações.

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>.

Tecla	Comportamento
`Tab`	Navega entre linhas quando `mkRowClick` está configurado.
`Enter` / `Space`	Dispara `mkRowClick` na linha focada (quando configurado pelo consumidor).

Table

On this page