@soyfri/shared-library 2.0.0-beta.2 → 2.0.0-beta.21

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,853 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React, { useState, useEffect } from 'react' // Añadido useEffect para historias con selección
+import { Table } from './Table'
+import { Column } from '../Column/Column'
+import { Box, Chip, Avatar, Rating, Typography, Link, Button } from '@mui/material'
+import { usuarios, productos, empleados } from './data' // Mantener las importaciones de datos existentes
+import {
+  ActionsColumnCode,
+  BasicTableCode,
+  ComplexComponentsCode,
+  EmployeeDetailedStatusCode,
+  EmployeeTableCode,
+  EmptyTableCode,
+  ProductTableCode,
+  ProductTableWithZeroStockHighlightedCode,
+  SingleRowCode,
+  TableWithExportCode,
+  UserTableSortedByAgeCode,
+  WithExportAndSelectionCode,
+  WithExternalPaginationControlCode,
+  WithRowSelectionCode,
+} from './Table.definition'
+
+// -----------------------------------------------------------------------------
+// Definición de las historias de Storybook
+// -----------------------------------------------------------------------------
+
+// Define un tipo de datos de ejemplo para las nuevas historias (distinto de 'Usuario' de data.ts si es necesario)
+interface UserData {
+  id: number;
+  name: string;
+  age: number;
+  city: string;
+  email: string;
+}
+
+// Datos de ejemplo para las nuevas historias
+const sampleData: UserData[] = [
+  { id: 1, name: 'Alice Smith', age: 28, city: 'New York', email: 'alice@example.com' },
+  { id: 2, name: 'Bob Johnson', age: 34, city: 'London', email: 'bob@example.com' },
+  { id: 3, name: 'Charlie Brown', age: 22, city: 'Paris', email: 'charlie@example.com' },
+  { id: 4, name: 'Diana Prince', age: 40, city: 'Themyscira', email: 'diana@example.com' },
+  { id: 5, name: 'Eve Adams', age: 19, city: 'Berlin', email: 'eve@example.com' },
+  { id: 6, name: 'Frank White', age: 55, city: 'Tokyo', email: 'frank@example.com' },
+  { id: 7, name: 'Grace Lee', age: 31, city: 'Seoul', email: 'grace@example.com' },
+  { id: 8, name: 'Henry Ford', age: 60, city: 'Detroit', email: 'henry@example.com' },
+  { id: 9, name: 'Ivy Green', age: 25, city: 'Rome', email: 'ivy@example.com' },
+  { id: 10, name: 'Jack Black', age: 45, city: 'Los Angeles', email: 'jack@example.com' },
+  { id: 11, name: 'Karen Millen', age: 33, city: 'Madrid', email: 'karen@example.com' },
+  { id: 12, name: 'Leo Messi', age: 37, city: 'Miami', email: 'leo@example.com' },
+];
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Componente de tabla flexible y tipado que permite definir columnas de forma declarativa con paginación interna o externa.'
+      }
+
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    data: { control: 'object', description: 'Array de objetos de datos a mostrar en la tabla. Las columnas heredarán el tipo definido del arreglo de datos.' },
+    children: { control: false, description: 'Componentes `Column` que definen la estructura de las columnas. Las columnas definen requieren las propiedades: `name` que es el nombre que se verá en la columna y `field` que son los atributos a los cuales se podran acceder desde el scope interno de la columna. Si el atributo `field` tiene un arreglo vacio, se utilizará el objeto completo (todos los campos del objeto).' },
+    currentPage: { control: 'number', description: 'Número de página actual (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
+    pageSize: { control: 'number', description: 'Número de elementos por página (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
+    totalPages: { control: 'number', description: 'Número total de páginas (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
+    previousPage: { control: 'number', description: 'Página anterior (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
+    nextPage: { control: 'number', description: 'Página siguiente (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
+    pageSizeSelectorValue: { control: 'number', description: 'Valor por defecto para el selector de tamaño de página cuando la paginación es interna.' },
+    onPageChange: { action: 'page changed', description: 'Callback para manejar el cambio de página (activa paginación controlada).' },
+    onPageSizeChange: { action: 'page size changed', description: 'Callback para manejar el cambio de tamaño de página (activa paginación controlada).', if: { arg: 'onPageChange', exists: true } },
+    enableCSVExport: { control: 'boolean', description: 'Habilita o deshabilita la funcionalidad de exportación a CSV.', defaultValue: false },
+    csvExportFileName: { control: 'text', description: 'Nombre del archivo CSV al exportar.', defaultValue: 'data.csv', if: { arg: 'enableCSVExport', eq: true } },
+    enableExcelExport: { control: 'boolean', description: 'Habilita o deshabilita la funcionalidad de exportación a Excel.', defaultValue: false },
+    excelExportFileName: { control: 'text', description: 'Nombre del archivo Excel al exportar.', defaultValue: 'data.xlsx', if: { arg: 'enableExcelExport', eq: true } },
+    csvExportButtonText: { control: 'text', description: 'Texto del botón de exportar.', defaultValue: 'Exportar CSV', if: { arg: 'enableCSVExport', eq: true } },
+    excelExportButtonText: { control: 'text', description: 'Texto del botón de exportar.', defaultValue: 'Exportar Excel', if: { arg: 'enableExcelExport', eq: true } },
+    csvExportColumns: { control: 'text', description: 'Array de nombres de columnas a exportar. Si no se especifica, se exportan todas.', if: { arg: 'enableCSVExport', eq: true } },
+    // NUEVOS argTypes para selección de filas
+    enableRowSelection: { control: 'boolean', description: 'Habilita o deshabilita la selección de filas con checkboxes.', defaultValue: false },
+    rowIdentifier: { control: 'text', description: 'La clave única en el objeto de datos utilizada como identificador para las filas seleccionables (ej. "id").', if: { arg: 'enableRowSelection', eq: true } },
+    onSelectionChange: { action: 'selectionChanged', description: 'Callback que se dispara cuando cambia la selección de filas. Devuelve un array con los objetos seleccionados.', if: { arg: 'enableRowSelection', eq: true } },
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// --- Historias para el componente Table ---
+
+export const BasicTable: Story = {
+  args: {
+    data: usuarios,
+  },
+  render: ({ data }) => (
+    <Table data={data} pageSizeSelectorValue={1} pageSize={1}>
+      <Column name="Nombre" field="nombre">
+        {({ nombre }) => <Typography>{nombre}</Typography>}
+      </Column>
+      <Column name="Email" field="email">
+        {({ email }) => <Typography color="text.secondary">{email}</Typography>}
+      </Column>
+      <Column width='10%' name="Edad" field="edad">
+        {({ edad }) => <Typography>{edad} años</Typography>}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla básica con datos simples y columnas de texto. La paginación es interna por defecto.'
+      },
+      source: {
+        code: BasicTableCode.trim()
+      }
+
+    }
+  }
+};
+
+export const ComplexComponents: Story = {
+  args: {
+    data: usuarios.slice(0, 4),
+  },
+  render: ({ data }) => (
+    <Table data={data}>
+      <Column name="Usuario" field={['avatar', 'nombre']}>
+        {({ avatar, nombre }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Avatar src={avatar} alt={nombre} sx={{ width: 40, height: 40 }} />
+            <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+          </Box>
+        )}
+      </Column>
+      <Column name="Estado" field="activo">
+        {({ activo }) => (
+          <Chip
+            label={activo ? 'Activo' : 'Inactivo'}
+            color={activo ? 'success' : 'default'}
+            size="small"
+          />
+        )}
+      </Column>
+      <Column name="Rol" field="rol">
+        {({ rol }) => (
+          <Chip
+            label={rol!.charAt(0).toUpperCase() + rol!.slice(1)}
+            color={rol === 'admin' ? 'primary' : rol === 'moderador' ? 'secondary' : 'default'}
+            variant="outlined"
+            size="small"
+          />
+        )}
+      </Column>
+      <Column name="Puntuación" field="puntuacion">
+        {({ puntuacion }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Rating value={puntuacion} max={5} precision={0.1} size="small" readOnly />
+            <Typography variant="caption" color="text.secondary">
+              {puntuacion}
+            </Typography>
+          </Box>
+        )}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con componentes complejos como avatars, chips y ratings. La paginación es interna por defecto.'
+      },
+      source: {
+        code: ComplexComponentsCode.trim()
+      }
+    }
+  }
+};
+
+export const WithExternalPaginationControl: Story = {
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(2);
+    const totalItems = usuarios.length;
+    const totalPages = Math.ceil(totalItems / pageSize);
+
+    const startIndex = (currentPage - 1) * pageSize;
+    const currentData = usuarios.slice(startIndex, startIndex + pageSize);
+
+    const previousPageNum = currentPage > 1 ? currentPage - 1 : 1;
+    const nextPageNum = currentPage < totalPages ? currentPage + 1 : totalPages;
+
+    return (
+      <Table
+        data={currentData}
+        currentPage={currentPage}
+        pageSize={pageSize}
+        totalPages={totalPages}
+        previousPage={previousPageNum}
+        nextPage={nextPageNum}
+        onPageChange={setCurrentPage}
+        onPageSizeChange={setPageSize}
+      >
+        <Column name="Nombre" field="nombre">
+          {({ nombre }) => <Typography variant="body2" fontWeight="medium">{nombre}</Typography>}
+        </Column>
+        <Column name="Email" field="email">
+          {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
+        </Column>
+        <Column name="Estado" field="activo">
+          {({ activo }) => (
+            <Chip
+              label={activo ? 'Activo' : 'Inactivo'}
+              color={activo ? 'success' : 'default'}
+              size="small"
+            />
+          )}
+        </Column>
+        <Column name="Fecha de Registro" field="fechaRegistro">
+          {({ fechaRegistro }) => (
+            <Typography variant="body2">
+              {new Date(fechaRegistro!).toLocaleDateString('es-ES')}
+            </Typography>
+          )}
+        </Column>
+      </Table>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con paginación controlada externamente. El componente `Table` no gestiona el estado de la paginación, solo la UI.'
+      },
+      source: {
+        code: WithExternalPaginationControlCode.trim()
+
+      }
+    }
+  }
+};
+
+export const ProductTable: Story = {
+  args: {
+    data: productos,
+    pageSizeSelectorValue: 1,
+  },
+  render: ({ data, pageSizeSelectorValue }) => (
+    <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
+      <Column name="Producto" field={['imagen', 'nombre']}>
+        {({ imagen, nombre }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Box
+              component="img"
+              src={imagen}
+              alt={nombre}
+              sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}
+            />
+            <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+          </Box>
+        )}
+      </Column>
+      <Column name="Precio" field={['precio', 'enOferta']}>
+        {({ precio, enOferta }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Typography
+              variant="body2"
+              color={enOferta ? 'error.main' : 'text.primary'}
+              fontWeight={enOferta ? 'bold' : 'normal'}
+            >
+              ${precio!.toLocaleString()}
+            </Typography>
+            {enOferta && (
+              <Chip label="OFERTA" color="error" size="small" />
+            )}
+          </Box>
+        )}
+      </Column>
+      <Column name="Stock" field="stock">
+        {({ stock }) => (
+          <Chip
+            label={stock! > 0 ? `${stock} unidades` : 'Sin stock'}
+            color={stock! > 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}
+            size="small"
+          />
+        )}
+      </Column>
+      <Column name="Categoría" field="categoria">
+        {({ categoria }) => (
+          <Typography variant="body2">{categoria}</Typography>
+        )}
+      </Column>
+      <Column name="Rating" field="rating">
+        {({ rating }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
+            <Typography variant="caption">({rating})</Typography>
+          </Box>
+        )}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla de productos con imágenes, precios, stock y calificaciones. Paginación interna.'
+      },
+      source: {
+        code: ProductTableCode.trim()
+      }
+    }
+  }
+};
+
+export const EmployeeTable: Story = {
+  args: {
+    data: empleados,
+    pageSizeSelectorValue: 1,
+  },
+  render: ({ data, pageSizeSelectorValue }) => (
+    <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
+      <Column name="Empleado" field={['avatar', 'nombre', 'apellido']}>
+        {({ avatar, nombre, apellido }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Avatar src={avatar} sx={{ width: 40, height: 40 }}>
+              {avatar ? '' : `${nombre!.charAt(0)}${apellido!.charAt(0)}`}
+            </Avatar>
+            <Typography variant="body2" fontWeight="medium">
+              {nombre} {apellido}
+            </Typography>
+          </Box>
+        )}
+      </Column>
+      <Column name="Departamento" field="departamento">
+        {({ departamento }) => (
+          <Chip
+            label={departamento}
+            color="info"
+            variant="filled"
+            size="small"
+          />
+        )}
+      </Column>
+      <Column name="Salario" field="salario">
+        {({ salario }) => (
+          <Typography variant="body2" fontWeight="bold" color="success.dark">
+            ${salario!.toLocaleString('es-ES')}
+          </Typography>
+        )}
+      </Column>
+      <Column name="Estado" field={['activo', 'fechaIngreso']}>
+        {({ activo, fechaIngreso }) => (
+          <Box>
+            <Chip
+              label={activo ? 'Contratado' : 'Inactivo'}
+              color={activo ? 'success' : 'error'}
+              size="small"
+            />
+            <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
+              Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
+            </Typography>
+          </Box>
+        )}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla de empleados con múltiples campos combinados en una sola columna. Paginación interna.'
+      },
+      source: {
+        code: EmployeeTableCode.trim()
+      }
+    }
+  }
+};
+
+export const EmptyTable: Story = {
+  args: {
+    data: [],
+  },
+  render: ({ data }) => (
+    <Table 
+      data={data}
+      emptyTitle="No se encontraron registros"
+      emptyMessage="Intente ajustar sus filtros o agregar nuevos datos."
+      // emptyImageSrc={<img src="path/to/empty/image.png" alt="No data" />}
+      >
+      <Column name="Nombre" field="nombre">
+        {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
+      </Column>
+      <Column name="Email" field="email">
+        {({ email }) => <Typography variant="body2">{email}</Typography>}
+      </Column>
+      <Column name="Estado" field="activo">
+        {({ activo }) => <Chip label={activo ? 'Activo' : 'Inactivo'} size="small" />}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla sin datos para mostrar el estado vacío y el mensaje correspondiente.'
+      },
+      source: {
+        code: EmptyTableCode.trim()
+      }
+    }
+  }
+};
+
+export const SingleRow: Story = {
+  args: {
+    data: [usuarios[0]],
+  },
+  render: ({ data }) => (
+    <Table data={data}>
+      <Column name="Usuario" field={['avatar', 'nombre', 'email']}>
+        {({ avatar, nombre, email }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Avatar src={avatar} alt={nombre} />
+            <Box>
+              <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+              <Typography variant="caption" color="text.secondary">{email}</Typography>
+            </Box>
+          </Box>
+        )}
+      </Column>
+      <Column<Usuario> name="Información" field={[]}>
+        {(user) => (
+          <>
+            <Typography variant="body2">{user.edad} años</Typography>
+            <Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
+              <Chip label={user.rol} size="small" color="primary" variant="outlined" />
+              <Chip
+                label={user.activo ? 'Activo' : 'Inactivo'}
+                size="small"
+                color={user.activo ? 'success' : 'default'}
+              />
+            </Box>
+          </>
+        )}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con una sola fila de datos.'
+      },
+      source: {
+        code: SingleRowCode.trim()
+      }
+    }
+  }
+};
+
+export const ProductTableWithZeroStockHighlighted: Story = {
+  args: {
+    data: productos,
+  },
+  render: ({ data }) => (
+    <Table data={data}>
+      <Column name="Producto" field={['imagen', 'nombre']}>
+        {({ imagen, nombre }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Box
+              component="img"
+              src={imagen}
+              alt={nombre}
+              sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}
+            />
+            <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+          </Box>
+        )}
+      </Column>
+      <Column name="Precio" field={['precio', 'enOferta']}>
+        {({ precio, enOferta }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Typography
+              variant="body2"
+              color={enOferta ? 'error.main' : 'text.primary'}
+              fontWeight={enOferta ? 'bold' : 'normal'}
+            >
+              ${precio!.toLocaleString()}
+            </Typography>
+            {enOferta && (
+              <Chip label="OFERTA" color="error" size="small" />
+            )}
+          </Box>
+        )}
+      </Column>
+      <Column name="Stock" field="stock">
+        {({ stock }) => (
+          <Chip
+            label={stock! > 0 ? `${stock} unidades` : 'Sin stock'}
+            color={stock! > 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}
+            size="small"
+            sx={{ backgroundColor: stock === 0 ? 'rgba(255, 0, 0, 0.1)' : undefined }}
+          />
+        )}
+      </Column>
+      <Column name="Rating" field="rating">
+        {({ rating }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
+            <Typography variant="caption">({rating})</Typography>
+          </Box>
+        )}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra la tabla de productos resaltando visualmente los productos sin stock. Paginación interna.'
+      },
+      source: {
+        code: ProductTableWithZeroStockHighlightedCode.trim()
+      }
+    }
+  }
+};
+
+
+export const EmployeeDetailedStatus: Story = {
+  args: {
+    data: empleados,
+  },
+  render: ({ data }) => (
+    <Table data={data}>
+      <Column name="Empleado" field={['nombre', 'apellido', 'avatar']}>
+        {({ nombre, apellido, avatar }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Avatar src={avatar} sx={{ width: 40, height: 40 }}>
+              {avatar ? '' : `${nombre!.charAt(0)}${apellido!.charAt(0)}`}
+            </Avatar>
+            <Typography variant="body2" fontWeight="medium">
+              {nombre} {apellido}
+            </Typography>
+          </Box>
+        )}
+      </Column>
+      <Column name="Departamento" field="departamento">
+        {({ departamento }) => (
+          <Chip
+            label={departamento}
+            color="info"
+            variant="filled"
+            size="small"
+          />
+        )}
+      </Column>
+      <Column name="Salario" field="salario">
+        {({ salario }) => (
+          <Typography variant="body2" fontWeight="bold" color="success.dark">
+            ${salario!.toLocaleString('es-ES')}
+          </Typography>
+        )}
+      </Column>
+      <Column name="Estado de Contratación" field={['activo', 'fechaIngreso']}>
+        {({ activo, fechaIngreso }) => (
+          <Box>
+            <Chip
+              label={activo ? 'Contratado' : 'Inactivo'}
+              color={activo ? 'success' : 'error'}
+              size="small"
+            />
+            <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
+              Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
+            </Typography>
+          </Box>
+        )}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra una tabla de empleados con un resumen detallado de su estado de contratación y fecha de ingreso. Paginación interna.'
+      },
+      source: {
+        code: EmployeeDetailedStatusCode.trim()
+      }
+    }
+  }
+};
+
+export const ActionsColumn: Story = {
+  args: {
+    data: usuarios.slice(0, 3),
+  },
+  render: ({ data }) => (
+    <Table data={data}>
+      <Column name="Nombre" field="nombre">
+        {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
+      </Column>
+      <Column name="Email" field="email">
+        {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
+      </Column>
+      <Column name="Acciones" field="id">
+        {({ id }) => (
+          <Button
+            variant="contained"
+            color="primary"
+            size="small"
+            onClick={() => alert('ID del usuario: ' + id)}
+          >
+            Ver Detalles ({id})
+          </Button>
+        )}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo de tabla con una columna de acciones que, al hacer clic en un botón, registra el ID del elemento en la consola.'
+      },
+      source: {
+        code: ActionsColumnCode.trim()
+      }
+    }
+  }
+};
+
+export const TableWithExport: Story = {
+  args: {
+    data: usuarios,
+    enableCSVExport: true,
+    enableExcelExport: true,
+    csvExportFileName: 'usuarios_data',
+    csvExportButtonText: '.csv',
+    excelExportFileName: 'usuarios_data',
+    excelExportButtonText: '.xlsx',
+    csvExportColumns: ['ID', 'Nombre', 'Email', 'Edad'],
+    excelExportColumns: ['ID', 'Nombre', 'Email', 'Edad'],
+  },
+  render: ({ data, enableCSVExport, enableExcelExport, csvExportFileName, csvExportButtonText, excelExportFileName, excelExportButtonText, csvExportColumns, excelExportColumns }) => (
+    <Table<Usuario>
+      data={usuarios}
+      enableCSVExport={enableCSVExport}
+      enableExcelExport={enableExcelExport}
+      csvExportFileName={csvExportFileName}
+      csvExportButtonText={csvExportButtonText}
+      excelExportFileName={excelExportFileName}
+      excelExportButtonText={excelExportButtonText}
+      csvExportColumns={csvExportColumns}
+      excelExportColumns={excelExportColumns}
+    >
+      <Column<Usuario> name="ID" field="id">
+        {(row) => <Typography>{row.id}</Typography>}
+      </Column>
+      <Column<Usuario> name="Nombre" field="nombre">
+        {(row) => <Typography>{row.nombre}</Typography>}
+      </Column>
+      <Column<Usuario> name="Email" field="email">
+        {({ email }) => <Link href={`mailto:${email}`}>{email}</Link>}
+      </Column>
+      <Column<Usuario> name="Edad" field="edad">
+        {(row) => <Typography>{row.edad}</Typography>}
+      </Column>
+      <Column<Usuario> name="Rol" field="rol">
+        {({ rol }) => <Chip label={rol} size="small" />}
+      </Column>
+      <Column<Usuario> name="Acciones" field="id">
+        {({ id }) => (
+          <Button variant="outlined" size="small" onClick={() => alert(`Ver detalles de usuario ${id}`)}>
+            Ver
+          </Button>
+        )}
+      </Column>
+    </Table>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con la funcionalidad de exportar sus datos a un archivo CSV. Puedes especificar qué columnas incluir en la exportación y el nombre del archivo.'
+      },
+      source: {
+        code: TableWithExportCode.trim()
+      }
+    }
+  }
+};
+
+
+export const WithRowSelection: Story = {
+  render: (args) => {
+    const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
+
+    const handleSelectionChange = (items: UserData[]) => {
+      setSelectedItems(items);
+      args.onSelectionChange?.(items);
+    };
+
+    const handleBulkDelete = () => {
+      if (selectedItems.length > 0) {
+        alert(`Eliminando ${selectedItems.length} usuarios: ${selectedItems.map(item => item.name).join(', ')}`);
+        setSelectedItems([]);
+      } else {
+        alert('No hay elementos seleccionados para eliminar.');
+      }
+    };
+
+    const handleBulkUpdateCity = () => {
+      if (selectedItems.length > 0) {
+        const newCity = prompt('Ingresa la nueva ciudad para los seleccionados:');
+        if (newCity) {
+          alert(`Actualizando ciudad de ${selectedItems.length} usuarios a ${newCity}`);
+          setSelectedItems([]);
+        }
+      } else {
+        alert('No hay elementos seleccionados para actualizar.');
+      }
+    };
+
+    return (
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Tabla con Selección de Filas
+        </Typography>
+        {selectedItems.length > 0 && (
+          <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>
+            <Button variant="contained" color="error" onClick={handleBulkDelete}>
+              Eliminar ({selectedItems.length})
+            </Button>
+            <Button variant="contained" color="primary" onClick={handleBulkUpdateCity}>
+              Actualizar Ciudad ({selectedItems.length})
+            </Button>
+            <Typography variant="body2" sx={{ alignSelf: 'center', ml: 2 }}>
+              Elementos seleccionados: {selectedItems.length}
+            </Typography>
+          </Box>
+        )}
+        <Table<UserData>
+          {...args}
+          data={sampleData} // Usamos sampleData para esta historia
+          enableRowSelection={true}
+          rowIdentifier="id" // Es crucial que coincida con una clave única en tus datos
+          onSelectionChange={handleSelectionChange}
+          pageSizeSelectorValue={5}
+        >
+          <Column<UserData>
+            name="ID"
+            field="id"
+            children={(row) => <Typography>{row.id}</Typography>}
+          />
+          <Column<UserData>
+            name="Nombre"
+            field="name"
+            children={(row) => <Typography>{row.name}</Typography>}
+          />
+          <Column<UserData>
+            name="Email"
+            field="email"
+            children={(row) => <Typography>{row.email}</Typography>}
+          />
+          <Column<UserData>
+            name="Ciudad"
+            field="city"
+            children={(row) => <Typography>{row.city}</Typography>}
+          />
+        </Table>
+      </Box>
+    );
+  },
+  args: {
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con la funcionalidad de selección de filas. Puedes seleccionar una o muchas filas y realizar acciones en masa.'
+      },
+      source: {
+        code: WithRowSelectionCode.trim()
+      }
+    }
+  },
+};
+
+export const WithExportAndSelection: Story = {
+  render: (args) => {
+    const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
+
+    const handleSelectionChange = (items: UserData[]) => {
+      setSelectedItems(items);
+      args.onSelectionChange?.(items);
+    };
+
+    return (
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Tabla con Exportación y Selección de Filas
+        </Typography>
+        {selectedItems.length > 0 && (
+          <Box sx={{ mb: 2 }}>
+            <Typography variant="body2">
+              Elementos seleccionados: {selectedItems.length}
+            </Typography>
+          </Box>
+        )}
+        <Table<UserData>
+          {...args}
+          data={sampleData} // Usamos sampleData para esta historia
+          enableRowSelection={true}
+          rowIdentifier="id"
+          onSelectionChange={handleSelectionChange}
+          pageSizeSelectorValue={5}
+          enableCSVExport={true}
+          csvExportFileName="users_data_with_selection"
+          enableExcelExport={true}
+          excelExportFileName="users_data_with_selection"
+        >
+          <Column<UserData>
+            name="ID"
+            field="id"
+            children={(row) => <Typography>{row.id}</Typography>}
+          />
+          <Column<UserData>
+            name="Nombre"
+            field="name"
+            children={(row) => <Typography>{row.name}</Typography>}
+          />
+          <Column<UserData>
+            name="Email"
+            field="email"
+            children={(row) => <Typography>{row.email}</Typography>}
+          />
+          <Column<UserData>
+            name="Ciudad"
+            field="city"
+            children={(row) => <Typography>{row.city}</Typography>}
+          />
+        </Table>
+      </Box>
+    );
+  },
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con la funcionalidad de exportar sus datos a un archivo CSV y Excel. Puedes especificar qué columnas incluir en la exportación y el nombre del archivo.'
+      },
+      source: {
+        code: WithExportAndSelectionCode.trim()
+      }
+    }
+  }
+};