Tabla de datos
Esta es una tabla de datos construida con componentes de UI shadcn y tabla TanStack .
- Tabla de tostilla
- Shadcn-ui
La tabla se ha construido siguiendo el excelente tutorial y ejemplos encontrados en la documentación de Shadcn, y extendido.
Configuración
El proyecto se basa en React-Vite y usa TypeScript .
- Instale React Vite y siga las instrucciones Crear el proyecto:
$ npx shadcn-ui@latest add dropdown-menu
$ npx shadcn-ui@latest add button
Datos
La tabla muestra una lista ficticia de empleados.
Los datos son simplemente datos falsos en una matriz en el proyecto en sí, en lugar de obtener una base de datos real.
Características
Estas son características de la tabla:
BARRA DE HERRAMIENTAS:
- Campo de búsqueda: búsqueda dinámica por nombre.
- Filtros facetados: filtrado por valores de columna ( ubicación , estado ); Los valores se enumeran dinámicamente en función de los valores de la columna.
- Filtro de etiquetas para mostrar filtros activos y borrar filtros - botón.
- Visibilidad de la columna: un botón para elegir qué columnas son visibles.
- Restablecer: borra todos los filtros y selecciones.
MESA:
- Clasificación: las columnas seleccionadas se pueden ordenar ascendiendo o descendiendo.
- Seleccionar la fila: la casilla de verificación de la primera columna selecciona la fila.
- Desenpente de acciones adicionales: cada fila muestra acciones adicionales al final de la fila. Solo el primero es actualmente funcional, y copia la identificación del empleado al portapapeles y muestra un mensaje de tostada.
- Reorden de columna: la última fila presenta flechas que mueven las columnas derecha o izquierda.
PIE DE PÁGINA:
- Información sobre filas seleccionadas : muestra cuántas filas se han seleccionado.
- Botón de filas dinámicas por página : el uso puede aumentar o disminuir las filas por página por pasos de 5.
- Botones de paginación : avanzar, hacia atrás, para durar o la primera página.
Visibilidad de la columna: 
Desplegable de filtro facetado:
Etiquetas de filtro y botón Borrar:
Más acciones:
Pie de página:
Estructura ?
La mesa está compuesta por 3 partes principales:
- Componente de página que obtiene datos y representa el componente de la tabla.
- Componente de tabla.
- Variable de columnas que contiene la estructura y el estilo del contenido de columna individual.
Componentes reutilizables:
- La paginación está en componente y se puede reutilizar para otras tablas.
- Los filtros facetados requieren un código largo y se separa en su propio componente. Se puede reutilizar para otras tablas.
- Little Pop-Up Toast es su propio componente reutilizable.
¿Siguientes pasos?
➡️ Abrazo el componente de la tabla en uno reutilizable y divídalo en componentes más pequeños.
➡️ Introduzca el contexto para evitar pasar los datos de la tabla como prop.> Más fácil de manejar los métodos de manipulación de datos, ya que pueden ocurrir en diferentes componentes.
Técnico
- Reaccionar
- Shadcn ui
- Tabla de tostilla
- Reaccionar iconos
- Viento de cola
- Mecanografiado
