Data Table
Una tabla de visualización de datos con entrada de búsqueda, filtros por pestañas, estado de carga y estados vacío.
| ID | Nombre | Rol | |
|---|---|---|---|
| 1 | Juan Pérez | juan@email.com | Admin |
| 2 | María García | maria@email.com | User |
| 3 | Carlos López | carlos@email.com | User |
Generación de Tablas con B Life Hooks
Crear tablas con useTable
El hook useTable es la base para crear tablas estructuradas. Te proporciona una API para definir columnas y manejar el renderizado de datos.
Uso Básico
Para casos simples donde solo necesitas mostrar datos de texto plano:
Empleados de la Empresa
| ID | Nombre | Departamento | Salario | |
|---|---|---|---|---|
| 1 | Juan Pérez | juan@email.com | Ingeniería | 5000 |
| 2 | María García | maria@email.com | Diseño | 4500 |
| 3 | Carlos López | carlos@email.com | Marketing | 4200 |
| 4 | Ana Rodríguez | ana@email.com | Ventas | 4800 |
Uso Avanzado
Para casos donde necesitas personalizar el renderizado de celdas y cabeceras:
Empleado | Departamento | Salario | Rating | Estado | Acciones |
|---|---|---|---|---|---|
 Juan Pérez juan@email.com | Ingeniería | 5000 MXN | 4.8 | Activo | |
 María García maria@email.com | Diseño | 4500 MXN | 4.6 | Activo | |
 Carlos López carlos@email.com | Marketing | 4200 MXN | 4.2 | Inactivo | |
 Ana Rodríguez ana@email.com | Ventas | 4800 MXN | 4.9 | Activo |
Gestión de Selección de Filas con useSelection
El hook useSelection te permite gestionar la selección de filas en la tabla, soportando tanto selección simple como múltiple.
Selección Múltiple
Usuarios del Sistema
| Nombre | Rol | Estado | ||
|---|---|---|---|---|
| Juan Pérez | juan@email.com | Admin | Activo | |
| María García | maria@email.com | Usuario | Inactivo | |
| Carlos López | carlos@email.com | Usuario | Activo | |
| Ana Rodríguez | ana@email.com | Moderador | Activo |
Selección Simple
| Seleccionar | Plan | Precio | Características |
|---|---|---|---|
| Plan Básico | $9.99/mes |
| |
| Plan Pro | $19.99/mes |
| |
| Plan Enterprise | $49.99/mes |
|
Estado de Carga
| ID | Nombre | Acciones | |
|---|---|---|---|
Estado Vacio
Nada para mostrar por ahora.
| ID | Nombre | Acciones | |
|---|---|---|---|
Tabla con entrada de Búsqueda
| ID | Nombre | Departamento | |
|---|---|---|---|
| 1 | Juan Pérez | juan@email.com | Ingeniería |
| 2 | María García | maria@email.com | Diseño |
| 3 | Carlos López | carlos@email.com | Marketing |
| 4 | Ana Rodríguez | ana@email.com | Ventas |
Tabla con Pestañas
| ID | Nombre | Estado |
|---|---|---|
| 1 | Juan Pérez | Activo |
| 2 | María García | Inactivo |
| 3 | Carlos López | Activo |
Componentes de Paginación
La librería incluye componentes especializados para manejar la paginación de tablas de datos.
RangeLabel
Muestra el rango de elementos actualmente visibles en la tabla.
ItemsPerPage
Selector para cambiar la cantidad de elementos mostrados por página.
Ver por pagina
PageControls
Controles de navegación de páginas con botones y campo de entrada.
Ejemplos
Tabla de productos
| Imagen | Producto | Precio | Marca | Rating | Stock | Acciones | |
|---|---|---|---|---|---|---|---|
Ver por pagina
Props
Table
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
borders | row | grid | - | El estilos de borders que divider las filas y celdas |
countColumns | number | - | El numero de columnas a mostrar en el skeleton |
skeletonRowCount | number | - | El numero de filas a mostrar en el skeleton |
loading | boolean | - | Habilita el estado de carga |
empty | boolean | - | Habilita el estado cuando no hay datos que mostrar |
search | { placeholder?: string; value?: string; defaultValue?: string; onChange?: (value: string) => void; visible?: boolean; disabled?: boolean; onClear?: () => void; } | - | La opciones de configuracion del campo de busqueda |
tabs | { items: { label: string; value: string; icon?: ReactNode }[]; value?: string; defaultValue?: string; onChange?: (value: string) => void; visible?: boolean; } | - | La opciones de configuracion del campo de busqueda |
...rest | ComponentProps<"table"> | - | Todas las props del elemento HTML table |
RangeLabel
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
startIndex | number | - | El numero de inicio de la pagina |
endIndex | number | - | El numero de fin de la pagina |
totalItems | number | - | El numero total de items |
ItemsPerPage
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
value | number | - | El numero controlado de elementos por página |
defaultValue | number | - | Valor por defecto (por defecto: 25) |
onChange | (value: number) => void | - | Callback cuando cambia el valor |
options | number[] | - | Array de opciones disponibles (por defecto: [25, 50, 75, 100]) |
PageControls
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
value | string | - | String controlado de la página actual |
defaultValue | string | - | Valor por defecto (por defecto: '1') |
onChange | (value: string) => void | - | Callback cuando cambia la página |
minValue | number | - | Página mínima (por defecto: 1) |
maxValue | number | - | Página máxima (por defecto: 100) |
totalPages | number | - | Número total de páginas (opcional) |
onFirstClick | () => void | - | Callback para ir a la primera página |
onLastClick | () => void | - | Callback para ir a la última página |
onNextClick | () => void | - | Callback para ir a la siguiente página |
onPrevClick | () => void | - | Callback para ir a la página anterior |
disabled | { first?: boolean; prev?: boolean; next?: boolean; last?: boolean } | - | Objeto con flags para deshabilitar botones específicos |