contentoh-components-library 21.5.3 → 21.5.5

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

@@ -0,0 +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,
+};

package/src/components/organisms/Table/index.js

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { CheckBox } from "../../atoms/CheckBox";
+import { Container, TH, TD } from "./styles";
+import { Tooltip } from "../../atoms/Tooltip";
+
+export const Table = ({ columns, data, withCheckbox, withTooltip=false }) => {
+  const [rowsChecked, setRowsChecked] = useState([]);
+
+  function handlerSelectAll(evt) {
+    if (evt.target.checked) {
+      setRowsChecked(data.map(({ id }) => id));
+    } else {
+      setRowsChecked([]);
+    }
+  }
+
+  function handlerSelect(evt, id) {
+    if (evt.target.checked) {
+      setRowsChecked((prev) => (prev.includes(id) ? prev : [...prev, id]));
+    } else {
+      setRowsChecked((prev) => prev.filter((f) => f !== id));
+    }
+  }
+
+  return (
+    <Container withCheckbox>
+      <table className="custom-table">
+        <thead>
+          <tr>
+            {withCheckbox ? (
+              <CheckBox
+                id={-1}
+                className="checkbox_fixed"
+                checked={rowsChecked.length === data.length}
+                onChange={handlerSelectAll}
+              />
+            ) : null}
+            {columns.map((column, i) => (
+              <TH
+                key={`${column.accessor}${i}`}
+                withCheckbox={withCheckbox}
+                {...column}
+              >
+              {column.description && withTooltip ? (
+                  <Tooltip
+                    componentTooltip={<span>{column.description}</span>}
+                    position="topCenter"
+                  >
+                    <span>{column.Header}</span>
+                  </Tooltip>
+                ) : (
+                  <span>{column.Header}</span>
+                )}
+              </TH>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row) => (
+            <tr key={row.id}>
+              {withCheckbox ? (
+                <CheckBox
+                  id={row.id}
+                  className="checkbox_fixed"
+                  checked={rowsChecked.includes(row.id)}
+                  onChange={(e) => handlerSelect(e, row.id)}
+                />
+              ) : null}
+              {columns.map((column, i) => (
+                <TD
+                  key={`${column.accessor}${i}`}
+                  withCheckbox={withCheckbox}
+                  {...column}
+                >
+                  {row[column.accessor]}
+                </TD>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Container>
+  );
+};