Table

Tabla nativa con un adaptador interactivo opcional.

Navegadores: Chrome 123+Firefox 121+Safari 17.5+
Nivel: 0
Tamaño comprimido: 617 B
Presupuesto de diseño forzado: 0 ms
Presupuesto de axe: 0
Compatible con SSR: Sí
Contrato publicado: Entorno de pruebas

Zona de pruebas

Table

Ejemplo de tabla nativa

Miembros del equipo
Nombre	Rol	Estado
Alice Chen	Administrador	Activo
Bob Smith	Editor	Activo
Carol Lee	Lector	Invitado
3 miembros · 2 activos

Ordenar, filtrar y expandir

Select all rows		Rol
Select row	Alice Chen	Administrador
alice@example.com · Activo
Select row	Bob Smith	Editor
bob@example.com · Activo
Select row	Carol Lee	Lector
carol@example.com · Invitado
3 miembros · 0 seleccionados

Encabezados, pie y columnas fijos

Miembro	Rol	Correo electrónico	Estado
Miembro 1	Editor	member1@example.com	Activo
Miembro 2	Editor	member2@example.com	Activo
Miembro 3	Editor	member3@example.com	Activo
Miembro 4	Editor	member4@example.com	Activo
Miembro 5	Editor	member5@example.com	Activo
Miembro 6	Editor	member6@example.com	Activo
Miembro 7	Editor	member7@example.com	Activo
Miembro 8	Editor	member8@example.com	Activo
Miembro 9	Editor	member9@example.com	Activo
Miembro 10	Editor	member10@example.com	Activo
Miembro 11	Editor	member11@example.com	Activo
Miembro 12	Editor	member12@example.com	Activo
Miembro 13	Editor	member13@example.com	Activo
Miembro 14	Editor	member14@example.com	Activo
Miembro 15	Editor	member15@example.com	Activo
Miembro 16	Editor	member16@example.com	Activo
Miembro 17	Editor	member17@example.com	Activo
Miembro 18	Editor	member18@example.com	Activo
Miembro 19	Editor	member19@example.com	Activo
Miembro 20	Editor	member20@example.com	Activo
Miembro 21	Editor	member21@example.com	Activo
Miembro 22	Editor	member22@example.com	Activo
Miembro 23	Editor	member23@example.com	Activo
Miembro 24	Editor	member24@example.com	Activo
24 miembros

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	Predeterminado	Descripción
`layout`	`"auto" \| "fixed"`	`"auto"`	Distribución de tabla nativa. La selección, el ordenamiento y la expansión usan la entrada explícita TableClient.
`size`	`"sm" \| "md" \| "lg"`	—	Espaciado de celdas de la hoja de estilos seleccionada.
`variant`	`"solid" \| "outline" \| "ghost"`	—	Variante de superficie de la hoja de estilos seleccionada.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`Table.Footer`

Prop	Tipo	Predeterminado	Descripción
`sticky`	`boolean`	—	Fija el pie al final del eje de bloque del contenedor de desplazamiento.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

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

Prop	Tipo	Predeterminado	Descripción
`align`	`"start" \| "center" \| "end"`	`"start"`	Alineación lógica del texto de esta celda.
`sticky`	`"start" \| "end"`	—	Fija una celda al borde lógico del eje en línea. Para celdas fijas contiguas, establece `--uiify-table-sticky-offset` en cada una.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`TableClient.ExpandTrigger / TableClient.ExpandedRow`

Prop	Tipo	Predeterminado	Descripción
`rowId`*	`string`	—	Clave de fila compartida que conecta el botón de expansión con su `<tr>` nativo. Coloca un `<td colSpan={columnCount}>` dentro de la fila expandida.

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

Prop	Tipo	Predeterminado	Descripción
`aria-label`	`string`	—	Nombre accesible de la tabla cuando no hay un título o encabezado visible que la identifique.
`aria-labelledby`	`string`	—	Id del elemento que etiqueta la tabla.
`selectionMode`	`"none" \| "single" \| "multiple"`	`"none"`	Indica si se pueden seleccionar filas y cuántas a la vez; "none" renderiza una tabla estática simple sin rol grid.
`selectionBehavior`	`"toggle" \| "replace"`	—	Indica si hacer clic en una fila la añade a la selección o reemplaza la selección actual.
`defaultSelectedKeys`	`Iterable<string>`	—	Ids de filas seleccionadas inicialmente; la selección queda no controlada dentro del componente.
`selectedKeys`	`Iterable<string>`	—	Ids de filas seleccionadas actualmente; la selección queda controlada por quien llama.
`onSelectionChange`	`(selectedKeys: Set<string>) => void`	—	Se llama con el nuevo conjunto de ids de filas seleccionadas cada vez que cambia la selección.
`defaultSortDescriptor`	`SortDescriptor \| null`	—	Columna y dirección del ordenamiento inicial; el estado de ordenamiento queda no controlado dentro del componente.
`sortDescriptor`	`SortDescriptor \| null`	—	Columna y dirección del ordenamiento actual; el ordenamiento pasa a ser controlado.
`onSortChange`	`(descriptor: SortDescriptor \| null) => void`	—	Se llama con el nuevo descriptor de ordenamiento, o null, al activar el encabezado de una columna ordenable.
`expandedKeys / defaultExpandedKeys`	`Iterable<string>`	—	Claves de filas expandidas controladas o iniciales.
`onExpandedChange`	`(keys: Set<string>) => void`	—	Informa las solicitudes de expansión. Las filas controladas esperan a que se actualicen las claves.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`Table.Header`

Prop	Tipo	Predeterminado	Descripción
`sticky`	`boolean`	`false`	Fija esta sección al contenedor de desplazamiento; Header usa el inicio del bloque y Footer, el final.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`Table.Body`

Prop	Tipo	Predeterminado	Descripción
`children`	`ReactNode`	—	Las filas del cuerpo de la tabla.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`Table.Row`

Prop	Tipo	Predeterminado	Descripción
`id`*	`string`	—	Id estable de fila que se usa como clave de selección y como id del elemento.
`disabled`	`boolean`	`false`	Impide seleccionar la fila o darle el foco con el teclado.
`selected`	`boolean`	—	Marca la fila como seleccionada en el marcado renderizado en el servidor antes de que el almacén de selección tome el control.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`Table.ColumnHeader`

Prop	Tipo	Predeterminado	Descripción
`id`*	`string`	—	Id de columna al que hacen referencia los descriptores de ordenamiento.
`allowsSorting`	`boolean`	`false`	Hace que el encabezado alterne el orden de su columna y exponga aria-sort.
`sortDirection`	`"ascending" \| "descending" \| null`	—	Dirección de ordenamiento renderizada para esta columna; se usa en el marcado inicial del servidor cuando se permite ordenar.
`onClick`	`React.MouseEventHandler<HTMLTableCellElement>`	—	Se ejecuta antes de ordenar; preventDefault() impide el cambio de orden.
`children`	`ReactNode`	—	La etiqueta del encabezado.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`Table.Cell`

Prop	Tipo	Predeterminado	Descripción
`children`	`ReactNode`	—	El contenido de la celda.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`Table.Caption`

Prop	Tipo	Predeterminado	Descripción
`children`	`ReactNode`	—	El texto del título que describe la tabla.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`Table.RowSelect`

Prop	Tipo	Predeterminado	Descripción
`rowId`*	`string`	—	Id de la fila que esta casilla selecciona y deselecciona.

Teclado

Tecla	Acción
`Tab`	Dar el foco a los controles de ordenamiento, selección y expansión de TableClient
`Enter` / `Space`	Activar un botón de ordenamiento o expansión con foco; cambiar una casilla de verificación
`Arrow keys`	Moverse entre las filas seleccionables del cuerpo en TableClient

Accesibilidad

Table renderiza de forma predeterminada <table>, <caption>, <thead>, <tbody> y <tfoot> nativos sin JavaScript de cliente; usa ColumnHeader y RowHeader para la semántica de encabezados. La entrada /client añade ordenamiento, selección, navegación por filas con teclado y expansión controlada, expuestos mediante aria-sort, aria-expanded y aria-controls. ExpandedRow es un <tr> nativo; coloca dentro un Cell con colSpan. El filtrado y el orden de los datos quedan a cargo del consumidor.

Puntos de estilo

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

Framework

Estilo

Tema

Idioma

Table

Zona de pruebas

Table

Ejemplo de tabla nativa

Ordenar, filtrar y expandir

Encabezados, pie y columnas fijos

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

Accesibilidad

Puntos de estilo