import { Meta, StoryObj } from '@storybook/react'; import { Table } from '../Table'; declare const meta: Meta; export default meta; type Story = StoryObj; /** * Tabla básica por defecto */ export declare const AccionesPorDefecto: StoryObj; /** * Alineamiento de contenido (`contentAlign`) en distintas columnas. */ export declare const AlineamientoDeContenido: Story; export declare const Basica: Story; /** * Tabla con borde */ export declare const Bordeada: Story; /** * Tabla con borde exterior (borderable) */ export declare const Borderable: Story; /** * Tabla con paginación */ export declare const Cargando: Story; /** * Tabla con estado vacío */ export declare const ColumnasBloqueadasYRedimensionables: StoryObj; /** * Control externo de la tabla */ export declare const ColumnasRedimensionables: StoryObj; /** * ## Columnas Bloqueadas y Redimensionables * * Demuestra que las columnas bloqueadas (locked) NO pueden ser redimensionadas: * - 🔒 Las columnas bloqueadas no muestran el handle de resize * - 🔓 Las columnas desbloqueadas sí pueden ser redimensionadas * - ⚠️ El bloqueo tiene prioridad sobre el resize */ /** * Columnas bloqueadas y redimensionables */ export declare const Completa: Story; /** * ## Toolbar con nueva API de acciones * * Usa `primaryCustomAction`, `secondaryCustomAction` y `customActions`: * - **primaryCustomAction**: botón principal (primary), se deshabilita sin selección si `requiresSelection` es true. * - **secondaryCustomAction**: botón secundario (secondary). * - **customActions**: array de botones extra, tipados como botón; se renderizan **antes** del secondary. * Orden en pantalla: [ customActions... ] → secondary → primary. */ export declare const ToolbarAccionesNuevaApi: Story; /** * ## Toolbar con contexto de filas seleccionadas * * Todos los callbacks (`primaryCustomAction`, `secondaryCustomAction`, `customActions`) * reciben un objeto `context` con `selectedIds` y `selectedRows`, aunque la acción no dependa * de la selección (`requiresSelection: false`). Así puedes usar las filas seleccionadas en * cualquier botón. En esta historia, "Ver selección" no requiere selección pero al hacer * clic muestra los nombres de las filas seleccionadas. */ export declare const ToolbarContextoSeleccion: Story; /** * Tabla en estado de carga */ export declare const ConCeldasEditables: Story; /** * Edición de columnas con type: 'dropdown' * * Cubre las dos formas de pasar opciones al dropdown al editar: * 1. columnOptions en la columna: opciones fijas en la definición de la columna (ideal para catálogos). * 2. Opciones desde render (CellConfigValue): columna cuyo render devuelve { type: 'dropdown', value, onChange, options }; * la celda se muestra siempre como dropdown y las opciones pueden ser dinámicas por fila. */ export declare const EdicionColumnasDropdown: Story; /** * Escenario OBP Data Editor: columnOptions cargadas de forma asíncrona (API). * * Simula la tabla de Medios fijos donde Material y Tipo de vista son dropdowns * cuyas opciones vienen de GET /api/materiales y GET /api/vistas. Inicialmente * las opciones están vacías; tras un delay (o al pulsar "Cargar opciones") se * actualizan las columnas. La tabla debe mostrar las opciones en el dropdown * cuando se entra en modo edición después de que hayan cargado. */ export declare const DropdownOpcionesAsyncOBP: Story; /** * Prueba real: opciones de dropdown cargadas desde API de test (JSONPlaceholder). * Material → GET /users (nombre de usuario). Tipo de vista → GET /albums (título). */ export declare const DropdownOpcionesApiReal: Story; /** * Callback onEditModeChange - Ejemplo completo */ export declare const ConCallbackEditMode: Story; /** * Callback onSuccessComplete - Un solo evento al cerrar filas editadas */ export declare const ConCallbackSuccessComplete: Story; /** * Tabla con columna `icon` + Lightbox al clic y columna `imagePreview` (vista en `Popup` al hover). */ export declare const ConLightbox: Story; /** * Alineamiento de contenido en celdas */ export declare const ConPaginacion: Story; /** * Tabla con selección múltiple */ export declare const ConSeleccion: Story; /** * Tabla completa con todas las funcionalidades */ export declare const ControlDeFiltros: StoryObj; /** * Tabla con filtro de responsable como lista (selección única) y etiquetas como lista múltiple. */ export declare const FiltroPorListaUnica: Story; /** * Historia para demostrar las diferentes formas de configurar StatusCell */ /** * Ejemplos de celdas de estado */ /** * Ejemplos de celdas de estado */ export declare const ControlExterno: StoryObj; /** * ## Tabla con Datos Reales * * Demuestra la tabla con datos reales de plantillas del sistema, * incluyendo información completa de parámetros, creadores y fechas. */ /** * Tabla con datos reales */ export declare const ControlExternoEdicion: Story; export declare const DatosReales: StoryObj; /** * ## Control de Filtros * * Esta historia demuestra las nuevas props para controlar el comportamiento de los filtros: * - `showFilters`: Mostrar/ocultar el botón de filtros (por defecto: true) * - `internalFilters`: Aplicar filtros internamente o solo emitir evento (por defecto: false) */ /** * Control de filtros */ export declare const Densidad: Story; /** * Tabla con filas expandibles */ export declare const EjemploCompleto: Story; /** * ## Acciones por Defecto * * Demuestra el uso de los 4 iconos de acciones por defecto (edit, delete, view, more). * Solo se muestran las acciones que tienen un handler definido. * También permite agregar acciones personalizadas adicionales. */ /** * Acciones por defecto en tabla */ export declare const EjemplosDeEstado: StoryObj; /** * Configuración completa de tabla - Screenshot/Showcase * Muestra todas las configuraciones posibles de la tabla */ /** * Showcase completo de la tabla */ /** * Showcase completo de la tabla */ export declare const EstadoDeCarga: Story; /** * Tabla con Lightbox integrado */ export declare const EstadoVacio: Story; /** * Tabla con estado vacío de búsqueda */ export declare const EstadoVacioBusqueda: Story; /** * Tabla con filas rayadas */ export declare const EstadosVacios: Story; /** * Estado de carga avanzado */ export declare const ExpandibleConSeleccion: StoryObj; /** * Estados vacíos de la tabla */ export declare const FilasExpandibles: Story; /** * Tabla con celdas editables */ export declare const PersistenciaDeConfiguracion: StoryObj; /** * Historia para demostrar filas expandibles con checkboxes individuales * Basado en el diseño de Figma: cada fila es un registro individual * La selección es INTERNA - no requiere estado externo */ /** * Filas expandibles con selección */ /** * Filas expandibles con selección */ export declare const Rayada: Story; /** * Tabla con densidad compacta */ export declare const Showcase: StoryObj; /** * Catálogo de tipos de celda: **UI → Table → Celdas → 00 Catálogo completo** (`stories/cells/00-CatalogoCompleto.stories.tsx`). */ /** * ## Columnas Redimensionables * * Demo de la funcionalidad de resize de columnas: * - 📏 Arrastra el borde derecho de cualquier columna para cambiar su ancho * - 🎯 Doble click en el borde para auto-ajustar al contenido * - 💾 El ancho se mantiene durante la sesión */ /** * Columnas redimensionables */ /** * ## Headers con Iconos * * Ejemplo de tabla con iconos en los headers de las columnas. * Los iconos se muestran al lado izquierdo del nombre del header y son opcionales. * El cálculo de ancho de las columnas incluye automáticamente el espacio del icono. */ export declare const HeadersConIconos: Story; export declare const HeaderSticky: Story; /** * Demuestra las columnas sticky de checkboxes y acciones. * Las columnas de checkboxes se quedan pegadas a la izquierda y las de acciones a la derecha * cuando se hace scroll horizontal, facilitando la selección y las acciones en tablas anchas. */ export declare const ColumnasStickyCheckboxYAcciones: StoryObj; /** * onRowClick - Click en filas * Demuestra cómo funciona el callback onRowClick y su comportamiento con acciones y filas deshabilitadas. */ export declare const OnRowClick: StoryObj; //# sourceMappingURL=Table.stories.d.ts.map