kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/dataTable/DataTable.view.tsx

@@ -1,71 +1,105 @@
-import { useMemo } from "react";
-import { DataTable } from "./DataTable";
-import { dataTableActionsInterface } from "./dataTable.interface";
-
-export const DataTableView = () => {
-  const dataTableColumns = useMemo(() => {
-    return [
-      { id: "id", label: "ID", minWidth: 50, type: "number" },
-      {
-        id: "name",
-        label: "Name",
-        minWidth: 100,
-        editable: true,
-        enterToNextColumn: true,
-        type: "text",
-      },
-      {
-        id: "age",
-        label: "Age",
-        minWidth: 50,
-        editable: true,
-        enterToNextColumn: true,
-        type: "number",
-      },
-    ];
-  }, []);
-  const data = useMemo(() => {
-    return [
-      { id: 1, name: "John Doe", age: 28 },
-      { id: 2, name: "Jane Smith", age: 34 },
-      { id: 3, name: "Alice Johnson", age: 45 },
-    ];
-  }, []);
-  const actions: dataTableActionsInterface<{
-    id: number;
-    name: string;
-    age: number;
-  }>[] = useMemo(() => {
-    return [
-      {
-        id: "edit",
-        label: "Edit",
-        type: "button",
-        onClick: (row: any) => {
-          console.log("Edit action clicked for row:", row);
-        },
-      },
-      {
-        id: "delete",
-        label: "Delete",
-        type: "button",
-        onClick: (row: any) => {
-          console.log("Delete action clicked for row:", row);
-        },
-      },
-    ];
-  }, []);
-  return (
-    <DataTable
-      data={data}
-      actions={actions}
-      columns={dataTableColumns}
-      id="datatable-example"
-      name={"DataTable"}
-      mobileCardView
-      onSelectionChange={(selectedRows) => {
-        console.log("Selected Rows: ", selectedRows);
-      }}
-    />
-  );
-};
+import { useMemo, useState } from "react";
+import { DataTable } from "./DataTable";
+import { dataTableActionsInterface, DataTableColumnsInterface } from "./dataTable.interface";
+import { DataTableFilterState } from "./dataTable.utils";
+import { TypeInputEnum } from "../form/form.enum";
+
+export const DataTableView = () => {
+  const [rows, setRows] = useState([
+    { id: 1, name: "John Doe", age: 28 },
+    { id: 2, name: "Jane Smith", age: 34 },
+    { id: 3, name: "Alice Johnson", age: 45 },
+  ]);
+  const [filters, setFilters] = useState<DataTableFilterState>({});
+  const [rowClick, setRowClick] = useState("");
+  const dataTableColumns = useMemo(() => {
+    return [
+      { id: "id", label: "ID", minWidth: 50, type: "number" },
+      {
+        id: "name",
+        label: "Name",
+        minWidth: 100,
+        editable: true,
+        enterToNextColumn: true,
+        type: "text",
+        onEdit: (value: string, row: typeof rows[number]) =>
+          setRows((previous) => previous.map((item) => item.id === row.id ? { ...item, name: value } : item)),
+      },
+      {
+        id: "age",
+        label: "Age",
+        minWidth: 50,
+        editable: true,
+        enterToNextColumn: true,
+        type: "number",
+        onEdit: (value: string, row: typeof rows[number]) =>
+          setRows((previous) => previous.map((item) => item.id === row.id ? { ...item, age: Number(value) } : item)),
+      },
+    ];
+  }, []);
+  const hubColumns = useMemo<DataTableColumnsInterface<typeof rows[number]>[]>(() => [
+    { id: "name", label: "Dossier", type: "text", width: 200, sticky: true,
+      sortable: true, filterable: true, filterType: TypeInputEnum.TEXT,
+      renderComponent: (value) => <strong>{value}</strong> },
+    { id: "details", label: "Informations", type: "text", children: [
+      { id: "age", label: "Valeur", type: "number", width: 150, editable: true,
+        onEditTrigger: "enter", onDisable: (row) => row.id === 2,
+        onEdit: (value, row) => setRows((previous) => previous.map((item) => item.id === row.id ? { ...item, age: Number(value) } : item)) },
+      { id: "id", label: "Identifiant", type: "number", width: 100,
+        filterable: true, filterType: TypeInputEnum.CHECKBOX,
+        filterDataEnum: [{ value: "1", label: "Premier" }, { value: "2", label: "Second" }] },
+    ] },
+  ], []);
+  const actions: dataTableActionsInterface<{
+    id: number;
+    name: string;
+    age: number;
+  }>[] = useMemo(() => {
+    return [
+      {
+        id: "edit",
+        label: "Edit",
+        type: "button",
+        onClick: (row: any) => {
+          console.log("Edit action clicked for row:", row);
+        },
+      },
+      {
+        id: "delete",
+        label: "Delete",
+        type: "button",
+        onClick: (row: any) => {
+          console.log("Delete action clicked for row:", row);
+        },
+      },
+    ];
+  }, []);
+  return (
+    <div className="d-flex flex-column" style={{ gap: "2rem" }}>
+    <DataTable
+      data={rows}
+      actions={actions}
+      columns={dataTableColumns}
+      id="datatable-example"
+      name="Kelt : edition directe et cartes mobiles"
+      mobileCardView
+      onSelectionChange={(selectedRows) => {
+        console.log("Selected Rows: ", selectedRows);
+      }}
+    />
+    <DataTable
+      id="datatable-hub-example"
+      name="Hub : colonnes groupees, filtres et validation par Entree"
+      data={rows.filter((row) => (!filters.name || row.name.toLowerCase().includes(String(filters.name).toLowerCase())) &&
+        (!filters.id || String(filters.id).split(",").includes(String(row.id))))}
+      columns={hubColumns}
+      getRowId={(row) => row.id}
+      onFiltersChange={setFilters}
+      onRowClick={(row) => setRowClick(row.name)}
+      actions={[{ id: "view", label: "Consulter", type: "icon", classIcon: "bi-eye", width: 48, onClick: (row) => setRowClick(`Action : ${row.name}`) }]}
+    />
+    <output aria-label="Etat des filtres">{JSON.stringify(filters)}</output>
+    <output aria-label="Derniere interaction">{rowClick}</output>
+    </div>
+  );
+};