wiki-Table

Ver en Git

---

Table

El componente Table es flexible y admite renderización personalizada de celdas mediante funciones de renderizado definidas en las columnas. También soporta diferentes estilos y opciones para ocultar el encabezado de la tabla.

Referencia de la API

Props de Table

Propiedad	Tipo	Descripción	Valor por defecto
dataSource	DataPropsWRender[] | DataPropsWORender[]	Datos para llenar las filas de la tabla.	[]
columns	ColumnPropsWRender[] | ColumnPropsWORender[]	Definición de las columnas, incluyendo títulos y funciones de renderizado opcionales.	[]
className	string	Clase CSS personalizada para el componente tabla.	undefined
hiddenTableHead	boolean	Si es true, oculta el encabezado de la tabla.	false
styled	'basic' | 'highlighted'	Estilo visual de la tabla.	'basic'

Props de Columnas

Propiedad	Tipo	Descripción	Valor por defecto
key	string	Clave única de la columna.	Requerido
className	string	Clase CSS personalizada para las celdas de la columna.	undefined
title	string | ReactNode	Título de la columna, se muestra en el encabezado.	undefined
render	(data?: any, row?: DataProps, index?: number) => ReactNode	Función para renderizar contenido personalizado en las celdas.	undefined

Props de Filas y Celdas

Propiedad	Tipo	Descripción	Valor por defecto
data	DataPropsWRender | DataPropsWORender	Datos asociados a la fila.	Requerido
columns	ColumnPropsWRender[] | ColumnPropsWORender[]	Configuración de las columnas que definen el contenido de la fila.	Requerido
index	number	Índice de la fila.	Requerido
children	ReactNode	Contenido de la celda.	undefined
className	string	Clase CSS personalizada para la celda.	undefined

Ejemplo de uso

import { Table } from '@auravant/ui-kit';

const columns = [
 {
 key: 'name',
 title: 'Nombre',
 className: 'name-column',
 },
 {
 key: 'age',
 title: 'Edad',
 render: (data) => <strong>{data} años</strong>,
 },
];

const dataSource = [
 { name: 'John Doe', age: 28 },
 { name: 'JP', age: 39 },
];

<Table columns={columns} dataSource={dataSource} styled="highlighted" />;

Notas

• Las columnas pueden incluir una función render para personalizar el contenido de las celdas.
• El componente soporta dos estilos visuales (basic y highlighted) que pueden extenderse según las necesidades.