@sio-group/ui-datatable 0.1.0

package/src/components/DataTableHeader.tsx

@@ -0,0 +1,59 @@
+import {Column, DataTableHeaderProps} from "../types";
+import {DefaultSortIcon} from "./DefaultSortIcon";
+
+export const DataTableHeader = <T extends { id: string | number }>({
+    columns,
+    onSort,
+    sortValue,
+    hasActionMenu,
+    renderSortIcon,
+}: DataTableHeaderProps<T>) => {
+    const handleSort = (column: Column<T>) => {
+        if (!onSort) return;
+
+        if (!sortValue || sortValue.name !== column.name) {
+            onSort({ name: column.name, direction: 'asc' });
+        } else if (sortValue.direction === 'asc') {
+            onSort({ ...sortValue, direction: 'desc' });
+        } else {
+            onSort(null);
+        }
+    }
+
+    return (
+        <thead>
+        <tr>
+            {hasActionMenu && <th aria-label="Actions" />}
+            {columns.map((column: Column<T>) => (
+                <th
+                    onClick={() => column.sort && handleSort(column)}
+                    className={[column.className, column.sort ? 'sort' : null].filter(Boolean).join(' ')}
+                    style={column.style}
+                    key={String(column.name)}
+                >
+                    <span>
+                        <span className="label">{column.label}</span>
+                        {column.sort && (
+                            <span className="icons">
+                            {renderSortIcon ? (
+                                <>
+                                    {renderSortIcon('asc', sortValue?.name === column.name && sortValue?.direction === 'asc')}
+                                    {renderSortIcon('desc', sortValue?.name === column.name && sortValue?.direction === 'desc')}
+                                </>
+                            ) : (
+                                <>
+                                    <DefaultSortIcon direction="asc"
+                                                     active={sortValue?.name === column.name && sortValue?.direction === 'asc'}/>
+                                    <DefaultSortIcon direction="desc"
+                                                     active={sortValue?.name === column.name && sortValue?.direction === 'desc'}/>
+                                </>
+                            )}
+                            </span>
+                        )}
+                    </span>
+                </th>
+            ))}
+        </tr>
+        </thead>
+    )
+}

package/src/components/DefaultSortIcon.tsx

@@ -0,0 +1,13 @@
+import {SortDirection} from "../types";
+
+export const DefaultSortIcon = ({
+    direction,
+    active,
+}: { direction: SortDirection, active: boolean }) => (
+    <span
+        style={{ opacity: active ? 1 : 0.3, fontSize: '0.7em' }}
+        aria-hidden="true"
+    >
+    {direction === 'asc' ? '▲' : '▼'}
+  </span>
+);

package/src/components/TableCell.tsx

@@ -0,0 +1,17 @@
+import {TableCellProps} from "../types";
+import {renderValue} from "../utils/render-value";
+
+export const TableCell = <T extends { id: number | string }> ({
+    column,
+    item,
+    formFields,
+    updateData,
+}: TableCellProps<T>) => {
+    const cellValue: T[keyof T] = item[column.name];
+
+    return (
+        <td className={column.className ?? ''}>
+            {renderValue({value: cellValue, column, item, formFields, updateData})}
+        </td>
+    );
+}

package/src/components/cell-types/BooleanCell.tsx

@@ -0,0 +1,29 @@
+import {Column} from "../../types";
+import {Button} from "@sio-group/ui-core";
+
+interface BooleanCellProps<T extends { id: number | string }> {
+    item: T;
+    column: Column<T>;
+    value: T[keyof T];
+    updateData?: (id: string | number, values: Partial<T>) => void;
+}
+
+export const BooleanCell = <T extends { id: string | number }> ({
+    column,
+    value,
+    item,
+    updateData,
+}: BooleanCellProps<T>) => (
+    <Button
+        color={value ? "success" : "error"}
+        variant={column.format === "button" ? "primary" : "link"}
+        onClick={() =>
+            updateData?.(item.id, {
+                [column.name]: !value
+            } as Partial<T>)
+        }
+        ariaLabel={String(column.name)}
+    >
+        {value ? '✓' : '✗'}
+    </Button>
+);

package/src/components/cell-types/DateCell.tsx

@@ -0,0 +1,28 @@
+import {Column} from "../../types";
+
+interface DateCellProps<T extends { id: number | string }> {
+    column: Column<T>;
+    value: T[keyof T];
+}
+
+export const DateCell = <T extends { id: string | number }> ({
+    column,
+    value,
+}: DateCellProps<T>) => (
+    new Date(value as string)
+        .toLocaleString("nl-BE", {
+            timeZone: "Europe/Brussels",
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            ...(column.format === "datetime"
+                ? {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                }
+                : {}),
+            hour12: false,
+        })
+        .replace(/\//g, "-")
+);

package/src/components/cell-types/EmptyCell.tsx

@@ -0,0 +1,3 @@
+export const EmptyCell = () => (
+    <span className="empty" aria-label="empty" />
+);

package/src/components/cell-types/InlineInputCell.tsx

@@ -0,0 +1,129 @@
+import {KeyboardEventHandler, useEffect, useState} from "react";
+import {Column, FormField} from "../../types";
+import {Button} from "@sio-group/ui-core";
+
+interface InlineInputCellProps<T extends { id: string | number }> {
+    column: Column<T>;
+    formField: FormField;
+    item: T;
+    value: T[keyof T];
+    updateData?: (id: string | number, values: Partial<T>) => void;
+}
+
+export const InlineInputCell = <T extends { id: string | number }>({
+    column,
+    formField,
+    item,
+    value,
+    updateData,
+}: InlineInputCellProps<T>) => {
+    const [showEdit, setShowEdit] = useState(false);
+    const [fieldValue, setFieldValue] = useState(String(value));
+    const [isValid, setIsValid] = useState(true)
+
+    const handleCancel = () => {
+        setShowEdit(false);
+        setFieldValue(String(value));
+    };
+
+    const handleSave = async () => {
+        updateData?.(item.id, {[formField.name]: fieldValue} as Partial<T>);
+        setFieldValue(String(value));
+        setShowEdit(false);
+    };
+
+    useEffect(() => {
+        let bool: boolean = true;
+        if (formField.required) {
+            bool = fieldValue !== null && fieldValue !== '';
+        }
+
+        setIsValid(bool)
+    }, [fieldValue]);
+
+    useEffect(() => {
+        const handleEsc = (e: KeyboardEvent) => {
+            if (e.key === "Escape") setShowEdit(false);
+        };
+
+        document.addEventListener("keydown", handleEsc);
+        return () => document.removeEventListener("keydown", handleEsc);
+    }, [setShowEdit]);
+
+    return (
+        <>
+            {showEdit ? (
+                <form noValidate>
+                    {formField.type === "select" || formField.type === "radio" ? (
+                        <select
+                            id={formField.name}
+                            name={formField.name}
+                            value={fieldValue}
+                            onChange={(e) => setFieldValue(e.target.value)}
+                            autoFocus={true}
+                        >
+                            {formField?.options?.map((option) => {
+                                const val: string = typeof option === 'string' ? option : option.value;
+                                const label: string = typeof option === 'string' ? option : option.label;
+
+                                return <option value={val} key={val}>{label}</option>
+                            })}
+                        </select>
+                    ) : (
+                        <input
+                            type="text"
+                            id={formField.name}
+                            name={formField.name}
+                            value={fieldValue as string}
+                            onChange={(e) => setFieldValue(e.target.value)}
+                            autoFocus={true}
+                        />
+                    )}
+                    <div className="btn-group">
+                        <Button
+                            type="submit"
+                            variant="link"
+                            color="success"
+                            onClick={handleSave}
+                            ariaLabel="inline edit field"
+                            disabled={!isValid}
+                            label="✓"
+                        />
+                        <Button
+                            type="button"
+                            variant="link"
+                            color="error"
+                            onClick={handleCancel}
+                            ariaLabel="inline edit field"
+                            label="✗"
+                        />
+                    </div>
+                </form>
+            ) : (
+                <>
+                    {value}
+                    <Button
+                        variant="link"
+                        onClick={() => setShowEdit(true)}
+                        ariaLabel="inline edit field"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        >
+                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                        </svg>
+                    </Button>
+                </>
+            )}
+        </>
+    )
+}

package/src/hooks/useDataTable.ts

@@ -0,0 +1,113 @@
+import {useMemo, useState} from "react";
+import {UseDataTableProps} from "../types/use-data-table-props";
+import {UseDataTableReturn} from "../types/use-data-table-return";
+import {SortState} from "../types";
+
+export const useDataTable = <T extends { id: string | number }>({
+    data,
+    pagination,
+    onSearch,
+    onSort,
+    onPaginate,
+    searchValue,
+    sortValue,
+    clientPageSize,
+    clientSearchKeys
+}: UseDataTableProps<T>): UseDataTableReturn<T> => {
+    const isControlled: boolean = pagination !== undefined;
+
+    const showPagination: boolean = isControlled ? !!onPaginate : !!clientPageSize;
+    const showSearch: boolean = isControlled ? !!onSearch : !!clientSearchKeys?.length;
+
+    const [clientSearch, setClientSearch] = useState('');
+    const [clientSort, setClientSort] = useState<SortState<T> | null>(null);
+    const [clientPage, setClientPage] = useState(1);
+
+    const handleSearch = (query: string) => {
+        if (isControlled) {
+            onSearch?.(query);
+        } else {
+            setClientSearch(query);
+            setClientPage(1);
+        }
+    }
+
+    const handleSort = (sort: SortState<T> | null) => {
+        if (isControlled) {
+            onSort?.(sort);
+        } else {
+            setClientSort(sort);
+        }
+    }
+
+    const handlePaginate = (page: number) => {
+        if (isControlled) {
+            onPaginate?.(page);
+        } else {
+            setClientPage(page);
+        }
+    }
+
+    const processedData = useMemo(() => {
+        if (isControlled) return data;
+
+        let result = [...data];
+
+        if (clientSearch && clientSearchKeys?.length) {
+            result = result.filter((item) =>
+                clientSearchKeys.some((key) =>
+                    String(item[key]).toLowerCase().includes(clientSearch.toLowerCase())
+                )
+            );
+        }
+
+        if (clientSort) {
+            result.sort((a: T, b: T) => {
+                const aVal: string = String(a[clientSort.name]);
+                const bVal: string = String(b[clientSort.name]);
+                return clientSort.direction === 'asc'
+                    ? aVal.localeCompare(bVal)
+                    : bVal.localeCompare(aVal);
+            });
+        }
+
+        return result;
+    }, [data, clientSearch, clientSort, isControlled]);
+
+    const paginationMeta = useMemo(() => {
+        if (isControlled || !clientPageSize) return pagination;
+
+        const pageSize: number = clientPageSize;
+        const total: number = processedData.length;
+        const pageCount: number = Math.ceil(total / pageSize);
+        const from: number = (clientPage - 1) * pageSize;
+
+        return {
+            currentPage: clientPage,
+            pageCount,
+            total,
+            from: from + 1,
+            to: Math.min(from + pageSize, total)
+        };
+    }, [isControlled, pagination, processedData, clientPage, clientPageSize]);
+
+    const pagedData = useMemo(() => {
+        if (isControlled || !clientPageSize) return data;
+
+        const pageSize: number = clientPageSize;
+        const from: number = (clientPage - 1) * pageSize;
+        return processedData.slice(from, from + pageSize);
+    }, [isControlled, processedData, clientPage, clientPageSize]);
+
+    return {
+        pagedData,
+        paginationMeta,
+        showPagination,
+        showSearch,
+        handleSearch,
+        handleSort,
+        handlePaginate,
+        currentSort: isControlled ? sortValue : clientSort,
+        currentSearch: isControlled ? searchValue : clientSearch,
+    }
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+export { DataTable } from "./components/DataTable";
+
+export type {
+    DataTableProps,
+    Column,
+    Entity,
+    Action,
+    ActionMenu,
+    ActionMenuType,
+    FormField,
+    FormFieldType,
+    SortState,
+    SortDirection,
+} from "./types";

package/src/types/action-cell-props.d.ts

@@ -0,0 +1,9 @@
+import {ActionMenu} from "./action-menu";
+import {Entity} from "./entity";
+import {ReactNode} from "react";
+
+export interface ActionCellProps <T extends { id: string | number }> {
+    actionMenu?: ActionMenu<T>;
+    item: T;
+    renderMenuIcon?: () => ReactNode;
+}

package/src/types/action-menu.d.ts

@@ -0,0 +1,15 @@
+import {ReactNode} from "react";
+
+export type ActionMenuType = 'inline' | 'dropdown';
+
+export interface Action <T extends { id: string | number }> {
+    name: string;
+    label: string;
+    icon?: ReactNode;
+    onClick: (item: T) => void
+}
+
+export interface ActionMenu <T extends { id: string | number }> {
+    type: ActionMenuType;
+    actions: Action<T>[];
+}

package/src/types/column.d.ts

@@ -0,0 +1,10 @@
+import {CSSProperties} from "react";
+
+export interface Column<T extends { id: number | string }> {
+    name: keyof T;
+    label: string;
+    className?: string;
+    style?: CSSProperties;
+    sort?: boolean;
+    format?: 'boolean' | 'button' | 'datetime' | 'date' | 'pill' | 'email' | { key: string };
+}

package/src/types/data-table-body-props.d.ts

@@ -0,0 +1,16 @@
+import {Column} from "./column";
+import {Entity} from "./entity";
+import {ActionMenu} from "./action-menu";
+import {FormField} from "./form-field";
+import {ReactNode} from "react";
+
+
+export interface DataTableBodyProps <T extends { id: number | string }> {
+    item: T;
+    columns: Column<T>[];
+    entity?: Entity;
+    actionMenu?: ActionMenu<T>;
+    formFields?: FormField[];
+    updateData?: (id: string | number, values: Partial<T>) => void;
+    renderMenuIcon?: () => ReactNode;
+}

package/src/types/data-table-header-props.d.ts

@@ -0,0 +1,11 @@
+import {Column} from "./column";
+import {SortDirection, SortState} from "./sort-state";
+import {ReactNode} from "react";
+
+export interface DataTableHeaderProps<T extends { id: string | number }>{
+    columns: Column<T>[];
+    onSort: (sort: SortState | null) => void;
+    sortValue?: SortState | null;
+    hasActionMenu: boolean;
+    renderSortIcon?: (direction: SortDirection, active: boolean) => ReactNode,
+}

package/src/types/data-table-props.d.ts

@@ -0,0 +1,32 @@
+import {CSSProperties, ReactNode} from "react";
+import {SortDirection, SortState} from "./sort-state";
+import {Column} from "./column";
+import {Entity} from "./entity";
+import {ActionMenu} from "./action-menu";
+import {FormField} from "./form-field";
+import {PaginationMeta} from "./pagination-meta";
+
+export type Color = 'default' | 'error' | 'success' | 'warning' | 'caution' | 'info';
+
+export interface DataTableProps<T extends { id: string | number }> {
+    columns: Column<T>[],
+    data: T[],
+    pagination?: PaginationMeta,
+    onPaginate?: (page: number) => void,
+    onSearch?: (query: string) => void,
+    onSort?: (sort: SortState | null) => void,
+    searchValue?: string,
+    sortValue?: SortState | null,
+    clientPageSize?: number | null,
+    clientSearchKeys?: (keyof T)[],
+    entity?: Entity,
+    actionMenu?: ActionMenu<T>,
+    renderMenuIcon?: () => ReactNode,
+    onUpdate?: (id: string | number, values: Partial<T>) => void,
+    formFields?: FormField[],
+    renderSortIcon?: (direction: SortDirection, active: boolean) => ReactNode,
+    emptyMessage?: string,
+    striped?: boolean,
+    hover?: boolean,
+    style?: CSSProperties,
+}

package/src/types/entity.d.ts

@@ -0,0 +1,4 @@
+export interface Entity {
+    name: string;
+    label: string;
+}

package/src/types/form-field.d.ts

@@ -0,0 +1,8 @@
+export type FormFieldType = 'text' | 'radio' | 'select';
+
+export interface FormField {
+    name: string;
+    type: FormFieldType;
+    options?: { label: string; value: string }[] | string[];
+    required?: boolean;
+}

package/src/types/index.ts

@@ -0,0 +1,11 @@
+export { DataTableProps } from "./data-table-props";
+export { DataTableHeaderProps } from "./data-table-header-props";
+export { ActionCellProps } from "./action-cell-props";
+export { TableCellProps } from "./table-cell-props";
+export { SortDirection, SortState } from "./sort-state";
+
+export { ActionMenuType, Action, ActionMenu } from "./action-menu";
+export { FormFieldType, FormField } from "./form-field";
+
+export { Column } from "./column";
+export { Entity } from "./entity";

package/src/types/pagination-meta.d.ts

@@ -0,0 +1,7 @@
+export interface PaginationMeta {
+    currentPage: number;
+    pageCount: number;
+    total: number;
+    from: number;
+    to: number;
+}

package/src/types/sort-state.d.ts

@@ -0,0 +1,6 @@
+export type SortDirection = 'asc' | 'desc';
+
+export interface SortState<T extends { id: string | number }> {
+    name: keyof T;
+    direction: SortDirection;
+}

package/src/types/table-cell-props.d.ts

@@ -0,0 +1,9 @@
+import {Column} from "./column";
+import {FormField} from "./form-field";
+
+export interface TableCellProps <T extends { id: string | number }> {
+    column: Column<T>;
+    item: T;
+    formFields?: FormField[];
+    updateData?: (id: string | number, values: Partial<T>) => void;
+}

package/src/types/use-data-table-props.d.ts

@@ -0,0 +1,14 @@
+import {SortState} from "./sort-state";
+import {PaginationMeta} from "./pagination-meta";
+
+export interface UseDataTableProps <T extends { id: number | string }>{
+    data: T[],
+    pagination?: PaginationMeta,
+    onSearch?: (query: string) => void,
+    onSort?: (sort: SortState | null) => void,
+    onPaginate?: (page: number) => void,
+    searchValue?: string,
+    sortValue?: SortState | null,
+    clientPageSize?: number | null,
+    clientSearchKeys?: (keyof T)[],
+}

package/src/types/use-data-table-return.d.ts

@@ -0,0 +1,14 @@
+import {SortState} from "./sort-state";
+import {PaginationMeta} from "./pagination-meta";
+
+export interface UseDataTableReturn <T extends { id: number | string }>{
+    pagedData: T[],
+    paginationMeta?: PaginationMeta,
+    showPagination: boolean,
+    showSearch: boolean,
+    handleSearch: (query: string) => void,
+    handleSort: (sort: SortState | null) => void,
+    handlePaginate: (page: number) => void,
+    currentSort?: SortState | null,
+    currentSearch?: string | null,
+}

package/src/utils/is-pill-value.ts

@@ -0,0 +1,7 @@
+import {Color} from "../types/data-table-props";
+
+export const isPillValue = (val: unknown): val is { label: string, status: Color } =>
+    typeof val === 'object' &&
+    val !== null &&
+    'status' in val &&
+    'label' in val;

package/src/utils/render-object.tsx

@@ -0,0 +1,18 @@
+import {EmptyCell} from "../components/cell-types/EmptyCell";
+
+export const renderObject = (obj: Record<string, unknown>) => {
+    const entries = Object.entries(obj);
+
+    if (!entries.length) return <EmptyCell />;
+
+    return (
+        <>
+            {entries.map(([key, val]) => (
+                <div key={key}>
+                    <span>{key}: </span>
+                    <span>{String(val)}</span>
+                </div>
+            ))}
+        </>
+    )
+}