npm - contentoh-components-library - Versions diffs - 21.5.35 → 21.5.36 - Mend

contentoh-components-library 21.5.35 → 21.5.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (989) hide show

package/src/components/organisms/Table/Table.stories.js CHANGED Viewed

@@ -1,609 +1,609 @@
-import Table from "./index";
-export default {
-  title: "Components/organisms/Table",
-  component: Table,
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          width: "1000px",
-          height: "50px",
-          margin: "1em",
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-const Template = (args) => <Table {...args} />;
-export const TableDefault = Template.bind({});
-TableDefault.args = {
-  columns: [
-    {
-      Header: "ID",
-      accessor: "id",
-      width: "100px",
-      fixedToLeft: 0,
-    },
-    {
-      Header: "Nombre",
-      accessor: "name",
-      width: "100px",
-      fixedToLeft: 100,
-    },
-    {
-      Header: "Edad",
-      accessor: "age",
-      width: "100px",
-      fixedToLeft: 200,
-    },
-    {
-      Header: "Correo Electrónico",
-      accessor: "email",
-      width: "500px",
-    },
-    {
-      Header: "valor1",
-      accessor: "valor1",
-      width: "100px",
-    },
-    {
-      Header: "valor2",
-      accessor: "valor2",
-      width: "100px",
-    },
-    {
-      Header: "valor3",
-      accessor: "valor3",
-      width: "100px",
-    },
-  ],
-  data: [
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 1,
-      name: "Juan",
-      age: 25,
-      email: "juan@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 2,
-      name: "María",
-      age: 30,
-      email: "maria@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    {
-      id: 3,
-      name: "Pedro",
-      age: 28,
-      email: "pedro@example.com",
-      valor1: "valor1",
-      valor2: "valor2",
-      valor3: "valor3",
-    },
-    // Puedes agregar más filas según sea necesario
-  ],
-  withCheckbox: true,
-};
+import Table from "./index";
+export default {
+  title: "Components/organisms/Table",
+  component: Table,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "1000px",
+          height: "50px",
+          margin: "1em",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+const Template = (args) => <Table {...args} />;
+export const TableDefault = Template.bind({});
+TableDefault.args = {
+  columns: [
+    {
+      Header: "ID",
+      accessor: "id",
+      width: "100px",
+      fixedToLeft: 0,
+    },
+    {
+      Header: "Nombre",
+      accessor: "name",
+      width: "100px",
+      fixedToLeft: 100,
+    },
+    {
+      Header: "Edad",
+      accessor: "age",
+      width: "100px",
+      fixedToLeft: 200,
+    },
+    {
+      Header: "Correo Electrónico",
+      accessor: "email",
+      width: "500px",
+    },
+    {
+      Header: "valor1",
+      accessor: "valor1",
+      width: "100px",
+    },
+    {
+      Header: "valor2",
+      accessor: "valor2",
+      width: "100px",
+    },
+    {
+      Header: "valor3",
+      accessor: "valor3",
+      width: "100px",
+    },
+  ],
+  data: [
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 1,
+      name: "Juan",
+      age: 25,
+      email: "juan@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 2,
+      name: "María",
+      age: 30,
+      email: "maria@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    {
+      id: 3,
+      name: "Pedro",
+      age: 28,
+      email: "pedro@example.com",
+      valor1: "valor1",
+      valor2: "valor2",
+      valor3: "valor3",
+    },
+    // Puedes agregar más filas según sea necesario
+  ],
+  withCheckbox: true,
+};