Tabla

Una tabla de datos interactiva y personalizable que se convierte en una lista de cards en formato mobile

Uso

La versión base del componente se invoca así:

<DataTable columns={columns} data={data} />

Donde ambos atributos contienen información de las columnas y datos

Funcionará para cualquier tipo de configuración de columnas que se desee
De manera predeterminada habrá un botón para ocultar o esconder las columnas que uno desee
De manera predeterminada habrá un filtro con un ícono animado que funcionará para filtrar todos los campos. Se puede deshabilitar para campos específicos con la propiedad enableGlobalFilter
De manera predeterminada habrá un paginado con un límite personalizado de 10 filas por página
De manera predeterminada en formato PC, el texto de un nuevo registro (con excepción del primero) se iluminará brevemente de color amarillo(*)
Se puede modificar la cantidad de cantidad de números de páginas que se muestran en el paginado
Se puede activar un botón en cada columna para ordenar las filas en su orden ascendente o descendente. También en ese mismo botón se puede ocultar la columna. Se activa con el componente DataTableColumnHeader
Se puede remarcar en rojo los registros que uno desee con el atributo registrosRemarcados(*)
De manera predeterminada la reordenación de columnas incluye animaciones para mejorar la experiencia visual.
Si se pasa un atributo Card de tipo componente, servirá como componente plantilla donde se renderizarán los datos de cada fila en formato mobile
Es posible agregar un skeleton de carga de datos si se pasa un atributo que indique que los datos se están cargando
Es posible ocultar columnas por defecto con el atributo columnsHidden
Es posible cambiar el placeholder del filtro

(*): Para que esta funcionalidad se active es necesario que los datos tengan propiedad "id"