Table

Tabela nativa com adaptador interativo opcional.

Navegadores: Chrome 123+Firefox 121+Safari 17.5+
Nível: 0
Tamanho compactado: 617 B
Limite de layout forçado: 0 ms
Limite do axe: 0
Compatível com SSR: Sim
Contrato publicado: Ambiente de teste

Experimentar

Table

Exemplo de tabela nativa

Integrantes da equipe
Nome	Função	Situação
Alice Chen	Administrador	Ativo
Bob Smith	Editor	Ativo
Carol Lee	Leitor	Convidado
3 integrantes · 2 ativos

Ordenar, filtrar e expandir

Select all rows		Função
Select row	Alice Chen	Administrador
alice@example.com · Ativo
Select row	Bob Smith	Editor
bob@example.com · Ativo
Select row	Carol Lee	Leitor
carol@example.com · Convidado
3 integrantes · 0 selecionados

Cabeçalhos, rodapé e colunas fixos

Integrante	Função	E-mail	Situação
Integrante 1	Editor	member1@example.com	Ativo
Integrante 2	Editor	member2@example.com	Ativo
Integrante 3	Editor	member3@example.com	Ativo
Integrante 4	Editor	member4@example.com	Ativo
Integrante 5	Editor	member5@example.com	Ativo
Integrante 6	Editor	member6@example.com	Ativo
Integrante 7	Editor	member7@example.com	Ativo
Integrante 8	Editor	member8@example.com	Ativo
Integrante 9	Editor	member9@example.com	Ativo
Integrante 10	Editor	member10@example.com	Ativo
Integrante 11	Editor	member11@example.com	Ativo
Integrante 12	Editor	member12@example.com	Ativo
Integrante 13	Editor	member13@example.com	Ativo
Integrante 14	Editor	member14@example.com	Ativo
Integrante 15	Editor	member15@example.com	Ativo
Integrante 16	Editor	member16@example.com	Ativo
Integrante 17	Editor	member17@example.com	Ativo
Integrante 18	Editor	member18@example.com	Ativo
Integrante 19	Editor	member19@example.com	Ativo
Integrante 20	Editor	member20@example.com	Ativo
Integrante 21	Editor	member21@example.com	Ativo
Integrante 22	Editor	member22@example.com	Ativo
Integrante 23	Editor	member23@example.com	Ativo
Integrante 24	Editor	member24@example.com	Ativo
24 integrantes

React

CSS

Tailwind

import { Table } from "@gunkin/uiify";
const rows = [
  { id: "alice", name: "Alice Chen", role: "Admin", status: "Active" },
  { id: "bob", name: "Bob Smith", role: "Editor", status: "Active" },
  { id: "carol", name: "Carol Lee", role: "Viewer", status: "Invited" },
];
export default function Example() {
  return (
    <Table.Root className="" variant="outline" size="sm">
      <Table.Caption>Team members</Table.Caption>
      <Table.Header>
        <Table.Row id="team-head">
          <Table.ColumnHeader id="team-name">Name</Table.ColumnHeader>
          <Table.ColumnHeader id="team-role">Role</Table.ColumnHeader>
          <Table.ColumnHeader id="team-status">Status</Table.ColumnHeader>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {rows.map((row) => (
          <Table.Row id={row.id} key={row.id}>
            <Table.RowHeader>{row.name}</Table.RowHeader>
            <Table.Cell>{row.role}</Table.Cell>
            <Table.Cell>{row.status}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row id="team-total">
          <Table.Cell colSpan={3}>3 members · 2 active</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  );
}

@layer components {
  [data-uiify-table] {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    color: var(--card-foreground);
    font-size: var(--text-sm);
  }
  [data-uiify-table][data-layout="fixed"] {
    table-layout: fixed;
  }
  [data-uiify-table] :is(th, td) {
    padding-block: 0.75rem;
    padding-inline: 1rem;
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--border);
    background: inherit;
  }
  [data-uiify-table] :is(th, td)[data-align="center"] {
    text-align: center;
  }
  [data-uiify-table] :is(th, td)[data-align="end"] {
    text-align: end;
  }
  [data-uiify-table] :is(thead, tfoot) {
    background: var(--secondary);
    font-weight: 600;
  }
  [data-uiify-table] tbody tr {
    background: var(--card);
  }
  [data-uiify-table] tbody tr:hover {
    background: var(--secondary);
  }
  [data-uiify-table] tbody tr[data-selected] {
    background: var(--accent);
  }
  [data-uiify-table] caption {
    padding-block: 0.75rem;
    text-align: start;
    color: var(--muted-foreground);
  }
  [data-uiify-table][data-size="sm"] :is(th, td) {
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
  }
  [data-uiify-table][data-size="lg"] :is(th, td) {
    padding-block: 1rem;
    padding-inline: 1.25rem;
  }
  [data-uiify-table][data-variant="outline"] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  [data-uiify-table][data-variant="ghost"] {
    background: transparent;
  }
  [data-uiify-table] :is(thead, tfoot, tr)[data-sticky] {
    position: sticky;
    inset-block-start: var(--uiify-table-sticky-offset, 0);
    z-index: 2;
  }
  [data-uiify-table] tfoot[data-sticky] {
    inset-block: auto var(--uiify-table-sticky-offset, 0);
  }
  [data-uiify-table] :is(th, td)[data-sticky] {
    position: sticky;
    z-index: 1;
  }
  [data-uiify-table] :is(th, td)[data-sticky="start"] {
    inset-inline-start: var(--uiify-table-sticky-offset, 0);
  }
  [data-uiify-table] :is(th, td)[data-sticky="end"] {
    inset-inline-end: var(--uiify-table-sticky-offset, 0);
  }
  [data-uiify-table] :is(thead, tfoot)[data-sticky] :is(th, td)[data-sticky] {
    z-index: 3;
  }
  [data-uiify-table] th > button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  [data-uiify-table] th[aria-sort="ascending"] > button::after {
    content: "↑" / "";
  }
  [data-uiify-table] th[aria-sort="descending"] > button::after {
    content: "↓" / "";
  }
  [data-uiify-table] [data-part="expanded-row"] {
    background: var(--secondary);
  }
  [data-uiify-table] :is(button, tr):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }
}

import { Table } from "@gunkin/uiify";
const rows = [
  { id: "alice", name: "Alice Chen", role: "Admin", status: "Active" },
  { id: "bob", name: "Bob Smith", role: "Editor", status: "Active" },
  { id: "carol", name: "Carol Lee", role: "Viewer", status: "Invited" },
];
export default function Example() {
  return (
    <Table.Root
      className={
        "[inline-size:100%] [border-collapse:separate] [border-spacing:0] bg-card text-card-foreground text-sm data-" +
        "[layout=fixed]:table-fixed [&_:is(th,td)]:[padding-block:0.75rem] [&_:is(th,td)]:[padding-inline:1rem] [&_:" +
        "is(th,td)]:text-start [&_:is(th,td)]:[vertical-align:middle] [&_:is(th,td)]:[border-block-end-width:1px] [&" +
        "_:is(th,td)]:[border-block-end-style:solid] [&_:is(th,td)]:[border-block-end-color:var(--border)] [&_:is(th" +
        ",td)]:[background:inherit] [&_:is(th,td)[data-align=center]]:text-center [&_:is(th,td)[data-align=end]]:tex" +
        "t-end [&_:is(thead,tfoot)]:bg-secondary [&_:is(thead,tfoot)]:[font-weight:600] [&_tbody_tr]:bg-card [&_tbod" +
        "y_tr:hover]:bg-secondary [&_tbody_tr[data-selected]]:bg-accent [&_caption]:[padding-block:0.75rem] [&_capti" +
        "on]:text-start [&_caption]:text-muted-foreground [&[data-size=sm]_:is(th,td)]:[padding-block:0.5rem] [&[dat" +
        "a-size=sm]_:is(th,td)]:[padding-inline:0.75rem] [&[data-size=lg]_:is(th,td)]:[padding-block:1rem] [&[data-s" +
        "ize=lg]_:is(th,td)]:[padding-inline:1.25rem] data-[variant=outline]:[border-width:1px] data-[variant=outlin" +
        "e]:border-solid data-[variant=outline]:border-border data-[variant=outline]:rounded-lg data-[variant=ghost]" +
        ":bg-transparent [&_:is(thead,tfoot,tr)[data-sticky]]:sticky [&_:is(thead,tfoot,tr)[data-sticky]]:[inset-blo" +
        "ck-start:var(--uiify-table-sticky-offset,_0)] [&_:is(thead,tfoot,tr)[data-sticky]]:z-[2] [&_tfoot[data-stic" +
        "ky]]:[inset-block:auto_var(--uiify-table-sticky-offset,_0)] [&_:is(th,td)[data-sticky]]:sticky [&_:is(th,td" +
        ")[data-sticky]]:z-[1] [&_:is(th,td)[data-sticky=start]]:[inset-inline-start:var(--uiify-table-sticky-offset" +
        ",_0)] [&_:is(th,td)[data-sticky=end]]:[inset-inline-end:var(--uiify-table-sticky-offset,_0)] [&_:is(thead,t" +
        "foot)[data-sticky]_:is(th,td)[data-sticky]]:z-[3] [&_th>button]:inline-flex [&_th>button]:items-center [&_t" +
        "h>button]:[gap:0.5rem] [&_th>button]:p-0 [&_th>button]:border-0 [&_th>button]:border-current [&_th>button]:" +
        "border-none [&_th>button]:bg-transparent [&_th>button]:text-inherit [&_th>button]:[font-style:inherit] [&_t" +
        "h>button]:[font-variant:inherit] [&_th>button]:[font-weight:inherit] [&_th>button]:[font-stretch:inherit] [" +
        "&_th>button]:text-[length:inherit] [&_th>button]:leading-[inherit] [&_th>button]:font-[family-name:inherit]" +
        " [&_th>button]:cursor-pointer [&_th[aria-sort=ascending]>button::after]:content-[\"↑\"_/_\"\"] [&_th[aria-sort=" +
        "descending]>button::after]:content-[\"↓\"_/_\"\"] [&_[data-part=expanded-row]]:bg-secondary [&_:is(button,tr):f" +
        "ocus-visible]:[outline:2px_solid_var(--ring)] [&_:is(button,tr):focus-visible]:[outline-offset:-2px]"
      }
      variant="outline"
      size="sm"
    >
      <Table.Caption>Team members</Table.Caption>
      <Table.Header>
        <Table.Row id="team-head">
          <Table.ColumnHeader id="team-name">Name</Table.ColumnHeader>
          <Table.ColumnHeader id="team-role">Role</Table.ColumnHeader>
          <Table.ColumnHeader id="team-status">Status</Table.ColumnHeader>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {rows.map((row) => (
          <Table.Row id={row.id} key={row.id}>
            <Table.RowHeader>{row.name}</Table.RowHeader>
            <Table.Cell>{row.role}</Table.Cell>
            <Table.Cell>{row.status}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row id="team-total">
          <Table.Cell colSpan={3}>3 members · 2 active</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[inline-size:100%] [border-collapse:separate] [border-spacing:0] bg-card text-card-foreground text-sm data-[layout=fixed]:table-fixed [&_:is(th,td)]:[padding-block:0.75rem] [&_:is(th,td)]:[padding-inline:1rem] [&_:is(th,td)]:text-start [&_:is(th,td)]:[vertical-align:middle] [&_:is(th,td)]:[border-block-end-width:1px] [&_:is(th,td)]:[border-block-end-style:solid] [&_:is(th,td)]:[border-block-end-color:var(--border)] [&_:is(th,td)]:[background:inherit] [&_:is(th,td)[data-align=center]]:text-center [&_:is(th,td)[data-align=end]]:text-end [&_:is(thead,tfoot)]:bg-secondary [&_:is(thead,tfoot)]:[font-weight:600] [&_tbody_tr]:bg-card [&_tbody_tr:hover]:bg-secondary [&_tbody_tr[data-selected]]:bg-accent [&_caption]:[padding-block:0.75rem] [&_caption]:text-start [&_caption]:text-muted-foreground [&[data-size=sm]_:is(th,td)]:[padding-block:0.5rem] [&[data-size=sm]_:is(th,td)]:[padding-inline:0.75rem] [&[data-size=lg]_:is(th,td)]:[padding-block:1rem] [&[data-size=lg]_:is(th,td)]:[padding-inline:1.25rem] data-[variant=outline]:[border-width:1px] data-[variant=outline]:border-solid data-[variant=outline]:border-border data-[variant=outline]:rounded-lg data-[variant=ghost]:bg-transparent [&_:is(thead,tfoot,tr)[data-sticky]]:sticky [&_:is(thead,tfoot,tr)[data-sticky]]:[inset-block-start:var(--uiify-table-sticky-offset,_0)] [&_:is(thead,tfoot,tr)[data-sticky]]:z-[2] [&_tfoot[data-sticky]]:[inset-block:auto_var(--uiify-table-sticky-offset,_0)] [&_:is(th,td)[data-sticky]]:sticky [&_:is(th,td)[data-sticky]]:z-[1] [&_:is(th,td)[data-sticky=start]]:[inset-inline-start:var(--uiify-table-sticky-offset,_0)] [&_:is(th,td)[data-sticky=end]]:[inset-inline-end:var(--uiify-table-sticky-offset,_0)] [&_:is(thead,tfoot)[data-sticky]_:is(th,td)[data-sticky]]:z-[3] [&_th>button]:inline-flex [&_th>button]:items-center [&_th>button]:[gap:0.5rem] [&_th>button]:p-0 [&_th>button]:border-0 [&_th>button]:border-current [&_th>button]:border-none [&_th>button]:bg-transparent [&_th>button]:text-inherit [&_th>button]:[font-style:inherit] [&_th>button]:[font-variant:inherit] [&_th>button]:[font-weight:inherit] [&_th>button]:[font-stretch:inherit] [&_th>button]:text-[length:inherit] [&_th>button]:leading-[inherit] [&_th>button]:font-[family-name:inherit] [&_th>button]:cursor-pointer [&_th[aria-sort=ascending]>button::after]:content-["↑"_/_""] [&_th[aria-sort=descending]>button::after]:content-["↓"_/_""] [&_[data-part=expanded-row]]:bg-secondary [&_:is(button,tr):focus-visible]:[outline:2px_solid_var(--ring)] [&_:is(button,tr):focus-visible]:[outline-offset:-2px]');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

API

`Table.Root (native)`

Prop	Tipo	Padrão	Descrição
`layout`	`"auto" \| "fixed"`	`"auto"`	Layout de tabela nativa. Seleção, ordenação e expansão usam a entrada explícita TableClient.
`size`	`"sm" \| "md" \| "lg"`	—	Espaçamento das células definido pela folha de estilos selecionada.
`variant`	`"solid" \| "outline" \| "ghost"`	—	Variante de superfície definida pela folha de estilos selecionada.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`Table.Footer`

Prop	Tipo	Padrão	Descrição
`sticky`	`boolean`	—	Fixa o rodapé no fim do eixo de bloco do contêiner de rolagem.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`Table.RowHeader / Table.Cell / Table.ColumnHeader`

Prop	Tipo	Padrão	Descrição
`align`	`"start" \| "center" \| "end"`	`"start"`	Alinhamento lógico do texto nesta célula.
`sticky`	`"start" \| "end"`	—	Fixa uma célula na borda lógica do eixo inline. Para células fixas adjacentes, defina `--uiify-table-sticky-offset` em cada uma.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`TableClient.ExpandTrigger / TableClient.ExpandedRow`

Prop	Tipo	Padrão	Descrição
`rowId`*	`string`	—	Chave de linha compartilhada que conecta o botão de expansão ao `<tr>` nativo. Coloque um `<td colSpan={columnCount}>` dentro da linha expandida.

`TableClient.Root — @gunkin/uiify/components/table/client`

Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	—	Nome acessível da tabela quando não houver legenda ou título visível que a nomeie.
`aria-labelledby`	`string`	—	Id do elemento que rotula a tabela.
`selectionMode`	`"none" \| "single" \| "multiple"`	`"none"`	Define se as linhas podem ser selecionadas e quantas por vez; "none" renderiza uma tabela estática simples sem o papel grid.
`selectionBehavior`	`"toggle" \| "replace"`	—	Define se clicar em uma linha a adiciona à seleção ou substitui a seleção atual.
`defaultSelectedKeys`	`Iterable<string>`	—	Ids das linhas selecionadas inicialmente, mantendo a seleção não controlada dentro do componente.
`selectedKeys`	`Iterable<string>`	—	Ids das linhas selecionadas agora, tornando a seleção controlada por quem chama.
`onSelectionChange`	`(selectedKeys: Set<string>) => void`	—	Chamado com o novo conjunto de ids de linhas selecionadas sempre que a seleção muda.
`defaultSortDescriptor`	`SortDescriptor \| null`	—	Coluna e direção da ordenação inicial, mantendo o estado de ordenação não controlado dentro do componente.
`sortDescriptor`	`SortDescriptor \| null`	—	Coluna e direção da ordenação atual, tornando a ordenação controlada.
`onSortChange`	`(descriptor: SortDescriptor \| null) => void`	—	Chamado com o novo descritor de ordenação, ou null, quando um cabeçalho de coluna ordenável é ativado.
`expandedKeys / defaultExpandedKeys`	`Iterable<string>`	—	Chaves das linhas expandidas, controladas ou iniciais.
`onExpandedChange`	`(keys: Set<string>) => void`	—	Informa solicitações de expansão. Linhas controladas aguardam as chaves atualizadas.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`Table.Header`

Prop	Tipo	Padrão	Descrição
`sticky`	`boolean`	`false`	Fixa esta seção no contêiner de rolagem; Header usa o início do eixo de bloco e Footer usa o fim.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`Table.Body`

Prop	Tipo	Padrão	Descrição
`children`	`ReactNode`	—	As linhas do corpo da tabela.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`Table.Row`

Prop	Tipo	Padrão	Descrição
`id`*	`string`	—	Id estável da linha, usado como chave de seleção e id do elemento.
`disabled`	`boolean`	`false`	Impede que a linha seja selecionada ou receba foco por teclado.
`selected`	`boolean`	—	Marca a linha como selecionada na marcação renderizada no servidor antes de o armazenamento de seleção assumir o controle.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`Table.ColumnHeader`

Prop	Tipo	Padrão	Descrição
`id`*	`string`	—	Id de coluna ao qual os descritores de ordenação se referem.
`allowsSorting`	`boolean`	`false`	Faz o cabeçalho alternar a ordenação da coluna e publicar aria-sort.
`sortDirection`	`"ascending" \| "descending" \| null`	—	Direção de ordenação renderizada para esta coluna, usada na marcação inicial do servidor quando a ordenação é permitida.
`onClick`	`React.MouseEventHandler<HTMLTableCellElement>`	—	Executa antes da ordenação; preventDefault() veta a alteração da ordenação.
`children`	`ReactNode`	—	O rótulo do cabeçalho.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`Table.Cell`

Prop	Tipo	Padrão	Descrição
`children`	`ReactNode`	—	O conteúdo da célula.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`Table.Caption`

Prop	Tipo	Padrão	Descrição
`children`	`ReactNode`	—	O texto da legenda que descreve a tabela.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

`Table.RowSelect`

Prop	Tipo	Padrão	Descrição
`rowId`*	`string`	—	Id da linha que esta caixa de seleção seleciona e desseleciona.

Teclado

Tecla	Ação
`Tab`	Foque os controles de ordenação, seleção e expansão no TableClient
`Enter` / `Space`	Ative um botão de ordenação ou expansão em foco; alterne uma caixa de seleção
`Arrow keys`	Mova o foco entre linhas selecionáveis do corpo no TableClient

Acessibilidade

O Table padrão renderiza <table>, <caption>, <thead>, <tbody> e <tfoot> nativos sem JavaScript no cliente; use ColumnHeader e RowHeader para a semântica dos cabeçalhos. A entrada /client acrescenta ordenação, seleção, navegação por teclado entre linhas e expansão controlada, expostas por aria-sort, aria-expanded e aria-controls. ExpandedRow é um <tr> nativo; coloque uma Cell com colSpan dentro dele. Filtragem e ordenação dos dados ficam a cargo do consumidor.

Pontos de integração de estilos

data-uiify-tabledata-partdata-layoutdata-sizedata-variantdata-stickydata-selecteddata-disabled--uiify-table-sticky-offset

Framework

Estilo

Tema

Idioma

Table

Experimentar

Table

Exemplo de tabela nativa

Ordenar, filtrar e expandir

Cabeçalhos, rodapé e colunas fixos

API

`Table.Root (native)`

`Table.Footer`

`Table.RowHeader / Table.Cell / Table.ColumnHeader`

`TableClient.ExpandTrigger / TableClient.ExpandedRow`

`TableClient.Root — @gunkin/uiify/components/table/client`

`Table.Header`

`Table.Body`

`Table.Row`

`Table.ColumnHeader`

`Table.Cell`

`Table.Caption`

`Table.RowSelect`

Teclado

Acessibilidade

Pontos de integração de estilos