react-pivottable-plus 1.0.18 → 1.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +110 -16
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  [![NPM Version](https://img.shields.io/npm/v/react-pivottable-plus.svg)](https://www.npmjs.com/package/react-pivottable-plus)
4
4
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
- [![React 19](https://img.shields.io/badge/React-19-blue.svg)](https://react.dev/)
5
+ [![React 18+](https://img.shields.io/badge/React-%3E%3D18-blue.svg)](https://react.dev/)
6
6
 
7
7
  **La solución definitiva de Tablas Dinámicas para el ecosistema moderno de React.**
8
8
 
@@ -18,26 +18,25 @@
18
18
 
19
19
  A diferencia de otros forks estancados, `react-pivottable-plus` ofrece:
20
20
 
21
- - **Soporte React 19**: Construido sobre los estándares más recientes.
21
+ - **Soporte React 18+**: Compatible con React 18 y React 19.
22
22
  - **UI de Próxima Generación**: Renderizadores modernos integrados.
23
23
  - **Paginación Inteligente**: Rendimiento fluido con grandes conjuntos de datos.
24
+ - **SSR Ready**: Compatible con Next.js App Router y Pages Router.
24
25
  - **Configuración Cero**: Implementación en segundos con valores por defecto robustos.
25
26
 
26
27
  ## 📦 Instalación
27
28
 
28
29
  ```bash
29
- npm install --save react-pivottable-plus react react-dom
30
+ npm install react-pivottable-plus
30
31
  ```
31
32
 
32
- ## 🛠️ Uso Básico (Zero Config)
33
+ > **Nota:** `react` y `react-dom` versión `>=18.0.0` son peerDependencies. Deben estar ya instaladas en tu proyecto.
33
34
 
34
- Gracias a las últimas optimizaciones, implementar la tabla dinámica es más sencillo que nunca. La mayoría de las propiedades ya tienen valores por defecto inteligentes.
35
+ ## 🛠️ Uso Básico (React / Vite / CRA)
35
36
 
36
37
  ```jsx
37
- "use client";
38
-
39
38
  import React, { useState } from 'react';
40
- import PivotTableUI from 'react-pivottable-plus'; // Importación directa
39
+ import PivotTableUI from 'react-pivottable-plus';
41
40
  import 'react-pivottable-plus/pivottable.css';
42
41
 
43
42
  const data = [
@@ -46,9 +45,8 @@ const data = [
46
45
  ];
47
46
 
48
47
  function App() {
49
- // Solo necesitas gestionar el estado si quieres persistir la configuración
50
48
  const [state, setState] = useState({});
51
-
49
+
52
50
  return (
53
51
  <PivotTableUI
54
52
  data={data}
@@ -59,22 +57,116 @@ function App() {
59
57
  }
60
58
  ```
61
59
 
62
- ## 🌈 Uso de Renderizadores Modernos
60
+ ## ⚡ Uso con Next.js
61
+
62
+ Esta librería es compatible con Next.js tanto con **App Router** (React Server Components) como con **Pages Router**. Debido a que utiliza hooks de React y acceso al DOM, el componente **debe ejecutarse en el cliente**.
63
+
64
+ ### App Router (recomendado — Next.js 13+)
65
+
66
+ Crea un componente cliente dedicado para encapsular el pivot table:
67
+
68
+ ```jsx
69
+ // components/PivotWrapper.jsx
70
+ "use client";
71
+
72
+ import React, { useState } from 'react';
73
+ import PivotTableUI from 'react-pivottable-plus';
74
+ import 'react-pivottable-plus/pivottable.css';
75
+
76
+ export default function PivotWrapper({ data }) {
77
+ const [state, setState] = useState({});
63
78
 
64
- La librería incluye renderizadores premium listos para usar. No necesitas configurarlos manualmente, solo indica el nombre si ya los has incluido en el objeto `renderers`, o pásalos directamente:
79
+ return (
80
+ <PivotTableUI
81
+ data={data}
82
+ onChange={s => setState(s)}
83
+ {...state}
84
+ />
85
+ );
86
+ }
87
+ ```
88
+
89
+ Luego úsalo en cualquier Server Component o página:
65
90
 
66
91
  ```jsx
92
+ // app/page.jsx (Server Component — sin "use client")
93
+ import PivotWrapper from '@/components/PivotWrapper';
94
+
95
+ const data = [
96
+ { producto: "Laptop", ventas: 1500 },
97
+ { producto: "Monitor", ventas: 300 },
98
+ ];
99
+
100
+ export default function Page() {
101
+ return <PivotWrapper data={data} />;
102
+ }
103
+ ```
104
+
105
+ ### Pages Router (Next.js 12 y anteriores)
106
+
107
+ ```jsx
108
+ // pages/dashboard.jsx
109
+ import dynamic from 'next/dynamic';
110
+ import 'react-pivottable-plus/pivottable.css';
111
+
112
+ // Importación dinámica para evitar errores de SSR
113
+ const PivotTableUI = dynamic(
114
+ () => import('react-pivottable-plus'),
115
+ { ssr: false }
116
+ );
117
+
118
+ export default function Dashboard() {
119
+ const [state, setState] = React.useState({});
120
+ const data = [
121
+ { producto: "Laptop", ventas: 1500 },
122
+ ];
123
+
124
+ return (
125
+ <PivotTableUI
126
+ data={data}
127
+ onChange={s => setState(s)}
128
+ {...state}
129
+ />
130
+ );
131
+ }
132
+ ```
133
+
134
+ ### Solución a errores comunes en Next.js
135
+
136
+ | Error | Causa | Solución |
137
+ | :--- | :--- | :--- |
138
+ | `ReferenceError: window is not defined` | El componente se renderizó en el servidor | Usar `"use client"` o importación dinámica con `ssr: false` |
139
+ | `Module not found: Can't resolve '...'` | Módulo ESM no transpilado | Agregar a `transpilePackages` en `next.config.js` |
140
+ | `Hydration failed` | Estado diferente entre servidor y cliente | Usar `"use client"` en el componente que contiene el pivot |
141
+
142
+ Si ves errores de módulos no encontrados, agrega esto a tu `next.config.js`:
143
+
144
+ ```js
145
+ // next.config.js
146
+ const nextConfig = {
147
+ transpilePackages: ['react-pivottable-plus'],
148
+ };
149
+
150
+ module.exports = nextConfig;
151
+ ```
152
+
153
+ ## 🌈 Uso de Renderizadores Modernos
154
+
155
+ ```jsx
156
+ "use client"; // Requerido en Next.js App Router
157
+
158
+ import PivotTableUI from 'react-pivottable-plus';
67
159
  import { TailwindUI } from 'react-pivottable-plus/renderers/TailwindUI';
160
+ import 'react-pivottable-plus/pivottable.css';
68
161
 
69
- // En tu componente:
70
162
  <PivotTableUI
71
163
  data={data}
72
- renderers={{ Table: TailwindUI }} // Sobrescribe el renderizador por defecto
164
+ renderers={{ Table: TailwindUI }}
73
165
  {...state}
74
166
  />
75
167
  ```
76
168
 
77
- ## 📑 Propiedades Principales (Todas Opcionales)
169
+ ## 📑 Propiedades Principales (Todas Opcionales excepto `data`)
78
170
 
79
171
  | Propiedad | Tipo | Por Defecto | Descripción |
80
172
  | :--- | :--- | :--- | :--- |
@@ -86,10 +178,12 @@ import { TailwindUI } from 'react-pivottable-plus/renderers/TailwindUI';
86
178
  | `rendererName` | String | `"Table"` | Nombre del renderizador inicial. |
87
179
  | `pagination` | Boolean | `false` | Activa el pie de página con paginación. |
88
180
  | `pageSize` | Number | `20` | Cantidad de registros por página. |
181
+ | `columnResizing` | Boolean | `false` | Permite redimensionar columnas arrastrando. |
182
+ | `size` | String | `"lg"` | Tamaño de la UI: `"sm"`, `"md"` o `"lg"`. |
89
183
 
90
184
  ---
91
185
 
92
186
  Este proyecto es un fork mantenido de `react-pivottable` con el objetivo de proporcionar una experiencia de usuario superior y compatibilidad con las últimas versiones de React.
93
187
 
94
188
  ## ✍️ Créditos y Autoría
95
- Esta versión moderna y extendida (`react-pivottable-plus`) ha sido desarrollada y mantenida por **Jasp402**, quien ha liderado la implementación de las nuevas interfaces (Tailwind, Shadcn, Radix), la actualización a React 19 y la optimización del motor de arrastre y filtrado.
189
+ Esta versión moderna y extendida (`react-pivottable-plus`) ha sido desarrollada y mantenida por **Jasp402**, quien ha liderado la implementación de las nuevas interfaces (Tailwind, Shadcn, Radix), la actualización a React 18/19 y la optimización del motor de arrastre y filtrado.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-pivottable-plus",
3
- "version": "1.0.18",
3
+ "version": "1.0.20",
4
4
  "description": "A React-based pivot table with grouping and modern UI (Tailwind, Radix, Shadcn)",
5
5
  "main": "dist/PivotTableUI.js",
6
6
  "module": "dist/PivotTableUI.js",
@@ -78,8 +78,6 @@
78
78
  "class-variance-authority": "^0.7.1",
79
79
  "clsx": "^2.1.1",
80
80
  "lucide-react": "^0.575.0",
81
- "nextra": "^3.3.1",
82
- "nextra-theme-docs": "^3.3.1",
83
81
  "prop-types": "^15.8.1",
84
82
  "react-draggable": "^4.4.6",
85
83
  "react-sortablejs": "^6.1.4",
@@ -99,6 +97,8 @@
99
97
  "@vitejs/plugin-react": "^5.1.4",
100
98
  "autoprefixer": "^10.4.18",
101
99
  "babel-loader": "^9.1.3",
100
+ "nextra": "^3.3.1",
101
+ "nextra-theme-docs": "^3.3.1",
102
102
  "postcss": "^8.4.35",
103
103
  "prettier": "^3.2.5",
104
104
  "react": "^19.0.0",