@sio-group/ui-datatable 0.1.0

package/dist/styles/index.css

@@ -0,0 +1,154 @@
+:root {
+  --sio-color-white: #ffffff;
+  --sio-color-black: #000000;
+  --sio-color-gray: #655f5d;
+  --sio-color-light-gray: #c6c6c6;
+  --sio-color-primary: #3B82F6;
+  --sio-color-success: #10B981;
+  --sio-color-error: #EF4444;
+  --sio-color-warning: #F59E0B;
+  --sio-color-info: #06B6D4;
+  --sio-datatable-border: var(--sio-color-light-gray);
+  --sio-datatable-striped: #f9fafb;
+  --sio-datatable-hover: #f1f5f9;
+  --sio-form-border: var(--sio-color-light-gray);
+  --sio-form-bg: var(--sio-color-white);
+}
+
+:root {
+  --sio-card-border-radius: 3px;
+  --sio-card-padding-x: 3px;
+  --sio-card-padding-y: 3px;
+  --sio-form-border-radius: 3px;
+  --sio-form-padding-x: 10px;
+  --sio-form-padding-y: 5px;
+}
+
+.datatable__controls {
+  display: flex;
+  justify-content: flex-end;
+}
+.datatable__wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+.datatable .form-field__control {
+  margin: 0 0 15px 0;
+  width: 250px;
+  border: 1px solid var(--sio-form-border);
+  background: var(--sio-form-bg);
+  position: relative;
+  font-size: 1em;
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+  border-radius: var(--sio-form-border-radius);
+  transition: color 300ms ease;
+}
+.datatable .form-field__control input {
+  display: block;
+  color: var(--sio-color-gray);
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: var(--sio-form-padding-y) var(--sio-form-padding-x);
+  resize: vertical;
+  transition: color 300ms ease;
+}
+.datatable .form-field__control input:focus {
+  outline: none;
+  box-shadow: none;
+}
+.datatable .form-field__control input::placeholder {
+  color: var(--sio-color-light-gray);
+  font-weight: 200;
+  font-size: 1em;
+}
+.datatable .form-field.form-field--has-value .form-field__control {
+  color: var(--sio-color-black);
+  border-color: var(--sio-color-primary);
+}
+.datatable .form-field.form-field--focused .form-field__control {
+  color: var(--sio-color-black);
+  border-color: var(--sio-color-primary);
+  box-shadow: inset 2px 0 10px 0 rgba(var(--sio-color-primary-rgb), 0.3);
+}
+.datatable table {
+  width: 100%;
+  border-collapse: collapse;
+  border: none;
+  border-spacing: 0;
+}
+.datatable table tr {
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.datatable table tr:last-child td {
+  border-width: 2px;
+}
+.datatable table thead th {
+  border-width: 2px;
+  white-space: nowrap;
+}
+.datatable table td,
+.datatable table th {
+  text-align: left;
+  padding: var(--sio-form-padding-y) var(--sio-form-padding-x);
+  border-bottom: 1px solid var(--sio-datatable-border);
+}
+.datatable table tfoot td,
+.datatable table tfoot th {
+  border-top: 2px solid;
+  font-weight: bold;
+}
+.datatable table.striped tbody tr:nth-child(even) {
+  background-color: var(--sio-datatable-striped);
+}
+.datatable table.hover tbody tr:hover {
+  background-color: var(--sio-datatable-hover);
+}
+.datatable .sort {
+  cursor: pointer;
+}
+.datatable .sort > span {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.datatable .sort > span .label {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  white-space: nowrap;
+}
+.datatable .sort > span .icons {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  margin-left: 2.5px;
+  gap: 0;
+  line-height: 1;
+  font-size: 0.7em;
+}
+.datatable .center {
+  text-align: center;
+}
+.datatable .right {
+  text-align: right;
+}
+.datatable .linebreak {
+  white-space: pre-line;
+}
+.datatable .no-style {
+  text-decoration: none;
+  color: inherit;
+}
+.datatable .no-style:hover {
+  text-decoration: underline;
+}
+.datatable .empty-state {
+  margin: 25px;
+}
+
+/*# sourceMappingURL=index.css.map */

package/dist/styles/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/assets/scss/tokens/_color.scss","../../src/assets/scss/tokens/_datatable.scss","../../src/assets/scss/index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;;ACjBF;EACE;EAEA;EACA;EAEA;EACA;EACA;;;ACJA;EACE;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;;AAIA;AAAA;EAEE;EACA;;AAIJ;EACE;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE","file":"index.css"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sio-group/ui-datatable",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/sio-datatable-style.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./sio-datatable-style.css": "./dist/styles/index.css"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css",
+    "build:css": "sass src/assets/scss:dist/styles dist",
+    "build:js": "tsup src/index.ts --format cjs,esm --dts --tsconfig tsconfig.json",
+    "test": "vitest",
+    "test:ui": "vitest --ui"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "dependencies": {
+    "@sio-group/ui-core": "0.4.0",
+    "@sio-group/ui-pagination": "0.1.1",
+    "@sio-group/ui-modal": "0.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4",
+    "sass": "^1.97.3",
+    "typescript": "^5",
+    "vite": "^5"
+  }
+}

package/src/assets/scss/index.scss

@@ -0,0 +1,170 @@
+@forward "tokens/color";
+@forward "tokens/datatable";
+
+.datatable {
+  &__controls {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__wrapper {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .form-field {
+    &__control {
+      margin: 0 0 15px 0;
+      width: 250px;
+      border: 1px solid var(--sio-form-border);
+      background: var(--sio-form-bg);
+      position: relative;
+      font-size: 1em;
+      padding: 0;
+      display: flex;
+      justify-content: space-between;
+      border-radius: var(--sio-form-border-radius);
+      transition: color 300ms ease;
+
+      input {
+        display: block;
+        color: var(--sio-color-gray);
+        width: 100%;
+        background: transparent;
+        border: none;
+        padding: var(--sio-form-padding-y) var(--sio-form-padding-x);
+        resize: vertical;
+        transition: color 300ms ease;
+
+        &:focus {
+          outline: none;
+          box-shadow: none;
+        }
+
+        &::placeholder {
+          color: var(--sio-color-light-gray);
+          font-weight: 200;
+          font-size: 1em;
+        }
+      }
+    }
+
+    &.form-field--has-value .form-field__control  {
+      color: var(--sio-color-black);
+      border-color: var(--sio-color-primary);
+    }
+
+    &.form-field--focused .form-field__control {
+      color: var(--sio-color-black);
+      border-color: var(--sio-color-primary);
+      box-shadow: inset 2px 0 10px 0 rgba(var(--sio-color-primary-rgb), 0.3);
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border: none;
+    border-spacing: 0;
+
+    tr {
+      vertical-align: middle;
+      white-space: nowrap;
+
+      &:last-child td {
+        border-width: 2px;
+      }
+    }
+
+    thead {
+      th {
+        border-width: 2px;
+        white-space: nowrap;
+      }
+    }
+
+    td,
+    th {
+      text-align: left;
+      padding: var(--sio-form-padding-y) var(--sio-form-padding-x);
+      border-bottom: 1px solid var(--sio-datatable-border);
+    }
+
+    tfoot {
+      td,
+      th {
+        border-top: 2px solid;
+        font-weight: bold;
+      }
+    }
+
+    &.striped tbody tr:nth-child(even) {
+      background-color: var(--sio-datatable-striped);
+    }
+
+    &.hover tbody tr:hover {
+      background-color: var(--sio-datatable-hover);
+    }
+  }
+
+  .sort {
+    cursor: pointer;
+
+    > span {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+      .label {
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 150px;
+        white-space: nowrap;
+      }
+
+      .icons {
+        position: relative;
+        display: inline-flex;
+        flex-direction: column;
+        margin-left: 2.5px;
+        gap: 0;
+        line-height: 1;
+        font-size: .7em;
+      }
+    }
+  }
+
+  .center {
+    text-align: center;
+  }
+
+  .right {
+    text-align: right;
+  }
+
+  .linebreak {
+    white-space: pre-line;
+  }
+
+  .no-style {
+    text-decoration: none;
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .empty-state {
+    margin: 25px;
+  }
+
+  .action-cell {
+    .action-group {}
+
+    .action-dropdown {
+      &__menu {}
+    }
+  }
+}

package/src/assets/scss/tokens/_color.scss

@@ -0,0 +1,19 @@
+:root {
+  --sio-color-white: #ffffff;
+  --sio-color-black: #000000;
+  --sio-color-gray: #655f5d;
+  --sio-color-light-gray: #c6c6c6;
+
+  --sio-color-primary: #3B82F6;
+  --sio-color-success: #10B981;
+  --sio-color-error: #EF4444;
+  --sio-color-warning: #F59E0B;
+  --sio-color-info: #06B6D4;
+
+  --sio-datatable-border: var(--sio-color-light-gray);
+  --sio-datatable-striped: #f9fafb;
+  --sio-datatable-hover: #f1f5f9;
+
+  --sio-form-border: var(--sio-color-light-gray);
+  --sio-form-bg: var(--sio-color-white);
+}

package/src/assets/scss/tokens/_datatable.scss

@@ -0,0 +1,10 @@
+:root {
+  --sio-card-border-radius: 3px;
+
+  --sio-card-padding-x: 3px;
+  --sio-card-padding-y: 3px;
+
+  --sio-form-border-radius: 3px;
+  --sio-form-padding-x: 10px;
+  --sio-form-padding-y: 5px;
+}

package/src/components/ActionCell.tsx

@@ -0,0 +1,88 @@
+import {Action, ActionCellProps} from "../types";
+import {Button} from "@sio-group/ui-core";
+import {useEffect, useRef, useState} from "react";
+
+export const ActionCell = <T extends { id: string | number }> ({
+    actionMenu,
+    item,
+    renderMenuIcon,
+}: ActionCellProps<T>) => {
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const triggerRef = useRef<HTMLElement>(null);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const positionDropdown = () => {
+        if (dropdownRef.current && triggerRef.current) {
+            const rect: DOMRect = triggerRef.current.getBoundingClientRect();
+            dropdownRef.current.style.left = `${rect.left}px`;
+            dropdownRef.current.style.top = `${rect.top}px`;
+        }
+    }
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleOutside = (e: MouseEvent | Event) => {
+            if (dropdownRef.current?.contains(e.target as Node)) return;
+            setIsOpen(false);
+        }
+
+        document.addEventListener('mousedown', handleOutside, false);
+        document.addEventListener('wheel', handleOutside, false);
+
+        return () => {
+            document.removeEventListener('mousedown', handleOutside, false);
+            document.removeEventListener('wheel', handleOutside, false);
+        }
+    }, [isOpen]);
+
+    const renderButton = ({ label, name, icon, onClick }: Action<T>, showLabel: boolean) => (
+        <Button
+            onClick={() => onClick(item)}
+            variant="secondary"
+            className=""
+            ariaLabel={label}
+            key={name}
+        >
+            {icon && <span>{icon}</span>}
+            {showLabel && <span>{label}</span>}
+        </Button>
+    )
+
+    return (
+        <td className="action-cel">
+            {actionMenu?.type === 'inline' ? (
+                <div className="action-group">
+                    {actionMenu.actions.map((action: Action<T>) => renderButton(action, false))}
+                </div>
+            ) : (
+                <section
+                    className="action-dropdown"
+                    ref={triggerRef}
+                >
+                    <button
+                        className="btn--link btn--default"
+                        aria-label="Acties"
+                        aria-expanded={isOpen}
+                        aria-haspopup="menu"
+                        onClick={() => {
+                            setIsOpen(!isOpen);
+                            positionDropdown();
+                        }}
+                    >
+                        {renderMenuIcon ? renderMenuIcon() : '⋮'}
+                    </button>
+                    {isOpen && (
+                        <div
+                            className="action-dropdown__menu"
+                            ref={dropdownRef}
+                            role="menu"
+                        >
+                            {actionMenu?.actions.map((action: Action<T>) => renderButton(action, true))}
+                        </div>
+                    )}
+                </section>
+            )}
+        </td>
+    );
+}

package/src/components/DataTable.tsx

@@ -0,0 +1,85 @@
+import {DataTableHeader} from "./DataTableHeader";
+import {useDataTable} from "../hooks/useDataTable";
+import {DataTableProps} from "../types";
+import {Pagination} from "@sio-group/ui-pagination";
+import {DataTableBody} from "./DataTableBody";
+import {DataTableControls} from "./DataTableControls";
+
+export const DataTable = <T extends { id: string | number }>({
+    columns,
+    entity,
+    actionMenu,
+    renderMenuIcon,
+    onUpdate,
+    formFields,
+    renderSortIcon,
+    emptyMessage = 'Nog geen data',
+    striped = false,
+    hover = false,
+    style,
+    ...props
+}: DataTableProps<T>) => {
+    const {
+        pagedData,
+        paginationMeta,
+        showPagination,
+        showSearch,
+        handleSearch,
+        handleSort,
+        handlePaginate,
+        currentSort,
+        currentSearch,
+    } = useDataTable(props);
+
+    return (
+        <div className="datatable" style={style}>
+            {showSearch && (
+                <DataTableControls
+                    currentSearch={currentSearch}
+                    handleSearch={handleSearch}
+                    entity={entity}
+                />
+            )}
+
+            <div className="datatable__wrapper">
+                <table className={[striped && 'striped', hover && 'hover'].filter(Boolean).join(' ')}>
+                    <DataTableHeader
+                        columns={columns}
+                        onSort={handleSort}
+                        sortValue={currentSort}
+                        hasActionMenu={!!actionMenu?.actions?.length}
+                        renderSortIcon={renderSortIcon}
+                    />
+                    <tbody>
+                    {pagedData.length
+                        ? pagedData.map((item) => (
+                            <DataTableBody
+                                item={item}
+                                columns={columns}
+                                actionMenu={actionMenu}
+                                formFields={formFields}
+                                updateData={onUpdate}
+                                renderMenuIcon={renderMenuIcon}
+                                key={item.id}
+                            />
+                        ))
+                        : (
+                            <tr>
+                                <td colSpan={columns.length + (actionMenu?.actions?.length ? 1 : 0)}>
+                                    <div className="empty-state">{emptyMessage}</div>
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            {(showPagination && paginationMeta) && (
+                <Pagination
+                    {...paginationMeta}
+                    onPaginate={handlePaginate}
+                />
+            )}
+        </div>
+    )
+}

package/src/components/DataTableBody.tsx

@@ -0,0 +1,34 @@
+import {DataTableBodyProps} from "../types/data-table-body-props";
+import {Column} from "../types";
+import {ActionCell} from "./ActionCell";
+import {TableCell} from "./TableCell";
+
+export const DataTableBody = <T extends { id: string | number }> ({
+    item,
+    columns,
+    actionMenu,
+    formFields,
+    updateData,
+    renderMenuIcon,
+}: DataTableBodyProps<T>) => {
+    return (
+        <tr>
+            {actionMenu && (
+                <ActionCell
+                    actionMenu={actionMenu}
+                    item={item}
+                    renderMenuIcon={renderMenuIcon}
+                />
+            )}
+            {columns.map((column: Column<T>) => (
+                <TableCell
+                    column={column}
+                    item={item}
+                    formFields={formFields}
+                    updateData={updateData}
+                    key={`${String(column.name)}-${item.id}`}
+                />
+            ))}
+        </tr>
+    )
+}

package/src/components/DataTableControls.tsx

@@ -0,0 +1,35 @@
+import {Entity} from "../types";
+import {useState} from "react";
+
+interface DataTableControlsProps {
+    currentSearch?: string | null;
+    handleSearch: (query: string) => void;
+    entity?: Entity
+}
+
+export const DataTableControls = ({
+    currentSearch,
+    handleSearch,
+    entity,
+}: DataTableControlsProps) => {
+    const [focused, setFocused] = useState(false);
+
+    return (
+        <div className="datatable__controls">
+            <div className={`form-field${currentSearch ? ' form-field--has-value' : ''}${focused ? ' form-field--focused' : ''}`}>
+                <div className="form-field__control">
+                    <input
+                        className="search"
+                        type="search"
+                        value={currentSearch ?? ''}
+                        onChange={(e) => handleSearch(e.target.value)}
+                        placeholder={`Zoeken in ${entity?.label.toLowerCase() ?? 'tabel'}`}
+                        aria-label={`Zoeken in ${entity?.label.toLowerCase() ?? 'tabel'}`}
+                        onFocus={() => setFocused(true)}
+                        onBlur={() => setFocused(false)}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}