@datosgeo-atdt/geo-ui 0.10.2 → 0.11.0

package/README.md

@@ -6,6 +6,7 @@ Librería de componentes reutilizables en React para aplicaciones geoespaciales.
 
 - **MapaPMTiles**: Componente para renderizar mapas vectoriales usando MapLibre GL y PMTiles
 - **TotalesDisplay**: Componente para mostrar totales y estadísticas con soporte responsive
+- **DataTable**: Componente de tabla flexible con carga automática de CSV
 - **Join CSV**: Unión automática de datos tabulares con geometrías vectoriales
 - **Estilos temáticos**: Soporte para modo booleano y clasificación Jenks
 - **TypeScript**: Completamente tipado para mejor experiencia de desarrollo
@@ -605,6 +606,311 @@ Puedes sobrescribir los estilos usando tu propio CSS:
 
 ---
 
+## DataTable
+
+Componente de tabla genérico y flexible para mostrar datos tabulares con soporte para carga automática de CSV desde la carpeta `public`.
+
+### Características
+
+- **Carga automática de CSV**: Lee archivos CSV desde la carpeta `public` y parsea los datos
+- **Detección automática de columnas**: Extrae los nombres de las columnas directamente del CSV
+- **Columnas personalizables**: Define qué columnas mostrar y su ancho
+- **Tamaño ajustable**: Props `width` y `height` para controlar dimensiones
+- **Formato automático de números**: Formatea números con separadores de miles (estilo mexicano)
+- **Índice opcional**: Puede mostrar numeración de filas
+- **Responsive**: Se adapta automáticamente a móvil
+- **Estados de carga**: Muestra "Cargando datos..." mientras procesa el CSV
+- **Manejo de errores**: Muestra mensajes descriptivos si falla la carga
+- **TypeScript**: Completamente tipado
+
+### Uso Básico
+
+#### Importar el componente
+
+```tsx
+import { DataTable } from '@atdt/geo-ui';
+import '@atdt/geo-ui/style.css';
+```
+
+#### Ejemplo 1: Cargar CSV automáticamente desde public/
+
+Si tienes un archivo `alcaldias.csv` en la carpeta `public/` de tu proyecto:
+
+```csv
+alcaldia,poblacion
+Iztapalapa,1815786
+Gustavo A. Madero,1185772
+Álvaro Obregón,749982
+Tlalpan,677104
+```
+
+Simplemente especifica la ruta del archivo:
+
+```tsx
+import { DataTable } from '@atdt/geo-ui';
+
+function App() {
+  return (
+    <DataTable
+      csvPath="/alcaldias.csv"
+      width="600px"
+      height="400px"
+    />
+  );
+}
+```
+
+**El componente automáticamente:**
+- Carga el CSV desde `public/alcaldias.csv`
+- Detecta los nombres de las columnas (`alcaldia`, `poblacion`)
+- Los usa como headers de la tabla
+- Parsea los datos y los muestra
+- Formatea números con separadores de miles (1,815,786)
+
+#### Ejemplo 2: Personalizar nombres de columnas
+
+Puedes sobrescribir los nombres de las columnas del CSV:
+
+```tsx
+import { DataTable } from '@atdt/geo-ui';
+
+function App() {
+  return (
+    <DataTable
+      csvPath="/alcaldias.csv"
+      columns={[
+        { key: 'alcaldia', label: 'Alcaldía', width: '60%' },
+        { key: 'poblacion', label: 'Población Total', width: '40%' }
+      ]}
+      width="800px"
+      height="500px"
+      showIndex={true}
+      indexLabel="#"
+    />
+  );
+}
+```
+
+#### Ejemplo 3: Datos directos (sin CSV)
+
+También puedes pasar datos directamente sin cargar un CSV:
+
+```tsx
+import { DataTable } from '@atdt/geo-ui';
+
+function App() {
+  const datos = [
+    { nombre: 'Ciudad de México', habitantes: 9209944 },
+    { nombre: 'Guadalajara', habitantes: 1495189 },
+    { nombre: 'Monterrey', habitantes: 1142994 }
+  ];
+
+  return (
+    <DataTable
+      data={datos}
+      columns={[
+        { key: 'nombre', label: 'Ciudad', width: '50%' },
+        { key: 'habitantes', label: 'Habitantes', width: '50%' }
+      ]}
+      width="100%"
+    />
+  );
+}
+```
+
+#### Ejemplo 4: Con índice numérico
+
+```tsx
+<DataTable
+  csvPath="/datos.csv"
+  showIndex={true}
+  indexLabel="#"
+  width="700px"
+/>
+```
+
+#### Ejemplo 5: Tabla responsive
+
+```tsx
+// Se adapta automáticamente a móvil
+<DataTable
+  csvPath="/estadisticas.csv"
+  width="100%"
+  height="auto"
+/>
+```
+
+### Props de DataTable
+
+#### Props de Datos (al menos una opción es requerida)
+
+| Prop | Tipo | Descripción |
+|------|------|-------------|
+| `data` | `Record<string, any>[]` | Array de objetos con los datos a mostrar |
+| `csvPath` | `string` | Ruta del archivo CSV en la carpeta `public` (ej: `/datos.csv`) |
+
+#### Props de Configuración
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `columns` | `DataTableColumn[]` | Auto-detectado | Definición de columnas a mostrar |
+| `width` | `string` | `"100%"` | Ancho de la tabla |
+| `height` | `string` | `"auto"` | Alto de la tabla |
+| `className` | `string` | `""` | Clases CSS adicionales |
+| `showIndex` | `boolean` | `false` | Mostrar columna con índice numérico |
+| `indexLabel` | `string` | `"#"` | Etiqueta para la columna de índice |
+
+#### Tipo DataTableColumn
+
+```tsx
+interface DataTableColumn {
+  key: string;        // Campo del objeto/CSV
+  label: string;      // Texto a mostrar en el header
+  width?: string;     // Ancho de la columna (ej: "40%", "200px")
+}
+```
+
+### Ejemplos Completos
+
+#### Ejemplo con CSV de productos
+
+```tsx
+import { DataTable } from '@atdt/geo-ui';
+
+// public/productos.csv
+// nombre,categoria,precio,stock
+// Laptop Dell,Electrónica,15999,50
+// Mouse Logitech,Accesorios,299,150
+// Monitor Samsung,Electrónica,4599,30
+
+function App() {
+  return (
+    <DataTable
+      csvPath="/productos.csv"
+      columns={[
+        { key: 'nombre', label: 'Producto', width: '30%' },
+        { key: 'categoria', label: 'Categoría', width: '25%' },
+        { key: 'precio', label: 'Precio', width: '25%' },
+        { key: 'stock', label: 'Stock', width: '20%' }
+      ]}
+      width="900px"
+      height="500px"
+      showIndex={true}
+    />
+  );
+}
+```
+
+#### Ejemplo con datos dinámicos
+
+```tsx
+import { DataTable } from '@atdt/geo-ui';
+import { useState, useEffect } from 'react';
+
+function App() {
+  const [datos, setDatos] = useState([]);
+
+  useEffect(() => {
+    // Cargar datos desde una API
+    fetch('https://api.example.com/estadisticas')
+      .then(res => res.json())
+      .then(data => setDatos(data));
+  }, []);
+
+  return (
+    <DataTable
+      data={datos}
+      columns={[
+        { key: 'region', label: 'Región' },
+        { key: 'total', label: 'Total' }
+      ]}
+    />
+  );
+}
+```
+
+#### Ejemplo integrando con MapaPMTiles
+
+```tsx
+import { MapaPMTiles, DataTable } from '@atdt/geo-ui';
+import '@atdt/geo-ui/style.css';
+
+function App() {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
+      <MapaPMTiles
+        csvPath="/datos_entidades.csv"
+        fitToIds={["09", "15", "14"]}
+        mode="jenks"
+        enablePopup={true}
+      />
+
+      <DataTable
+        csvPath="/datos_entidades.csv"
+        columns={[
+          { key: 'entidad', label: 'Entidad', width: '60%' },
+          { key: 'valor', label: 'Valor', width: '40%' }
+        ]}
+        width="100%"
+        height="600px"
+      />
+    </div>
+  );
+}
+```
+
+### Formato de Números
+
+Los números se formatean automáticamente con separadores de miles usando el formato mexicano:
+
+- `1815786` → `1,815,786`
+- `9209944` → `9,209,944`
+- `150` → `150`
+
+### Estados de Carga
+
+El componente muestra diferentes estados:
+
+1. **Cargando**: "Cargando datos..." mientras lee el CSV
+2. **Error**: Mensaje de error en rojo si falla la carga
+3. **Vacío**: "No hay datos para mostrar" si el CSV está vacío
+4. **Datos**: Tabla renderizada con los datos
+
+### Responsive
+
+El componente se adapta automáticamente a diferentes tamaños de pantalla:
+
+- **Desktop**: Headers y celdas con tamaño `1.11vw`
+- **Mobile** (≤600px):
+  - Headers con tamaño `3.5vw`
+  - Celdas con tamaño `4vw`
+  - Padding ajustado para pantallas pequeñas
+
+### Personalización de Estilos
+
+Puedes sobrescribir los estilos usando la clase `className`:
+
+```tsx
+<DataTable
+  csvPath="/datos.csv"
+  className="mi-tabla-custom"
+/>
+```
+
+```css
+.mi-tabla-custom {
+  border: 2px solid #66827f;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.mi-tabla-custom .tableHeader {
+  background-color: #66827f;
+  color: white;
+}
+```
+
+---
+
 ## Props de MapaPMTiles
 
 ### Props Obligatorias

package/dist/components/DataTable.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface DataTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+}
+export interface DataTableProps {
+    data?: Record<string, any>[];
+    columns?: DataTableColumn[];
+    csvPath?: string;
+    width?: string;
+    height?: string;
+    className?: string;
+    showIndex?: boolean;
+    indexLabel?: string;
+}
+declare const DataTable: React.FC<DataTableProps>;
+export default DataTable;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,eAAe;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqKvC,CAAC;AAEF,eAAe,SAAS,CAAC"}