Librería React para el Ecosistema de Información de la UNP

La Librería del Ecosistema de Información es una colección de componentes reutilizables y modulares para crear y gestionar el entorno digital de la Unidad Nacional de Protección. Esta librería proporciona componentes para facilitar la integración de diversas funcionalidades dentro de las aplicaciones del ecosistema.

Instalación

npm install react-ecosistema-unp@latest

Nota: El Module Resolution del proyecto debe ser bundler para su correcto funcionamiento

"moduleResolution": "bundler"

Documentación

En desarrollo

• Elementos UI
• Tarjetas
• Tabla y modal
• Utilidades

• Accesibilidad

• Estilos

Usabilidad: Selección de Filas en la Tabla

La función de selección de filas permite al usuario seleccionar una o varias filas en la tabla y agrupar visualmente aquellas que comparten el mismo valor de tipoMesa, posicionándolas inmediatamente debajo de la fila seleccionada.

¿Cuándo se activa esta función?

La agrupación automática de filas por tipoMesa solo se activa cuando se cumplen ambas condiciones:

• Se pasa la prop enableRowSelection al componente de tabla.
• Se define la prop onSelectionChange, que recibe el array de identificadores seleccionados.

Props requeridas

| Prop | Tipo | Descripción | |---------------------|--------------|-----------------------------------------------------------------------------| | enableRowSelection| boolean | Habilita la selección de filas. | | onSelectionChange | (ids: string[]) => void | Callback que recibe los ids de las filas seleccionadas. |

Comportamiento

1. Al seleccionar una fila, todas las filas con el mismo valor en la columna tipoMesa se agrupan y se posicionan inmediatamente debajo de la fila seleccionada.
2. Si se seleccionan varias filas de diferentes tipoMesa, cada grupo se posiciona debajo de la primera fila seleccionada de su tipo.
3. La selección se realiza por el identificador único de la fila (numeroRegistro), lo que garantiza que la selección se mantenga aunque el orden de las filas cambie.
4. No se generan duplicados: cada fila aparece solo una vez en la tabla.
5. El reordenamiento solo ocurre cuando ambas props están presentes; de lo contrario, la tabla mantiene su orden original.

Ejemplo de uso

import { TablaRegistros } from '.../lib/tables';

const columns = [
	// ...definición de columnas...
];

const [selectedIds, setSelectedIds] = useState<string[]>([]);

<TablaRegistros
	columns={columns}
	data={data}
	enableRowSelection
	onSelectionChange={setSelectedIds}
	// ...otros props...
/>;

Notas adicionales

• El identificador único de cada fila debe estar en la propiedad numeroRegistro.
• El comportamiento de agrupación es transparente para el usuario y no requiere configuración adicional.
• Si se desea desactivar la agrupación, basta con omitir alguna de las props requeridas.