Ir al contenido
uiify

Framework

Next.jsTanStack StartAstroVike

Estilo

CSSTailwind

Tema

Idioma

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

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
NombreRolEstado
Alice ChenAdministradorActivo
Bob SmithEditorActivo
Carol LeeLectorInvitado
3 miembros · 2 activos

Ordenar, filtrar y expandir

RolDetalles
Alice ChenAdministrador
Bob SmithEditor
Carol LeeLector
3 miembros · 0 seleccionados

Encabezados, pie y columnas fijos

Miembro 1Editormember1@example.comActivo
Miembro 2Editormember2@example.comActivo
Miembro 3Editormember3@example.comActivo
Miembro 4Editormember4@example.comActivo
Miembro 5Editormember5@example.comActivo
Miembro 6Editormember6@example.comActivo
Miembro 7Editormember7@example.comActivo
Miembro 8Editormember8@example.comActivo
Miembro 9Editormember9@example.comActivo
Miembro 10Editormember10@example.comActivo
Miembro 11Editormember11@example.comActivo
Miembro 12Editormember12@example.comActivo
Miembro 13Editormember13@example.comActivo
Miembro 14Editormember14@example.comActivo
Miembro 15Editormember15@example.comActivo
Miembro 16Editormember16@example.comActivo
Miembro 17Editormember17@example.comActivo
Miembro 18Editormember18@example.comActivo
Miembro 19Editormember19@example.comActivo
Miembro 20Editormember20@example.comActivo
Miembro 21Editormember21@example.comActivo
Miembro 22Editormember22@example.comActivo
Miembro 23Editormember23@example.comActivo
Miembro 24Editormember24@example.comActivo
24 miembros

API

Table.Root (native)

PropTipoPredeterminadoDescripció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.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Table.Footer

PropTipoPredeterminadoDescripción
stickyboolean—Fija el pie al final del eje de bloque del contenedor de desplazamiento.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Table.RowHeader / Table.Cell / Table.ColumnHeader

PropTipoPredeterminadoDescripció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.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

TableClient.ExpandTrigger / TableClient.ExpandedRow

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

PropTipoPredeterminadoDescripción
aria-labelstring—Nombre accesible de la tabla cuando no hay un título o encabezado visible que la identifique.
aria-labelledbystring—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.
defaultSelectedKeysIterable<string>—Ids de filas seleccionadas inicialmente; la selección queda no controlada dentro del componente.
selectedKeysIterable<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.
defaultSortDescriptorSortDescriptor | null—Columna y dirección del ordenamiento inicial; el estado de ordenamiento queda no controlado dentro del componente.
sortDescriptorSortDescriptor | 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 / defaultExpandedKeysIterable<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.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Table.Header

PropTipoPredeterminadoDescripción
stickybooleanfalseFija esta sección al contenedor de desplazamiento; Header usa el inicio del bloque y Footer, el final.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Table.Body

PropTipoPredeterminadoDescripción
childrenReactNode—Las filas del cuerpo de la tabla.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Table.Row

PropTipoPredeterminadoDescripción
id*string—Id estable de fila que se usa como clave de selección y como id del elemento.
disabledbooleanfalseImpide seleccionar la fila o darle el foco con el teclado.
selectedboolean—Marca la fila como seleccionada en el marcado renderizado en el servidor antes de que el almacén de selección tome el control.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Table.ColumnHeader

PropTipoPredeterminadoDescripción
id*string—Id de columna al que hacen referencia los descriptores de ordenamiento.
allowsSortingbooleanfalseHace 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.
onClickReact.MouseEventHandler<HTMLTableCellElement>—Se ejecuta antes de ordenar; preventDefault() impide el cambio de orden.
childrenReactNode—La etiqueta del encabezado.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Table.Cell

PropTipoPredeterminadoDescripción
childrenReactNode—El contenido de la celda.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Table.Caption

PropTipoPredeterminadoDescripción
childrenReactNode—El texto del título que describe la tabla.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Table.RowSelect

PropTipoPredeterminadoDescripción
rowId*string—Id de la fila que esta casilla selecciona y deselecciona.

Teclado

TeclaAcción
TabDar el foco a los controles de ordenamiento, selección y expansión de TableClient
Enter / SpaceActivar un botón de ordenamiento o expansión con foco; cambiar una casilla de verificación
Arrow keysMoverse 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