Explora el ejemplo
La tabla muestra seis oportunidades ficticias con nombre y empresa, etapa, importe, cierre previsto, origen y acciones. Conserva filas y columnas visibles por defecto; en anchos pequeños utiliza desplazamiento horizontal.
- Arrastra la línea a la derecha de cada encabezado para cambiar su ancho. Se guarda automáticamente en este navegador, incluso al recargar.
- Haz doble clic en esa línea para ajustar la columna de la izquierda al encabezado y al contenido de las filas cargadas en la página actual.
- Mantén el cursor dos segundos sobre una celda recortada para ver su texto completo en un popover. También funciona al enfocar la celda; Escape lo cierra.
- El texto permanece dentro del ancho de su columna incluso al enfocar la celda. Prueba a estrechar Oportunidad con el nombre largo de la primera fila: la lectura completa aparece en el popover, sin superponerse a Etapa. Los editores internos conservan espacio para sus desplegables al recibir foco.
- Enfoca el separador y usa las flechas izquierda/derecha para ajustar 16 px; Enter autoajusta.
- Pulsa Oportunidad o Importe para ordenar en ambos sentidos.
- Busca por nombre o empresa y filtra por etapa. Una búsqueda sin coincidencias muestra el estado vacío.
- Selecciona una fila o todas las visibles para probar la acción de marcar como ganadas.
- Cambia de página o el número de registros por página. La selección conserva los registros de otras páginas.
- Usa Editar, escribe un nombre y Guarda o Cancela. La etapa se modifica desde su chip.
- Activa Usar tarjetas para comparar la presentación responsive del mismo componente.
- Restablecer recupera datos, filtros, orden y paginación.
Los datos proceden de demos/table-data.ts. No se guardan ni se envían a una API. Solo los anchos de columnas se guardan localmente.
Cuándo usar
Usa CrmEditableTable para listados. Entrega las acciones a headerActions, columnas con render y una identidad estable para cada fila. Los editores de celda pertenecen al consumidor.
Propiedades y variantes
| Propiedad | Contrato |
|---|---|
rows / columns / getRowId | Datos, definiciones de columnas e ID estable. |
columnWidthsKey | Identidad opcional y estable de la tabla dentro de su ruta. Por defecto usa el título de texto. Especificarla si hay varias tablas con títulos iguales o títulos dinámicos. Los anchos se guardan por ID de columna, independientemente del orden y la visibilidad; no se sincronizan entre dispositivos. |
sort / onSortChange | Orden controlado; el consumidor ordena los datos. |
utilityPlacement | pagination coloca columnas y filas después de los botones del paginador superior, con el total debajo de «Página X de Y», alineado a la izquierda; header conserva la posición habitual. |
headerActions / headerLayout | Acciones; stacked separa las utilidades en contenedores estrechos. |
emptyText / isRefreshing | Estados vacío y de actualización. |
selection / pagination | Selección y paginación opcionales, controladas por el consumidor. |
columns[].isReorderable | false oculta el agarre y desactiva el arrastre de esa columna. Por defecto conserva el comportamiento existente. La demo lo muestra en Etapa. |
fitToContainer / showHorizontalScrollNavigator | En widgets compactos, usa fitToContainer, anchos proporcionales y texto multilínea; desactiva el navegador flotante con showHorizontalScrollNavigator={false}. |
Estados y accesibilidad
Conserva la edición optimista y revierte los cambios si falla el guardado.
Evitar
No montes una tabla dentro de otra cabecera de tarjeta ni uses el índice de la fila como identidad persistente.
El primer ajuste manual reemplaza la distribución automática por anchos explícitos y scroll horizontal cuando hace falta. Las tarjetas responsive conservan su distribución. Si el navegador bloquea el almacenamiento, el ajuste sigue disponible durante la sesión del componente.
Encabezados agrupados
CrmEditableTableColumn.headerGroup agrega un título sobre columnas visibles consecutivas con el mismo grupo, mediante colSpan y scope="colgroup". El ancho sigue las columnas al redimensionar; ocultar o reordenar columnas recalcula los grupos. Las columnas sin grupo conservan su encabezado habitual. La demo agrupa importe y fecha como «Datos de la operación»; Finance agrupa Día, Semana y Mes como «Gasto acumulado».
Las barras de acciones masivas incluyen «Quitar selección». Cada tabla implementa selection.onClearSelection en el propietario de su estado para vaciar toda la selección, incluidas filas de otras páginas. La acción no modifica registros y no aparece en la barra exclusiva de guardado de vista.