📦 @grafosoft/grafosoft-report-table

Librería de componentes avanzados para visualización y análisis de datos.
Incluye tablas interactivas, pivotes virtualizados y un controlador de vistas dinámico con soporte para futuras gráficas.

Instalación

npm i @grafosoft/grafosoft-report-table

Configuración

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './node_modules/@grafosoft/grafosoft-report-table/dist/**/*.{js,ts,jsx,tsx}',
  ],
}

export default config

🚀 Componentes principales

🧱 TableReport

Componente de tabla avanzada con soporte para:

• 🔍 Búsqueda y ordenamiento
• 📊 Agrupación dinámica de datos
• ➕ Operaciones matemáticas automáticas
• 📤 Exportación (CSV, Excel, etc.)
• ⚙️ Configuración mediante ReportTableConfig

📋 Props principales

| Prop | Tipo | Default | Descripción | | -------------------- | ---------------------------- | ------------------- | -------------------------------- | | columns | Column[] | requerido | Define las columnas de la tabla | | data | CellData[][] | requerido | Datos en formato matriz | | showMathOperations | boolean | true | Habilita operaciones matemáticas | | defaultPageSize | number | 10 | Filas por página | | paginationOptions | number[] | [10, 25, 50, 100] | Opciones de paginación | | config | Partial<ReportTableConfig> | {} | Configuración adicional |

💡 Ejemplo básico

import { TableReport } from '@grafosoft/grafosoft-report-table'

const columns = [
  { id: 'name', label: 'Nombre', type: 'string' },
  { id: 'age', label: 'Edad', type: 'number' },
  { id: 'city', label: 'Ciudad', type: 'string' },
]

const data = [
  ['Juan Pérez', 28, 'Madrid'],
  ['María García', 34, 'Barcelona'],
  ['Carlos López', 25, 'Valencia'],
]

export function App() {
  return <TableReport columns={columns} data={data} />
}

TablePivot

Componente optimizado para grandes volúmenes de datos, con soporte de virtualización (usando @tanstack/react-virtual).

💡 Ejemplo básico

import { TablePivot } from '@grafosoft/grafosoft-report-table'

export function App() {
  return <TablePivot columns={columns} data={data} />
}

ChartReport

Componente optimizado para la generación de gráficas dinamicas listas para exportar.

💡 Ejemplo básico

import { ChartReport } from '@grafosoft/grafosoft-report-table'

export function App() {
  return <ChartReport columns={columns} data={data} />
}

DataViewController

Componente contenedor que permite controlar múltiples vistas (tablas, pivotes, gráficos, etc.) de forma declarativa y manteniendo el estado interno de cada vista.

API — DataViewController

| Prop | Tipo | Default | Descripción | | ------------- | ------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | defaultView | string | Primer hijo | Define el nombre (name) de la vista que estará activa al inicializar el componente. | | children | ReactElement<DataViewProps>[] | — | Lista de vistas declaradas mediante DataViewController.View. Cada vista representa un contenido distinto (tabla, pivote, gráfico, etc.). | | className | string | — | Permite agregar clases adicionales al contenedor principal para personalización de estilos. |

️ API — DataViewController.View

| Prop | Tipo | Default | Descripción | | ---------- | ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------ | | name | string | requerido | Identificador único de la vista. Se usa para alternar entre vistas. | | title | string | name | Texto o tooltip que aparece sobre el botón de la barra de control. | | icon | ReactNode | name | Ícono mostrado en el botón de cambio de vista. Puede ser cualquier elemento JSX (por ejemplo, un ícono de react-icons). | | children | ReactNode | — | Contenido renderizado dentro de la vista. Puede ser un componente como TableReport, TablePivot o un gráfico personalizado. |

import { DataViewController } from '@grafosoft/grafosoft-report-table'
import { TableReport, TablePivot } from '@grafosoft/grafosoft-report-table'

export function App() {
  return (
    <DataViewController defaultView="table">
      <DataViewController.View name="table" title="Tabla clásica">
        <TableReport columns={columns} data={data} />
      </DataViewController.View>

      <DataViewController.View name="pivot" title="Tabla pivote">
        <TablePivot columns={columns} data={data} />
      </DataViewController.View>

      <DataViewController.View name="chart" title="Gráfico">
        <ChartReport columns={columns} data={data} />
      </DataViewController.View>
    </DataViewController>
  )
}