Tabla

Datos que se comparan por columnas (facturas, pedidos, clientes), con orden, filtros por columna, selección, paginación, columnas configurables y totales al pie.

Cuándo usarlo

• Listados de gestión en los que se busca, se ordena y se actúa sobre filas.
• Ordena, filtra, selecciona y pagina sola. Los callbacks (onSort, onFilter, onSelectionChange, onVisibleColumnsChange, pagination.onPageChange) solo avisan: cada parte la controla quien la usa solo si le pasa también su valor (sort, filters, selectedKeys, visibleColumns, pagination.page). Estas fichas le pasan todos los callbacks y la tabla sigue funcionando sola.
• Con serverSide (o con pagination.total) no ordena ni filtra en local: pinta las filas tal como llegan, y quien la usa pide al servidor lo que dicen los avisos.
• selection="multiple" con selectionActions para acciones en masa; footer en una columna para sumar lo que queda tras filtrar.
• renderExpandedRow convierte cada fila en desplegable, con su detalle a todo el ancho debajo; maxHeight fija el alto y deja quietas la cabecera y el pie.
• Sin paginación y dentro de un contenedor con data-density="compact" en un cuadro de mando: la densidad es global, no una prop.

Cuándo no

• Los datos de una sola cosa, etiqueta y valor: DataList.
• Miles de filas que se recorren seguidas, sin columnas: VirtualList.
• Una comparativa de planes o precios: PricingTable.
• Una hoja de cálculo completa (fórmulas, selección de rangos, pegado masivo): la edición de aquí es celda a celda.

Más allá de lo básico

• groupBy agrupa por una columna, con una cabecera plegable por grupo (initialCollapsedGroups, renderGroupLabel).
• advancedFilters añade un panel de condiciones «columna · operador · valor» unidas por «y» o por «o» (texto, números, fechas y sí/no, con «entre» y «está vacío»); advancedFilter lo controla desde fuera.
• exportCsv baja a CSV todas las filas filtradas y ordenadas en las columnas visibles (con BOM para Excel, el separador del idioma y los textos que parecen fórmula neutralizados). exportable: false deja fuera una columna.
• persistKey recuerda columnas visibles, orden y anchos en el navegador; el panel de columnas ofrece «Restablecer».
• editor en una columna + onCellEdit en la tabla: Intro, F2 o doble clic abren la celda; Intro guarda, Escape cancela, salir guarda. Si onCellEdit falla, el campo sigue abierto con el error. La tabla no cambia rows: quien la usa actualiza sus datos.
• virtualized + maxHeight pinta solo las filas que se ven, para miles de filas (Inicio, Fin y las páginas saltan aunque la fila no esté pintada). No se combina con renderExpandedRow.

Teclado: la tabla es una sola parada de Tab. Arriba y abajo van de fila en fila, conservando la columna; la flecha derecha entra en las celdas (al control que tengan dentro, como la casilla de selección, que se marca con Espacio) y la izquierda vuelve a la fila. Inicio y Fin van a la primera y a la última fila. Pulsar la cabecera de una columna sortable ordena (con el foco en ella, también Intro o Espacio): ascendente, descendente y sin orden. El embudo de la cabecera abre el filtro (en el de texto, Intro filtra) y «Columnas» abre un panel con casillas y botones de subir y bajar, sin arrastrar nada.

Accesibilidad: es un <table> de verdad con papel de rejilla (role="grid"), nombre obligatorio (label), cabeceras con aria-sort y, con rowHeader, la columna que nombra cada fila. Con el filtro puesto, el botón cambia de nombre («Filtro de Cliente (activo)») y de forma, no solo de color: el embudo se rellena, igual que el orden activo apaga una de sus dos flechas. Los dos son cajas iguales de 22 px junto al título. La barra de selección («3 filas seleccionadas») y el recuento de páginas van en role="status". Mientras carga (loading) lleva aria-busy y, si aún no hay filas, dice «Cargando…».

Aspecto fino: variables CSS --amset-table-*: -cell, -column, -font, -padding-row, -radius, -row. El tamaño mueve el relleno de la celda y el cuerpo de letra. El de arriba y abajo lo manda la densidad (data-density) cuando la hay.