@datosgeo-atdt/geo-ui 0.11.0 → 0.11.3

package/README.md

@@ -651,11 +651,7 @@ import { DataTable } from '@atdt/geo-ui';
 
 function App() {
   return (
-    <DataTable
-      csvPath="/alcaldias.csv"
-      width="600px"
-      height="400px"
-    />
+    <DataTable csvPath="/alcaldias.csv" />
   );
 }
 ```
@@ -666,6 +662,7 @@ function App() {
 - Los usa como headers de la tabla
 - Parsea los datos y los muestra
 - Formatea números con separadores de miles (1,815,786)
+- Distribuye las columnas equitativamente (50% cada una en este caso)
 
 #### Ejemplo 2: Personalizar nombres de columnas
 
@@ -682,8 +679,6 @@ function App() {
         { key: 'alcaldia', label: 'Alcaldía', width: '60%' },
         { key: 'poblacion', label: 'Población Total', width: '40%' }
       ]}
-      width="800px"
-      height="500px"
       showIndex={true}
       indexLabel="#"
     />
@@ -709,34 +704,41 @@ function App() {
     <DataTable
       data={datos}
       columns={[
-        { key: 'nombre', label: 'Ciudad', width: '50%' },
-        { key: 'habitantes', label: 'Habitantes', width: '50%' }
+        { key: 'nombre', label: 'Ciudad' },
+        { key: 'habitantes', label: 'Habitantes' }
       ]}
-      width="100%"
     />
   );
 }
 ```
 
-#### Ejemplo 4: Con índice numérico
+#### Ejemplo 4: Múltiples columnas con distribución automática
 
 ```tsx
+// Con 4 columnas, cada una ocupa automáticamente 25% del ancho
 <DataTable
-  csvPath="/datos.csv"
+  csvPath="/productos.csv"
+  columns={[
+    { key: 'nombre', label: 'Producto' },
+    { key: 'categoria', label: 'Categoría' },
+    { key: 'precio', label: 'Precio' },
+    { key: 'stock', label: 'Stock' }
+  ]}
   showIndex={true}
-  indexLabel="#"
-  width="700px"
 />
 ```
 
-#### Ejemplo 5: Tabla responsive
+#### Ejemplo 5: Control manual de anchos de columnas
 
 ```tsx
-// Se adapta automáticamente a móvil
+// Especifica anchos personalizados cuando necesites distribución no equitativa
 <DataTable
-  csvPath="/estadisticas.csv"
-  width="100%"
-  height="auto"
+  csvPath="/datos.csv"
+  columns={[
+    { key: 'nombre', label: 'Nombre', width: '50%' },
+    { key: 'valor1', label: 'Valor 1', width: '25%' },
+    { key: 'valor2', label: 'Valor 2', width: '25%' }
+  ]}
 />
 ```
 
@@ -754,11 +756,12 @@ function App() {
 | 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 |
+| `width` | `string` | Controlado por CSS | Ancho del contenedor (por defecto 50% del viewport en desktop, 100% en móvil) |
+| `height` | `string` | Controlado por CSS | Alto del contenedor (por defecto 100% con scroll interno cuando excede 70vh) |
 | `className` | `string` | `""` | Clases CSS adicionales |
 | `showIndex` | `boolean` | `false` | Mostrar columna con índice numérico |
 | `indexLabel` | `string` | `"#"` | Etiqueta para la columna de índice |
+| `onRowClick` | `(row: Record<string, any>, index: number) => void` | `undefined` | Callback que se ejecuta al hacer click en una fila. Recibe los datos de la fila y su índice |
 
 #### Tipo DataTableColumn
 
@@ -831,13 +834,16 @@ function App() {
 
 #### Ejemplo integrando con MapaPMTiles
 
+Layout tipo dashboard con mapa y tabla lado a lado:
+
 ```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' }}>
+    <div style={{ display: 'flex', width: '100%', height: '100vh' }}>
+      {/* Mapa ocupa 50% */}
       <MapaPMTiles
         csvPath="/datos_entidades.csv"
         fitToIds={["09", "15", "14"]}
@@ -845,20 +851,96 @@ function App() {
         enablePopup={true}
       />
 
+      {/* DataTable ocupa 50% automáticamente */}
       <DataTable
         csvPath="/datos_entidades.csv"
         columns={[
-          { key: 'entidad', label: 'Entidad', width: '60%' },
-          { key: 'valor', label: 'Valor', width: '40%' }
+          { key: 'entidad', label: 'Entidad' },
+          { key: 'valor', label: 'Valor' }
         ]}
-        width="100%"
-        height="600px"
       />
     </div>
   );
 }
 ```
 
+#### Ejemplo con interactividad bidireccional (Tabla ↔ Mapa)
+
+Crea interacción entre la tabla y el mapa: click en tabla hace zoom en mapa, click en mapa cambia datos de tabla:
+
+```tsx
+import { MapaPMTiles, DataTable } from '@atdt/geo-ui';
+import { useState } from 'react';
+import '@atdt/geo-ui/style.css';
+
+function App() {
+  const [nivel, setNivel] = useState<'entidad' | 'municipio'>('entidad');
+  const [selectedEnt, setSelectedEnt] = useState<string | null>(null);
+
+  return (
+    <div style={{ display: 'flex', width: '100%', height: '100vh' }}>
+      {/* Mapa con click handler */}
+      <MapaPMTiles
+        csvPath={nivel === 'entidad' ? '/prueba_entidad.csv' : `/cdmx_prueba.csv`}
+        fitToIds={selectedEnt ? [selectedEnt] : undefined}
+        mode="jenks"
+        showMunicipios={nivel === 'municipio'}
+        enablePopup={true}
+      />
+
+      {/* Tabla con click handler */}
+      <DataTable
+        csvPath={nivel === 'entidad' ? '/prueba_entidad.csv' : `/cdmx_prueba.csv`}
+        columns={
+          nivel === 'entidad'
+            ? [
+                { key: 'entidad', label: 'Entidad' },
+                { key: 'total', label: 'Total' }
+              ]
+            : [
+                { key: 'municipio', label: 'Municipio' },
+                { key: 'valor', label: 'Valor' }
+              ]
+        }
+        onRowClick={(row) => {
+          if (nivel === 'entidad') {
+            // Click en tabla de entidades → zoom a esa entidad y muestra municipios
+            setSelectedEnt(row.cvegeo);
+            setNivel('municipio');
+          }
+        }}
+      />
+
+      {/* Botón para regresar */}
+      {nivel === 'municipio' && (
+        <button
+          style={{
+            position: 'absolute',
+            top: 20,
+            left: 20,
+            zIndex: 1000,
+            padding: '10px 20px'
+          }}
+          onClick={() => {
+            setNivel('entidad');
+            setSelectedEnt(null);
+          }}
+        >
+          ← Regresar a entidades
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+**Flujo de interacción:**
+1. **Vista inicial**: Muestra tabla con entidades (`prueba_entidad.csv`)
+2. **Click en fila de tabla**: Cambia a vista de municipios de esa entidad
+3. **Mapa hace zoom**: Automáticamente hacia la entidad seleccionada
+4. **Tabla cambia**: Muestra datos municipales (`cdmx_prueba.csv`)
+5. **Botón "Regresar"**: Vuelve a la vista de entidades
+
 ### Formato de Números
 
 Los números se formatean automáticamente con separadores de miles usando el formato mexicano:
@@ -876,15 +958,23 @@ El componente muestra diferentes estados:
 3. **Vacío**: "No hay datos para mostrar" si el CSV está vacío
 4. **Datos**: Tabla renderizada con los datos
 
-### Responsive
+### Diseño y Layout
+
+El componente está diseñado para integrarse con layouts tipo dashboard:
 
-El componente se adapta automáticamente a diferentes tamaños de pantalla:
+- **Desktop**:
+  - Ocupa **50% del ancho** del contenedor padre por defecto
+  - Centrado vertical y horizontal
+  - Scroll interno cuando el contenido excede **70vh**
+  - Headers y celdas con tamaño `1.11vw`
+  - Columnas se distribuyen automáticamente usando flexbox
 
-- **Desktop**: Headers y celdas con tamaño `1.11vw`
 - **Mobile** (≤600px):
+  - Ocupa **100% del ancho**
   - Headers con tamaño `3.5vw`
   - Celdas con tamaño `4vw`
   - Padding ajustado para pantallas pequeñas
+  - Box shadow más pronunciado
 
 ### Personalización de Estilos
 

package/dist/components/DataTable.d.ts

@@ -13,6 +13,7 @@ export interface DataTableProps {
     className?: string;
     showIndex?: boolean;
     indexLabel?: string;
+    onRowClick?: (row: Record<string, any>, index: number) => void;
 }
 declare const DataTable: React.FC<DataTableProps>;
 export default DataTable;

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

@@ -1 +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"}
+{"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;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuKvC,CAAC;AAEF,eAAe,SAAS,CAAC"}