kelt-ui-kit-react 2.0.6 → 2.0.9

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>
+  );
+};

package/src/dataTable/dataTable.css

@@ -1,208 +1,233 @@
-.data-table-footer-action {
-  position: fixed;
-  left: 5px;
-  right: 5px;
-  bottom: 5px;
-  border-radius: 4px;
-  z-index: 1000;
-  overflow: hidden;
-  background: #fff;
-  border-top: 1px solid #e5e5e5;
-  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
-  animation: data-table-footer-action-enter 180ms ease-out;
-
-  & .data-table-footer-action__content {
-    position: relative;
-    padding: 0.75rem 1rem;
-  }
-
-  & .data-table-footer-action__close {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    cursor: pointer;
-
-    .bi {
-      color: #333;
-    }
-  }
-}
-
-
-
-
-@keyframes data-table-footer-action-enter {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.data-table-container {
-  overflow: auto;
-  position: relative;
-
-  .data-table-mobile-cards {
-    display: grid;
-    gap: 0.75rem;
-
-    .data-table-mobile-card {
-      width: 100%;
-      max-width: none;
-      height: auto;
-      padding: 0;
-      border-radius: 8px;
-    }
-
-    .data-table-mobile-card__content {
-      width: 100%;
-      min-width: 0;
-    }
-
-    .data-table-mobile-card__field {
-      display: grid;
-      grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
-      gap: 0.75rem;
-      align-items: center;
-      padding: 0.625rem 0.75rem;
-      border-bottom: 1px solid #e5e5e5;
-    }
-
-    .data-table-mobile-card__label {
-      color: var(--tertiary-color);
-      font-size: 0.875rem;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-    }
-
-    .data-table-mobile-card__actions {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-      justify-content: flex-end;
-      padding: 0.75rem;
-    }
-
-    .data-table-mobile-cards__empty {
-      padding: 1rem;
-      text-align: center;
-      color: #666;
-    }
-  }
-
-  &.data-table-container--with-footer-action {
-    scroll-padding-bottom: 80px;
-  }
-
-  .data-table {
-    width: 100%;
-    border-spacing: 0;
-    font-size: 16px;
-    color: #333;
-
-    .select-cell {
-      min-width: 40px !important;
-
-      .input-container {
-        min-width: 20px;
-
-        input {
-          min-width: 20px;
-          width: 20px;
-          cursor: pointer;
-        }
-      }
-    }
-
-
-    thead {
-      margin-bottom: 1rem;
-      position: sticky;
-      top: 0;
-      z-index: 1;
-      background-color: #fff;
-
-      th {
-        position: sticky;
-        top: 0;
-        z-index: 2;
-        background-color: #fff;
-        color: var(--tertiary-color);
-        min-width: 100px;
-        padding: .5rem;
-      }
-    }
-
-    tbody {
-      td {
-        padding: 0.5rem;
-
-        &:not(:first-child) {
-          padding-left: 0 !important;
-        }
-      }
-
-      tr.even {
-        background-color: #ffffff;
-      }
-
-      tr.odd {
-        background-color: #f5f5f5;
-      }
-
-      .data-table-input-number-wrapper {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-
-        button.data-table-step-btn {
-          min-width: 28px !important;
-          width: 28px !important;
-          height: 28px !important;
-          max-height: 28px !important;
-          padding: 0 !important;
-          display: inline-flex !important;
-          align-items: center !important;
-          justify-content: center !important;
-          border-radius: 4px;
-          border: 1px solid #dcdcdc;
-          background-color: #f8f9fa;
-          color: #333;
-          font-size: 16px;
-          line-height: 1;
-          cursor: pointer;
-          transition: background-color 0.15s, border-color 0.15s;
-
-          &:hover:not(:disabled) {
-            background-color: #e9ecef;
-            border-color: #adb5bd;
-          }
-
-          &:active:not(:disabled) {
-            background-color: #dee2e6;
-          }
-
-          &:disabled {
-            opacity: 0.4;
-            cursor: not-allowed;
-            background-color: #f8f9fa;
-          }
-
-          .bi {
-            font-size: 13px;
-            line-height: 1;
-          }
-        }
-
-        input {
-          margin: 0;
-        }
-      }
-    }
-  }
-}
+.data-table-footer-action {
+  position: fixed;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 4px;
+  z-index: 1000;
+  overflow: hidden;
+  background: #fff;
+  border-top: 1px solid #e5e5e5;
+  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
+  animation: data-table-footer-action-enter 180ms ease-out;
+
+  & .data-table-footer-action__content {
+    position: relative;
+    padding: 0.75rem 1rem;
+  }
+
+  & .data-table-footer-action__close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer;
+
+    .bi {
+      color: #333;
+    }
+  }
+}
+
+
+
+
+@keyframes data-table-footer-action-enter {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.data-table-container {
+  overflow: auto;
+  position: relative;
+
+  .data-table-mobile-cards {
+    display: grid;
+    gap: 0.75rem;
+
+    .data-table-mobile-card {
+      width: 100%;
+      max-width: none;
+      height: auto;
+      padding: 0;
+      border-radius: 8px;
+    }
+
+    .data-table-mobile-card__content {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .data-table-mobile-card__field {
+      display: grid;
+      grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
+      gap: 0.75rem;
+      align-items: center;
+      padding: 0.625rem 0.75rem;
+      border-bottom: 1px solid #e5e5e5;
+    }
+
+    .data-table-mobile-card__label {
+      color: var(--tertiary-color);
+      font-size: 0.875rem;
+      font-weight: 600;
+      overflow-wrap: anywhere;
+    }
+
+    .data-table-mobile-card__actions {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0.75rem;
+    }
+
+    .data-table-mobile-cards__empty {
+      padding: 1rem;
+      text-align: center;
+      color: #666;
+    }
+  }
+
+  &.data-table-container--with-footer-action {
+    scroll-padding-bottom: 80px;
+  }
+
+  .data-table {
+    width: 100%;
+    border-spacing: 0;
+    font-size: 16px;
+    color: #333;
+
+    .select-cell {
+      min-width: 40px !important;
+
+      .input-container {
+        min-width: 20px;
+
+        input {
+          min-width: 20px;
+          width: 20px;
+          cursor: pointer;
+        }
+      }
+    }
+
+
+    thead {
+      margin-bottom: 1rem;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background-color: #fff;
+
+      th {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        background-color: #fff;
+        color: var(--tertiary-color);
+        min-width: 100px;
+        padding: .5rem;
+      }
+    }
+
+    tbody {
+      td {
+        padding: 0.5rem;
+
+        &:not(:first-child) {
+          padding-left: 0 !important;
+        }
+      }
+
+      tr.even {
+        background-color: #ffffff;
+      }
+
+      tr.odd {
+        background-color: #f5f5f5;
+      }
+
+      .data-table-input-number-wrapper {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+
+        button.data-table-step-btn {
+          min-width: 28px !important;
+          width: 28px !important;
+          height: 28px !important;
+          max-height: 28px !important;
+          padding: 0 !important;
+          display: inline-flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          border-radius: 4px;
+          border: 1px solid #dcdcdc;
+          background-color: #f8f9fa;
+          color: #333;
+          font-size: 16px;
+          line-height: 1;
+          cursor: pointer;
+          transition: background-color 0.15s, border-color 0.15s;
+
+          &:hover:not(:disabled) {
+            background-color: #e9ecef;
+            border-color: #adb5bd;
+          }
+
+          &:active:not(:disabled) {
+            background-color: #dee2e6;
+          }
+
+          &:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+            background-color: #f8f9fa;
+          }
+
+          .bi {
+            font-size: 13px;
+            line-height: 1;
+          }
+        }
+
+        input {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+.data-table-action-icon {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.data-table-column-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.data-table-group-row th {
+  height: 40px;
+  box-sizing: border-box;
+}
+.data-table-action-link {
+  min-width: 0;
+  background: transparent;
+  color: var(--primary-color);
+  text-decoration: underline;
+}
+.data-table-mobile-controls {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 16px;
+}