ywana-core8 0.1.85 → 0.1.87
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.
- package/doc/package-lock.json +4 -4
- package/doc/package.json +3 -2
- package/doc/scripts/generate-examples.js +129 -0
- package/doc/src/App.js +6 -186
- package/doc/src/components/ExamplePage.js +57 -32
- package/doc/src/index.js +2 -0
- package/package.json +1 -1
- package/src/html/index.js +23 -1
- package/doc/craco.config.js +0 -31
- package/doc/generate-examples.cjs +0 -310
- package/doc/src/examples/button.example.js +0 -47
- package/doc/src/examples/input.example.js +0 -91
- package/src/html/accordion.example.js.backup +0 -390
- package/src/html/button.example.js.backup +0 -374
- package/src/html/checkbox.example.js.backup +0 -316
- package/src/html/demo-sidebar.html +0 -410
- package/src/html/table2.migration.md +0 -328
- package/src/html/test-resize.html +0 -279
- package/src/html/test-selection.html +0 -387
|
@@ -1,328 +0,0 @@
|
|
|
1
|
-
# DataTable2 - Guía de Migración
|
|
2
|
-
|
|
3
|
-
## 🎯 Resumen
|
|
4
|
-
|
|
5
|
-
DataTable2 es una versión completamente reescrita del componente DataTable original que mantiene **100% compatibilidad** con la API existente mientras agrega características avanzadas de rendimiento, accesibilidad y UX.
|
|
6
|
-
|
|
7
|
-
## ✅ Garantía de Compatibilidad
|
|
8
|
-
|
|
9
|
-
### Props Originales (Sin Cambios)
|
|
10
|
-
```javascript
|
|
11
|
-
// Todas estas props funcionan EXACTAMENTE igual
|
|
12
|
-
const originalProps = {
|
|
13
|
-
columns: [], // ✅ Mismo formato
|
|
14
|
-
rows: [], // ✅ Mismo formato
|
|
15
|
-
onRowSelection: fn, // ✅ Misma firma
|
|
16
|
-
onSort: fn, // ✅ Misma firma
|
|
17
|
-
onCheckAll: fn, // ✅ Misma firma
|
|
18
|
-
editable: boolean, // ✅ Mismo comportamiento
|
|
19
|
-
outlined: boolean, // ✅ Mismo estilo
|
|
20
|
-
expanded: boolean, // ✅ Mismo comportamiento
|
|
21
|
-
className: string, // ✅ Mismas clases CSS
|
|
22
|
-
emptyMessage: string, // ✅ Mismo mensaje
|
|
23
|
-
emptyIcon: string, // ✅ Mismo icono
|
|
24
|
-
multisort: boolean, // ✅ Mismo comportamiento
|
|
25
|
-
filterable: boolean, // ✅ Mismo comportamiento
|
|
26
|
-
onClearFilters: fn // ✅ Misma firma
|
|
27
|
-
}
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### Estructura de Datos (Sin Cambios)
|
|
31
|
-
```javascript
|
|
32
|
-
// Columns - Formato exacto
|
|
33
|
-
const columns = [
|
|
34
|
-
{
|
|
35
|
-
id: 'name',
|
|
36
|
-
label: 'Name',
|
|
37
|
-
type: 'String',
|
|
38
|
-
sortable: true,
|
|
39
|
-
filterable: true,
|
|
40
|
-
editable: true,
|
|
41
|
-
onChange: (rowId, fieldId, value) => {},
|
|
42
|
-
// ... todas las props originales
|
|
43
|
-
}
|
|
44
|
-
]
|
|
45
|
-
|
|
46
|
-
// Rows - Formato exacto
|
|
47
|
-
const rows = [
|
|
48
|
-
{
|
|
49
|
-
id: 1,
|
|
50
|
-
name: 'John Doe',
|
|
51
|
-
selected: false,
|
|
52
|
-
className: 'custom-row',
|
|
53
|
-
checkDisabled: false,
|
|
54
|
-
disabled: false,
|
|
55
|
-
info: () => <div>Info</div>
|
|
56
|
-
// ... todas las props originales
|
|
57
|
-
}
|
|
58
|
-
]
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## 🚀 Migración Paso a Paso
|
|
62
|
-
|
|
63
|
-
### Paso 1: Cambiar Import
|
|
64
|
-
```javascript
|
|
65
|
-
// ANTES
|
|
66
|
-
import { DataTable } from './table'
|
|
67
|
-
|
|
68
|
-
// DESPUÉS
|
|
69
|
-
import { DataTable2 } from './table2'
|
|
70
|
-
// O para alias
|
|
71
|
-
import { DataTable2 as DataTable } from './table2'
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### Paso 2: Cambiar Componente
|
|
75
|
-
```javascript
|
|
76
|
-
// ANTES
|
|
77
|
-
<DataTable
|
|
78
|
-
columns={columns}
|
|
79
|
-
rows={rows}
|
|
80
|
-
onRowSelection={handleSelection}
|
|
81
|
-
editable={true}
|
|
82
|
-
outlined={true}
|
|
83
|
-
multisort={true}
|
|
84
|
-
filterable={true}
|
|
85
|
-
/>
|
|
86
|
-
|
|
87
|
-
// DESPUÉS - EXACTAMENTE IGUAL
|
|
88
|
-
<DataTable2
|
|
89
|
-
columns={columns}
|
|
90
|
-
rows={rows}
|
|
91
|
-
onRowSelection={handleSelection}
|
|
92
|
-
editable={true}
|
|
93
|
-
outlined={true}
|
|
94
|
-
multisort={true}
|
|
95
|
-
filterable={true}
|
|
96
|
-
/>
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
### Paso 3: ¡Listo!
|
|
100
|
-
Tu código funciona exactamente igual + tienes acceso a nuevas características.
|
|
101
|
-
|
|
102
|
-
### Paso 4: Adoptar Nuevas Características (Opcional)
|
|
103
|
-
```javascript
|
|
104
|
-
<DataTable2
|
|
105
|
-
// Props originales (sin cambios)
|
|
106
|
-
columns={columns}
|
|
107
|
-
rows={rows}
|
|
108
|
-
onRowSelection={handleSelection}
|
|
109
|
-
editable={true}
|
|
110
|
-
|
|
111
|
-
// Nuevas características (opcionales)
|
|
112
|
-
searchable={true}
|
|
113
|
-
exportable={true}
|
|
114
|
-
virtualScrolling={true}
|
|
115
|
-
pageSize={100}
|
|
116
|
-
theme="dark"
|
|
117
|
-
density="compact"
|
|
118
|
-
selectionMode="multiple"
|
|
119
|
-
loading={isLoading}
|
|
120
|
-
skeleton={isLoading}
|
|
121
|
-
/>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
## 🆕 Nuevas Características
|
|
125
|
-
|
|
126
|
-
### 🔍 Búsqueda Integrada
|
|
127
|
-
```javascript
|
|
128
|
-
<DataTable2
|
|
129
|
-
searchable={true}
|
|
130
|
-
searchPlaceholder="Search users..."
|
|
131
|
-
onSearch={(term) => console.log('Searching:', term)}
|
|
132
|
-
/>
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
### 📊 Exportación CSV
|
|
136
|
-
```javascript
|
|
137
|
-
<DataTable2
|
|
138
|
-
exportable={true}
|
|
139
|
-
onExport={(rows, columns) => {
|
|
140
|
-
// Custom export logic
|
|
141
|
-
console.log('Exporting', rows.length, 'rows')
|
|
142
|
-
}}
|
|
143
|
-
/>
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
### 📱 Virtual Scrolling
|
|
147
|
-
```javascript
|
|
148
|
-
<DataTable2
|
|
149
|
-
virtualScrolling={true}
|
|
150
|
-
pageSize={50}
|
|
151
|
-
// Perfecto para miles de filas
|
|
152
|
-
/>
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
### 🎨 Temas y Variantes
|
|
156
|
-
```javascript
|
|
157
|
-
<DataTable2
|
|
158
|
-
theme="dark" // default, dark, minimal
|
|
159
|
-
density="compact" // compact, normal, comfortable
|
|
160
|
-
rowHeight="small" // small, medium, large
|
|
161
|
-
striped={true}
|
|
162
|
-
bordered={true}
|
|
163
|
-
hover={true}
|
|
164
|
-
/>
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
### 🎯 Selección Avanzada
|
|
168
|
-
```javascript
|
|
169
|
-
<DataTable2
|
|
170
|
-
selectionMode="multiple" // single, multiple, none
|
|
171
|
-
sortMode="multiple" // single, multiple, none
|
|
172
|
-
showRowNumbers={true}
|
|
173
|
-
showSelectAll={true}
|
|
174
|
-
/>
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
### ⚡ Estados de Carga
|
|
178
|
-
```javascript
|
|
179
|
-
<DataTable2
|
|
180
|
-
loading={isLoading}
|
|
181
|
-
skeleton={isLoading}
|
|
182
|
-
// Muestra estados de carga elegantes
|
|
183
|
-
/>
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
### ♿ Accesibilidad
|
|
187
|
-
```javascript
|
|
188
|
-
<DataTable2
|
|
189
|
-
accessibility={true} // Habilitado por defecto
|
|
190
|
-
// WCAG 2.1 AA compliant
|
|
191
|
-
// Navegación por teclado
|
|
192
|
-
// Screen reader support
|
|
193
|
-
// ARIA attributes
|
|
194
|
-
/>
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
## 🔧 Configuración Avanzada
|
|
198
|
-
|
|
199
|
-
### Callbacks Mejorados
|
|
200
|
-
```javascript
|
|
201
|
-
<DataTable2
|
|
202
|
-
// Callbacks originales (sin cambios)
|
|
203
|
-
onRowSelection={(row, event) => {}}
|
|
204
|
-
onSort={(dragged, dropped) => {}}
|
|
205
|
-
onCheckAll={(ids, checked) => {}}
|
|
206
|
-
|
|
207
|
-
// Nuevos callbacks (opcionales)
|
|
208
|
-
onRowClick={(row, event) => {}}
|
|
209
|
-
onRowDoubleClick={(row, event) => {}}
|
|
210
|
-
onRowContextMenu={(row, event) => {}}
|
|
211
|
-
onCellClick={(row, column, cell, event) => {}}
|
|
212
|
-
onCellDoubleClick={(row, column, cell, event) => {}}
|
|
213
|
-
onCellEdit={(row, column, oldValue, newValue) => {}}
|
|
214
|
-
onSearch={(searchTerm) => {}}
|
|
215
|
-
onExport={(rows, columns) => {}}
|
|
216
|
-
onColumnResize={(columnId, newWidth) => {}}
|
|
217
|
-
onStateChange={(state) => {}}
|
|
218
|
-
/>
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
### Personalización de Clases
|
|
222
|
-
```javascript
|
|
223
|
-
<DataTable2
|
|
224
|
-
className="my-table"
|
|
225
|
-
headerClassName="my-header"
|
|
226
|
-
rowClassName={(row, index) => `row-${row.status}`}
|
|
227
|
-
cellClassName={(row, column, cell) => `cell-${column.type}`}
|
|
228
|
-
/>
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
### Footer Personalizado
|
|
232
|
-
```javascript
|
|
233
|
-
<DataTable2
|
|
234
|
-
footerContent={
|
|
235
|
-
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
236
|
-
<span>Total: {rows.length} items</span>
|
|
237
|
-
<span>Selected: {selectedCount}</span>
|
|
238
|
-
</div>
|
|
239
|
-
}
|
|
240
|
-
/>
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
## 📊 Comparación de Performance
|
|
244
|
-
|
|
245
|
-
| Característica | DataTable Original | DataTable2 |
|
|
246
|
-
|---|---|---|
|
|
247
|
-
| **Filas máximas recomendadas** | ~100 | ~10,000+ |
|
|
248
|
-
| **Tiempo de renderizado inicial** | ~200ms | ~50ms |
|
|
249
|
-
| **Memoria utilizada** | Alta | Optimizada |
|
|
250
|
-
| **Búsqueda en tiempo real** | ❌ | ✅ |
|
|
251
|
-
| **Virtual scrolling** | ❌ | ✅ |
|
|
252
|
-
| **Lazy loading** | ❌ | ✅ |
|
|
253
|
-
| **Optimización React** | Básica | Avanzada |
|
|
254
|
-
|
|
255
|
-
## 🐛 Troubleshooting
|
|
256
|
-
|
|
257
|
-
### Problema: Estilos no se aplican
|
|
258
|
-
```javascript
|
|
259
|
-
// Solución: Importar CSS
|
|
260
|
-
import './table2.css'
|
|
261
|
-
```
|
|
262
|
-
|
|
263
|
-
### Problema: Virtual scrolling no funciona
|
|
264
|
-
```javascript
|
|
265
|
-
// Solución: Especificar pageSize
|
|
266
|
-
<DataTable2
|
|
267
|
-
virtualScrolling={true}
|
|
268
|
-
pageSize={50} // Requerido
|
|
269
|
-
/>
|
|
270
|
-
```
|
|
271
|
-
|
|
272
|
-
### Problema: Búsqueda no encuentra resultados
|
|
273
|
-
```javascript
|
|
274
|
-
// Solución: Verificar que las columnas tengan datos
|
|
275
|
-
const columns = [
|
|
276
|
-
{ id: 'name', label: 'Name' }, // ✅ Correcto
|
|
277
|
-
{ id: 'missing', label: 'Missing' } // ❌ No existe en rows
|
|
278
|
-
]
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
## 🔄 Rollback Plan
|
|
282
|
-
|
|
283
|
-
Si necesitas volver al DataTable original:
|
|
284
|
-
|
|
285
|
-
```javascript
|
|
286
|
-
// Cambiar import
|
|
287
|
-
import { DataTable } from './table'
|
|
288
|
-
|
|
289
|
-
// Cambiar componente
|
|
290
|
-
<DataTable {...props} />
|
|
291
|
-
|
|
292
|
-
// Remover props nuevas
|
|
293
|
-
// searchable, exportable, virtualScrolling, etc.
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
## 📈 Roadmap
|
|
297
|
-
|
|
298
|
-
### v2.1 (Próximo)
|
|
299
|
-
- [ ] Drag & drop de columnas
|
|
300
|
-
- [ ] Filtros avanzados
|
|
301
|
-
- [ ] Agrupación de filas
|
|
302
|
-
- [ ] Totales y agregaciones
|
|
303
|
-
|
|
304
|
-
### v2.2 (Futuro)
|
|
305
|
-
- [ ] Edición de celdas mejorada
|
|
306
|
-
- [ ] Validación inline
|
|
307
|
-
- [ ] Undo/Redo
|
|
308
|
-
- [ ] Exportación Excel
|
|
309
|
-
|
|
310
|
-
## 🤝 Soporte
|
|
311
|
-
|
|
312
|
-
- **Compatibilidad**: 100% garantizada
|
|
313
|
-
- **Breaking changes**: Ninguno
|
|
314
|
-
- **Migración**: Sin riesgo
|
|
315
|
-
- **Performance**: Significativamente mejorada
|
|
316
|
-
- **Mantenimiento**: Activo y continuo
|
|
317
|
-
|
|
318
|
-
## 📝 Conclusión
|
|
319
|
-
|
|
320
|
-
DataTable2 es una evolución natural del DataTable original que:
|
|
321
|
-
|
|
322
|
-
✅ **Mantiene 100% compatibilidad**
|
|
323
|
-
✅ **Mejora significativamente el rendimiento**
|
|
324
|
-
✅ **Agrega características modernas**
|
|
325
|
-
✅ **No requiere cambios en código existente**
|
|
326
|
-
✅ **Permite adopción gradual de nuevas características**
|
|
327
|
-
|
|
328
|
-
**Recomendación**: Migra sin miedo. Tu código funcionará exactamente igual, pero con mejor rendimiento y nuevas capacidades disponibles cuando las necesites.
|
|
@@ -1,279 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="es">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Test - Redimensionamiento de Columnas</title>
|
|
7
|
-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
8
|
-
<link rel="stylesheet" href="./table2.css">
|
|
9
|
-
<style>
|
|
10
|
-
body {
|
|
11
|
-
margin: 0;
|
|
12
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
-
background: #f5f5f5;
|
|
14
|
-
padding: 2rem;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.test-container {
|
|
18
|
-
background: white;
|
|
19
|
-
padding: 2rem;
|
|
20
|
-
border-radius: 8px;
|
|
21
|
-
border: 1px solid #e0e0e0;
|
|
22
|
-
max-width: 1200px;
|
|
23
|
-
margin: 0 auto;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.material-icons {
|
|
27
|
-
font-size: 18px;
|
|
28
|
-
vertical-align: middle;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.instructions {
|
|
32
|
-
background: #e3f2fd;
|
|
33
|
-
padding: 1rem;
|
|
34
|
-
border-radius: 4px;
|
|
35
|
-
margin-bottom: 2rem;
|
|
36
|
-
border-left: 4px solid #2196f3;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.instructions h3 {
|
|
40
|
-
margin: 0 0 0.5rem 0;
|
|
41
|
-
color: #1976d2;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.instructions p {
|
|
45
|
-
margin: 0;
|
|
46
|
-
color: #1565c0;
|
|
47
|
-
}
|
|
48
|
-
</style>
|
|
49
|
-
</head>
|
|
50
|
-
<body>
|
|
51
|
-
<div class="test-container">
|
|
52
|
-
<h1>🔧 Test de Redimensionamiento de Columnas</h1>
|
|
53
|
-
|
|
54
|
-
<div class="instructions">
|
|
55
|
-
<h3>📋 Instrucciones:</h3>
|
|
56
|
-
<p>1. Pasa el cursor sobre el borde derecho de cualquier columna</p>
|
|
57
|
-
<p>2. Verás que el cursor cambia a ↔️ (col-resize)</p>
|
|
58
|
-
<p>3. Haz click y arrastra para redimensionar la columna</p>
|
|
59
|
-
<p>4. Los anchos se guardan automáticamente en localStorage</p>
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
<div class="datatable2 datatable2--medium datatable2--normal datatable2--default">
|
|
63
|
-
<div class="datatable2__table-container">
|
|
64
|
-
<table>
|
|
65
|
-
<thead class="datatable2__header">
|
|
66
|
-
<tr>
|
|
67
|
-
<th class="datatable2__header-cell" style="width: 80px; min-width: 80px; position: relative;">
|
|
68
|
-
<div class="datatable2__header-content">
|
|
69
|
-
<span>ID</span>
|
|
70
|
-
<span class="material-icons">swap_vert</span>
|
|
71
|
-
</div>
|
|
72
|
-
<div class="datatable2__resize-handle" onmousedown="startResize(event, 'id')"></div>
|
|
73
|
-
</th>
|
|
74
|
-
<th class="datatable2__header-cell" style="width: 200px; min-width: 200px; position: relative;">
|
|
75
|
-
<div class="datatable2__header-content">
|
|
76
|
-
<span>Nombre</span>
|
|
77
|
-
<span class="material-icons">swap_vert</span>
|
|
78
|
-
</div>
|
|
79
|
-
<div class="datatable2__resize-handle" onmousedown="startResize(event, 'name')"></div>
|
|
80
|
-
</th>
|
|
81
|
-
<th class="datatable2__header-cell" style="width: 250px; min-width: 250px; position: relative;">
|
|
82
|
-
<div class="datatable2__header-content">
|
|
83
|
-
<span>Email</span>
|
|
84
|
-
<span class="material-icons">swap_vert</span>
|
|
85
|
-
</div>
|
|
86
|
-
<div class="datatable2__resize-handle" onmousedown="startResize(event, 'email')"></div>
|
|
87
|
-
</th>
|
|
88
|
-
<th class="datatable2__header-cell" style="width: 100px; min-width: 100px; position: relative;">
|
|
89
|
-
<div class="datatable2__header-content">
|
|
90
|
-
<span>Edad</span>
|
|
91
|
-
<span class="material-icons">swap_vert</span>
|
|
92
|
-
</div>
|
|
93
|
-
<div class="datatable2__resize-handle" onmousedown="startResize(event, 'age')"></div>
|
|
94
|
-
</th>
|
|
95
|
-
<th class="datatable2__header-cell" style="width: 120px; min-width: 120px; position: relative;">
|
|
96
|
-
<div class="datatable2__header-content">
|
|
97
|
-
<span>Estado</span>
|
|
98
|
-
<span class="material-icons">swap_vert</span>
|
|
99
|
-
</div>
|
|
100
|
-
<div class="datatable2__resize-handle" onmousedown="startResize(event, 'status')"></div>
|
|
101
|
-
</th>
|
|
102
|
-
</tr>
|
|
103
|
-
</thead>
|
|
104
|
-
<tbody>
|
|
105
|
-
<tr class="datatable2__row">
|
|
106
|
-
<td class="datatable2__cell">1</td>
|
|
107
|
-
<td class="datatable2__cell">Juan Pérez</td>
|
|
108
|
-
<td class="datatable2__cell">juan.perez@email.com</td>
|
|
109
|
-
<td class="datatable2__cell">30</td>
|
|
110
|
-
<td class="datatable2__cell">Activo</td>
|
|
111
|
-
</tr>
|
|
112
|
-
<tr class="datatable2__row">
|
|
113
|
-
<td class="datatable2__cell">2</td>
|
|
114
|
-
<td class="datatable2__cell">María García</td>
|
|
115
|
-
<td class="datatable2__cell">maria.garcia@email.com</td>
|
|
116
|
-
<td class="datatable2__cell">25</td>
|
|
117
|
-
<td class="datatable2__cell">Pendiente</td>
|
|
118
|
-
</tr>
|
|
119
|
-
<tr class="datatable2__row">
|
|
120
|
-
<td class="datatable2__cell">3</td>
|
|
121
|
-
<td class="datatable2__cell">Carlos López</td>
|
|
122
|
-
<td class="datatable2__cell">carlos.lopez@email.com</td>
|
|
123
|
-
<td class="datatable2__cell">35</td>
|
|
124
|
-
<td class="datatable2__cell">Inactivo</td>
|
|
125
|
-
</tr>
|
|
126
|
-
<tr class="datatable2__row">
|
|
127
|
-
<td class="datatable2__cell">4</td>
|
|
128
|
-
<td class="datatable2__cell">Ana Martínez</td>
|
|
129
|
-
<td class="datatable2__cell">ana.martinez@email.com</td>
|
|
130
|
-
<td class="datatable2__cell">28</td>
|
|
131
|
-
<td class="datatable2__cell">Activo</td>
|
|
132
|
-
</tr>
|
|
133
|
-
<tr class="datatable2__row">
|
|
134
|
-
<td class="datatable2__cell">5</td>
|
|
135
|
-
<td class="datatable2__cell">Roberto Silva</td>
|
|
136
|
-
<td class="datatable2__cell">roberto.silva@email.com</td>
|
|
137
|
-
<td class="datatable2__cell">42</td>
|
|
138
|
-
<td class="datatable2__cell">Activo</td>
|
|
139
|
-
</tr>
|
|
140
|
-
</tbody>
|
|
141
|
-
</table>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
|
|
145
|
-
<div style="margin-top: 2rem; padding: 1rem; background: #f8f9fa; border-radius: 4px;">
|
|
146
|
-
<h4>📊 Anchos Actuales:</h4>
|
|
147
|
-
<div id="widths-display">
|
|
148
|
-
<p>ID: <span id="width-id">80px</span></p>
|
|
149
|
-
<p>Nombre: <span id="width-name">200px</span></p>
|
|
150
|
-
<p>Email: <span id="width-email">250px</span></p>
|
|
151
|
-
<p>Edad: <span id="width-age">100px</span></p>
|
|
152
|
-
<p>Estado: <span id="width-status">120px</span></p>
|
|
153
|
-
</div>
|
|
154
|
-
<button onclick="resetWidths()" style="margin-top: 1rem; padding: 0.5rem 1rem; background: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer;">
|
|
155
|
-
🔄 Resetear Anchos
|
|
156
|
-
</button>
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
|
|
160
|
-
<script>
|
|
161
|
-
let isResizing = false;
|
|
162
|
-
let currentColumn = null;
|
|
163
|
-
let startX = 0;
|
|
164
|
-
let startWidth = 0;
|
|
165
|
-
|
|
166
|
-
function startResize(event, columnId) {
|
|
167
|
-
event.preventDefault();
|
|
168
|
-
event.stopPropagation();
|
|
169
|
-
|
|
170
|
-
isResizing = true;
|
|
171
|
-
currentColumn = columnId;
|
|
172
|
-
startX = event.clientX;
|
|
173
|
-
|
|
174
|
-
const th = event.target.parentElement;
|
|
175
|
-
startWidth = th.offsetWidth;
|
|
176
|
-
|
|
177
|
-
document.body.classList.add('datatable2-resizing');
|
|
178
|
-
document.addEventListener('mousemove', handleMouseMove);
|
|
179
|
-
document.addEventListener('mouseup', handleMouseUp);
|
|
180
|
-
|
|
181
|
-
console.log('Started resizing column:', columnId, 'from width:', startWidth);
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
function handleMouseMove(event) {
|
|
185
|
-
if (!isResizing) return;
|
|
186
|
-
|
|
187
|
-
const diff = event.clientX - startX;
|
|
188
|
-
const newWidth = Math.max(50, startWidth + diff);
|
|
189
|
-
|
|
190
|
-
// Update the column width
|
|
191
|
-
const th = document.querySelector(`th:nth-child(${getColumnIndex(currentColumn)})`);
|
|
192
|
-
if (th) {
|
|
193
|
-
th.style.width = newWidth + 'px';
|
|
194
|
-
th.style.minWidth = newWidth + 'px';
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
// Update display
|
|
198
|
-
const widthDisplay = document.getElementById(`width-${currentColumn}`);
|
|
199
|
-
if (widthDisplay) {
|
|
200
|
-
widthDisplay.textContent = newWidth + 'px';
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
// Save to localStorage
|
|
204
|
-
saveColumnWidth(currentColumn, newWidth);
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
function handleMouseUp() {
|
|
208
|
-
if (!isResizing) return;
|
|
209
|
-
|
|
210
|
-
isResizing = false;
|
|
211
|
-
currentColumn = null;
|
|
212
|
-
|
|
213
|
-
document.body.classList.remove('datatable2-resizing');
|
|
214
|
-
document.removeEventListener('mousemove', handleMouseMove);
|
|
215
|
-
document.removeEventListener('mouseup', handleMouseUp);
|
|
216
|
-
|
|
217
|
-
console.log('Finished resizing');
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
function getColumnIndex(columnId) {
|
|
221
|
-
const columns = ['id', 'name', 'email', 'age', 'status'];
|
|
222
|
-
return columns.indexOf(columnId) + 1;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
function saveColumnWidth(columnId, width) {
|
|
226
|
-
const storageKey = 'datatable2-widths-test';
|
|
227
|
-
let widths = {};
|
|
228
|
-
|
|
229
|
-
try {
|
|
230
|
-
const saved = localStorage.getItem(storageKey);
|
|
231
|
-
if (saved) {
|
|
232
|
-
widths = JSON.parse(saved);
|
|
233
|
-
}
|
|
234
|
-
} catch (e) {
|
|
235
|
-
console.error('Error loading widths from localStorage:', e);
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
widths[columnId] = width;
|
|
239
|
-
localStorage.setItem(storageKey, JSON.stringify(widths));
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
function loadColumnWidths() {
|
|
243
|
-
const storageKey = 'datatable2-widths-test';
|
|
244
|
-
|
|
245
|
-
try {
|
|
246
|
-
const saved = localStorage.getItem(storageKey);
|
|
247
|
-
if (saved) {
|
|
248
|
-
const widths = JSON.parse(saved);
|
|
249
|
-
|
|
250
|
-
Object.keys(widths).forEach(columnId => {
|
|
251
|
-
const width = widths[columnId];
|
|
252
|
-
const th = document.querySelector(`th:nth-child(${getColumnIndex(columnId)})`);
|
|
253
|
-
if (th) {
|
|
254
|
-
th.style.width = width + 'px';
|
|
255
|
-
th.style.minWidth = width + 'px';
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
const widthDisplay = document.getElementById(`width-${columnId}`);
|
|
259
|
-
if (widthDisplay) {
|
|
260
|
-
widthDisplay.textContent = width + 'px';
|
|
261
|
-
}
|
|
262
|
-
});
|
|
263
|
-
}
|
|
264
|
-
} catch (e) {
|
|
265
|
-
console.error('Error loading widths from localStorage:', e);
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
function resetWidths() {
|
|
270
|
-
const storageKey = 'datatable2-widths-test';
|
|
271
|
-
localStorage.removeItem(storageKey);
|
|
272
|
-
location.reload();
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
// Load saved widths on page load
|
|
276
|
-
document.addEventListener('DOMContentLoaded', loadColumnWidths);
|
|
277
|
-
</script>
|
|
278
|
-
</body>
|
|
279
|
-
</html>
|