kelt-ui-kit-react 0.7.4 → 0.7.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/App.menu.tsx

@@ -5,6 +5,7 @@ import { ButtonView } from "./button/Button.view";
 import { CardView } from "./card/Card.view";
 import { CarouselView } from "./carousel/Carousel.view";
 import { DamierView } from "./damier/Damier.view";
+import { DataTableView } from "./dataTable/DataTable.view";
 import { ExpandsView } from "./expands/Expands.view";
 import { FilArianeView } from "./filAriane/FilAriane.view";
 import { FormView } from "./form/Form.view";
@@ -170,6 +171,13 @@ export const MenuList: MenuProps[] = [
     children: <NavLink to="/badge">Badge</NavLink>,
     element: <BadgeView />,
   },
+  {
+    id: 21,
+    name: "Data table",
+    link: "/data-table",
+    children: <NavLink to="/data-table">Data table</NavLink>,
+    element: <DataTableView />,
+  },
 ];
 
 export const AppMenu = (): JSX.Element => {

package/src/dataTable/DataTable.tsx

@@ -0,0 +1,135 @@
+import { Button } from "../button/Button";
+import { Icon } from "../icon/Icon";
+import { Loader } from "../loader/Loader";
+import "./dataTable.css";
+import {
+  dataTableActionsInterface,
+  dataTableColumnsInterface,
+} from "./dataTable.interface";
+export type DataTableProps<T> = {
+  id: string;
+  name?: string;
+  className?: string;
+  children?: JSX.Element;
+  element?: JSX.Element;
+  data: T[];
+  actions?: dataTableActionsInterface[];
+  columns: dataTableColumnsInterface[];
+  loading?: boolean;
+  onRowClick?: (row: any) => void;
+  onColumnClick?: (column: any) => void;
+};
+export function DataTable<T>(props: DataTableProps<T>) {
+  const {
+    id,
+    name,
+    className,
+    children,
+    element,
+    data = [],
+    actions = [],
+    columns = [],
+    loading,
+    onRowClick,
+    onColumnClick,
+  } = props;
+
+  if (loading) {
+    return <Loader display={loading} />;
+  }
+  return (
+    <div>
+      {name && <h2 className="mb-2">{name}</h2>}
+      {element}
+      <table className={`data-table ${className ? className : ""}`} id={id}>
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <>
+                <th
+                  key={column.id}
+                  style={{
+                    minWidth: column.minWidth,
+                    textAlign: column.align || "left",
+                  }}
+                  onClick={() => onColumnClick?.(column)}
+                >
+                  {column.label}
+                </th>
+              </>
+            ))}
+            {actions.length > 0 && <th key={"actions"}></th>}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, rowIndex) => (
+            <tr key={rowIndex} onClick={() => onRowClick?.(row)}>
+              {columns.map((column) => {
+                const value = (row as any)[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
+                return (
+                  <>
+                    <td
+                      key={column.id}
+                      style={{ textAlign: column.align || "left" }}
+                    >
+                      {column.editable ? (
+                        <input
+                          type={column.type}
+                          value={value}
+                          step="0.01"
+                          onChange={(e) => {
+                            if (column.onEdit) {
+                              column.onEdit(e.target.value);
+                            }
+                          }}
+                        />
+                      ) : column.format ? (
+                        column.format(value)
+                      ) : (
+                        value
+                      )}
+                    </td>
+                  </>
+                );
+              })}
+              {actions.length > 0 && (
+                <td>
+                  <div className="d-flex align-items-center">
+                    {actions.map((action) => (
+                      <>
+                        {action.type === "button" && (
+                          <Button
+                            title={action.label}
+                            key={action.id}
+                            onClick={() => action.onClick(row)}
+                            disabled={action.disabled}
+                            className={`data-table-action mr-2 ${
+                              action.classIcon ? action.classIcon : ""
+                            }`}
+                          />
+                        )}
+                        {action.type === "icon" && (
+                          <div
+                            className={`mr-2 `}
+                            onClick={() => action.onClick(row)}
+                          >
+                            <Icon
+                              classIcon={action.classIcon ?? ""}
+                              key={action.id}
+                            />
+                          </div>
+                        )}
+                      </>
+                    ))}
+                  </div>
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {children}
+    </div>
+  );
+}

package/src/dataTable/DataTable.view.tsx

@@ -0,0 +1,55 @@
+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,
+        type: "text",
+      },
+      { id: "age", label: "Age", minWidth: 50, 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[] = 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"}
+    />
+  );
+};

package/src/dataTable/dataTable.css

@@ -0,0 +1,12 @@
+.data-table {
+  width: 100%;
+  border-spacing: 5px;
+  font-size: 14px;
+  color: #333;
+  thead {
+    margin-bottom: 1rem;
+    th {
+      color: #bdbaba;
+    }
+  }
+}

package/src/dataTable/dataTable.interface.ts

@@ -0,0 +1,24 @@
+import { HTMLInputTypeAttribute } from "react";
+
+export interface dataTableColumnsInterface {
+  id: string;
+  label: string;
+  minWidth?: number;
+  align?: "right" | "left" | "center";
+  format?: (value: any) => string;
+  sortable?: boolean;
+  filterable?: boolean;
+  filterValue?: string;
+  editable?: boolean;
+  onEdit?: (value: any) => void;
+  type: HTMLInputTypeAttribute;
+}
+export interface dataTableActionsInterface {
+  id: string;
+  label: string;
+  type: "button" | "link" | "icon";
+  classIcon?: string;
+  onClick: (row: any) => void;
+  disabled?: boolean;
+  visible?: boolean;
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export { ButtonActions } from "./button/buttonActions/ButtonActions";
 export { Card } from "./card/Card";
 export { Carousel } from "./carousel/Carousel";
 export { Damier } from "./damier/Damier";
+export { DataTable } from "./dataTable/DataTable";
 export { Expands } from "./expands/Expands";
 export { FilAriane } from "./filAriane/FilAriane";
 export { DynamicForm } from "./form/Form";