@datosgeo-atdt/geo-ui 0.11.2 → 0.11.3

package/README.md

@@ -761,6 +761,7 @@ function App() {
 | `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
 
@@ -863,6 +864,83 @@ function App() {
 }
 ```
 
+#### 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:

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"}