Table

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

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

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

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

Parametro	Tipo	Requerido	Default	Descripcion
_t	`string`	No		Propiedad de internacionalización.
name	`string`	Sí		Nombre de la tabla.
items	`T[]` (arreglo)	Sí		Arreglo de objetos de datos para mostrar en la tabla.
header	`TableHeader<T>[]` (arreglo)	Sí		Configuración del encabezado de la tabla.
pagination	`PaginationProps` (opcional)	No		Propiedades opcionales de paginación para la tabla.
loader	`boolean`	No	false	Indica 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".
useCheckbox	`boolean`	No	false	Indica si se deben mostrar casillas de verificación en la tabla.
onChecked	`(items: T[]) => void` (función de devolución)	No		Función de devolución de llamada al marcar elementos en la tabla.
onOrderBy	`{ id: keyof T; order: "ASC" \| "DESC" }`	No		Función de devolución de llamada al ordenar la tabla.
onShowHidden	`{ id: keyof T; showHidden: "SHOW" \| "HIDDEN" }`	No		Función de devolución de llamada al mostrar u ocultar columnas en la tabla.
notResult	`ReactNode` (nodo React)	No		Elemento React a mostrar cuando no hay resultados en la tabla.
showPagination	`boolean`	No	true	Indica si se debe mostrar la paginación en la tabla.

Parametro	Tipo	Requerido	Default	Descripcion
id	`keyof T` (clave de T)	Sí		Clave de propiedad en el objeto de datos que corresponde a esta columna de encabezado.
th	`React.ReactNode` (nodo React)	Sí		Etiqueta a mostrar en la columna de encabezado.
parse	`(data: T) => any` (función de transformación)	No		Funció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; }`	No		Opciones 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".
colNewTr	`boolean`	No	false	Indica si la columna debe ocupar el 100% del ancho en una nueva fila.

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

<Table />