Table

El componente Table es un componente que muestra una tabla con columnas y filas personalizadas.

Ejemplo

Importacion

Para importar el componente Table, se puede hacer desde fenextjs o fenextjs-component

import { Table, TableProps } from "fenextjs/cjs/component/Table";

o

import { Table, TableProps } from "fenextjs-component/cjs/Table";

Parametros

ParametroTipoRequeridoDefaultDescripcion
_tstringNoPropiedad de internacionalización.
namestringNombre de la tabla.
itemsT[] (arreglo)Arreglo de objetos de datos para mostrar en la tabla.
headerTableHeader<T>[] (arreglo)Configuración del encabezado de la tabla.
paginationPaginationProps (opcional)NoPropiedades opcionales de paginación para la tabla.
loaderbooleanNofalseIndica si se debe mostrar un cargador mientras se cargan los datos de la tabla.
typeLoader"spinner" | "line" (cadena)No"line"Tipo de cargador a mostrar. Puede ser "spinner" o "line".
useCheckboxbooleanNofalseIndica si se deben mostrar casillas de verificación en la tabla.
onChecked(items: T[]) => void (función de devolución)NoFunción de devolución de llamada al marcar elementos en la tabla.
onOrderBy{ id: keyof T; order: "ASC" | "DESC" }NoFunción de devolución de llamada al ordenar la tabla.
onShowHidden{ id: keyof T; showHidden: "SHOW" | "HIDDEN" }NoFunción de devolución de llamada al mostrar u ocultar columnas en la tabla.
notResultReactNode (nodo React)NoElemento React a mostrar cuando no hay resultados en la tabla.
showPaginationbooleanNotrueIndica si se debe mostrar la paginación en la tabla.

TableHeader

ParametroTipoRequeridoDefaultDescripcion
idkeyof T (clave de T)Clave de propiedad en el objeto de datos que corresponde a esta columna de encabezado.
thReact.ReactNode (nodo React)Etiqueta a mostrar en la columna de encabezado.
parse(data: T) => any (función de transformación)NoFunción que se puede utilizar para transformar los datos antes de mostrarlos en la celda de la tabla. Esta función toma el objeto de datos para la fila y devuelve el valor transformado.
columnOptions{ orderBy?: boolean; showHidden?: boolean; }NoOpciones adicionales de la columna para la tabla.
defaultShowHidden"show" | "hidden" (cadena)No"show"Indica si la columna debe mostrarse o estar oculta de forma predeterminada. Puede ser "show" o "hidden".
colNewTrbooleanNofalseIndica si la columna debe ocupar el 100% del ancho en una nueva fila.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

  • Uso básico del componente Table
<Table />