@chumsinc/sortable-tables 2.1.2 → 3.0.0

package/src/Table.tsx

@@ -1,44 +1,49 @@
-import React, {TableHTMLAttributes} from 'react';
-import styled from "@emotion/styled";
-import type {DataTableProps} from "./types";
-import classNames from "classnames";
-
-export type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>
-
-const StyledTable = styled.table<StyledTableProps>`
-    --table-sticky-top: ${props => props.sticky ? '0' : undefined};
-
-    thead {
-        tr:nth-of-type(1) td,
-        tr:nth-of-type(1) th {
-            top: var(--table-sticky-top, unset);
-            position: ${props => props.sticky ? "sticky" : "unset"};
-            z-index: ${props => props.sticky ? 10 : "unset"};
-            background: ${props => props.sticky ? "linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))" : "unset"};
-        }
-    }
-`
-
-export default React.forwardRef<HTMLTableElement, StyledTableProps>(
-    function Table({
-                       sticky,
-                       responsive,
-                       children,
-                       className,
-                       ...rest
-                   }, ref) {
-        if (responsive) {
-            const _className = classNames(className, {
-                'table-responsive': responsive === true,
-                [`table-responsive-${responsive}`]: responsive !== true,
-            })
-            return (
-                <div className={_className}>
-                    <StyledTable ref={ref} {...rest}>{children}</StyledTable>
-                </div>
-            )
-        }
-        return (
-            <StyledTable className={className} sticky={sticky} ref={ref} {...rest}>{children}</StyledTable>
-        )
-    })
+import React, {type RefObject, type TableHTMLAttributes} from 'react';
+import styled from "@emotion/styled";
+import type {DataTableProps} from "./types";
+import clsx from "clsx";
+
+export interface StyledTableProps extends TableHTMLAttributes<HTMLTableElement>, Pick<DataTableProps, 'sticky' | 'responsive'> {
+    ref?: RefObject<HTMLTableElement>;
+}
+
+const StyledTable = styled.table<StyledTableProps>`
+    --table-sticky-top: ${props => props.sticky ? '0' : undefined};
+
+    thead {
+        tr:nth-of-type(1) td,
+        tr:nth-of-type(1) th {
+            top: var(--table-sticky-top, unset);
+            position: ${props => props.sticky ? "sticky" : "unset"};
+            z-index: ${props => props.sticky ? 10 : "unset"};
+            background: ${props => props.sticky ? "linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))" : "unset"};
+        }
+    }
+`
+
+
+export default function Table({
+                                  sticky,
+                                  responsive,
+                                  children,
+                                  className,
+                                  ref,
+                                  ...rest
+                              }: StyledTableProps) {
+    if (responsive) {
+        const _className = clsx(className, {
+            'table-responsive': responsive === true,
+            [`table-responsive-${responsive}`]: responsive !== true,
+        })
+        return (
+            <div className={_className}>
+                <StyledTable ref={ref} {...rest}>{children}</StyledTable>
+            </div>
+        )
+    }
+
+    return (
+        <StyledTable className={className} sticky={sticky} ref={ref} {...rest}>{children}</StyledTable>
+    )
+}
+

package/src/TablePagination.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import RowsPerPage from "./RowsPerPage";
-import classNames from "classnames";
 import type {TablePaginationProps} from "./types";
+import clsx from "clsx";
 
-function TablePagination({
+export default function TablePagination({
                              page,
                              rowsPerPage,
                              onChangePage,
@@ -20,10 +20,10 @@ function TablePagination({
     const last = Math.min(page * rowsPerPage + rowsPerPage, count);
     const lastPage = rowsPerPage === 0 ? 0 : Math.floor((count - 1) / rowsPerPage);
 
-    const buttonClassName = classNames("btn btn-link", {[`btn-${size}`]: !!size});
+    const buttonClassName = clsx("btn btn-link", {[`btn-${size}`]: !!size});
 
     return (
-        <div className={classNames("row g-3 justify-content-end", className)} {...rest}>
+        <div className={clsx("row g-3 justify-content-end", className)} {...rest}>
             {!!rowsPerPageProps && (
                 <div className="col-auto">
                     <RowsPerPage {...rowsPerPageProps} value={rowsPerPage} size={size}/>
@@ -67,6 +67,4 @@ function TablePagination({
         </div>
     )
 }
-
 TablePagination.displayname = 'TablePagination';
-export default TablePagination

package/src/index.tsx

@@ -1,29 +1,43 @@
-export {default as DataTable} from './DataTable';
+/* eslint-disable react-refresh/only-export-components */
+
+
+export {default as DataTable} from './StandaloneDataTable';
 export {default as DataTableRow} from './DataTableRow';
 export {default as DataTableTBody} from './DataTableTBody';
 export {default as DataTableTH} from './DataTableTH';
-export {default as SortableTable} from './SortableTable';
+export {default as StandaloneSortableTable} from './StandaloneSortableTable';
 export {default as SortableTableHead} from './SortableTableHead';
 export {default as SortableTableTH} from './SortableTableTH';
-export {default as RowsPerPage, defaultRowsPerPageValues} from './RowsPerPage';
+export {default as RowsPerPage} from './RowsPerPage';
 export {default as TablePagination} from './TablePagination';
+export {default as DataTableCols} from './DataTableCols'
+export {default as DataTableWithContext} from './DataTable'
+export {default as SortableTable} from './SortableTable'
+export {default as DataTableProvider} from './DataTableProvider'
+export {useField} from './useField'
+export {useTableFields} from './useTableFields'
+export {useTableSort} from './useTableSort'
+export {useTableContext} from './useTableContext'
+export {DataTableContext, type TableContextData} from './DataTableContext'
+export type {TableProviderProps} from './DataTableProvider'
 export type {
-    DataTableHeadProps,
+    SortProps,
     DataTableField,
-    DataTableTHProps,
-    DataTableClassNames,
-    DataTableProps,
     SortableTableField,
+    DataTableColProps,
+    DataTableCellProps,
     DataTableRowProps,
     DataTableTBodyProps,
+    DataTableClassNames,
+    DataTableProps,
+    DataTableTHProps,
+    RowsPerPageProps,
     SortableTableTHProps,
     SortableTableHeadProps,
-    SortProps,
     SortableTableProps,
-    UISize,
-    UIFlexAlign,
     TablePaginationProps,
-    RowsPerPageProps,
     UITableSize,
-    DataTableCellProps
+    UISize,
+    UIFlexAlign
 } from './types';
+

package/src/types.ts

@@ -1,128 +1,127 @@
-import React, {type HTMLAttributes, type  MouseEvent, type  ReactNode, type  TableHTMLAttributes} from 'react'
-import {Argument} from "classnames";
-
-
-export interface SortProps<T = unknown> {
-    field: keyof T;
-    ascending: boolean;
-}
-
-export type UISize = 'sm' | 'lg' | '';
-export type UITableSize = UISize | 'xs';
-
-export type DataTableClassNames<T = unknown> =
-    string
-    | Argument
-    | ((row: T) => (string | Argument));
-
-
-export type UIFlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-
-export interface DataTableField<T = unknown> {
-    id?: number | string;
-    field: keyof T;
-    title: ReactNode;
-    as?: 'td' | 'th';
-    align?: 'start' | 'center' | 'end';
-    render?: (row: T) => ReactNode;
-    className?: DataTableClassNames<T>;
-    colSpan?: number;
-    thProps?: Omit<DataTableTHProps<T>, 'field'>;
-    cellProps?: TableHTMLAttributes<HTMLTableCellElement>
-}
-
-export interface SortableTableField<T = unknown> extends DataTableField<T> {
-    sortable?: boolean;
-}
-
-export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTableElement> {
-    fields: DataTableField<T>[];
-    data: T[];
-    keyField: keyof T | ((row: T) => string | number);
-    size?: UITableSize;
-    sticky?: boolean;
-    responsive?: boolean | "sm" | "md" | "lg" | "xl" | 'xxl';
-    rowClassName?: DataTableClassNames<T>;
-    renderRow?: (row: T) => React.ReactNode;
-    onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
-    selected?: string | number | ((row: T) => boolean);
-    tfoot?: React.ReactElement<HTMLTableSectionElement>;
-    tableHeadProps?: DataTableHeadProps<T>;
-    children?: ReactNode;
-}
-
-export interface DataTableCellProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableCellElement>, 'className'> {
-    field: DataTableField<T>;
-    row: T;
-    as?: 'td' | 'th',
-    className?: string | Argument;
-    children?: React.ReactNode;
-}
-
-export interface DataTableTHProps<T = unknown> extends Omit<DataTableCellProps<T>, 'row'> {
-    as?: 'th',
-}
-
-export interface DataTableHeadProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
-    fields: DataTableField<T>[];
-}
-
-export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
-    fields: DataTableField<T>[];
-    data: T[];
-    keyField: keyof T | ((row: T) => string | number);
-    rowClassName?: DataTableClassNames<T>;
-    renderRow?: (row: T) => React.ReactNode;
-    onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
-    selected?: string | number | ((row: T) => boolean);
-    children?: ReactNode;
-}
-
-export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
-    rowClassName?: string | Argument | ((row: T) => string | Argument);
-    selected?: boolean;
-    fields: DataTableField<T>[];
-    row: T;
-    trRef?: React.Ref<HTMLTableRowElement>;
-    onClick?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
-}
-
-export interface SortableTableProps<T = unknown> extends DataTableProps<T> {
-    fields: SortableTableField<T>[];
-    currentSort: SortProps<T>;
-    onChangeSort: (sort: SortProps<T>) => void;
-}
-
-export interface SortableTableHeadProps<T = unknown> extends DataTableHeadProps<T> {
-    currentSort: SortProps<T>;
-    fields: SortableTableField<T>[];
-    onChangeSort: (sort: SortProps<T>) => void;
-}
-
-export interface SortableTableTHProps<T = unknown> extends Omit<DataTableTHProps<T>, 'onClick'> {
-    field: SortableTableField<T>;
-    sorted?: boolean;
-    ascending?: boolean;
-    onClick: (sort: SortProps<T>) => void;
-}
-
-export interface RowsPerPageProps extends Omit<HTMLAttributes<HTMLSelectElement>, 'onChange'> {
-    value: number;
-    pageValues?: number[];
-    label?: string | React.ReactNode;
-    size?: UISize;
-    className?: string;
-    onChange: (value: number) => void;
-}
-
-export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
-    page: number;
-    rowsPerPage: number;
-    onChangePage: (page: number) => void;
-    count: number;
-    size?: UISize;
-    showFirst?: boolean;
-    showLast?: boolean;
-    rowsPerPageProps?: Omit<RowsPerPageProps, 'value'>;
-}
-
+import React, {type HTMLAttributes, type  MouseEvent, type  ReactNode, type  TableHTMLAttributes} from 'react'
+import type {ClassValue} from "clsx";
+
+
+export interface SortProps<T = unknown> {
+    field: keyof T;
+    ascending: boolean;
+}
+
+export type UISize = 'sm' | 'lg' | '';
+export type UITableSize = UISize | 'xs';
+
+export type DataTableClassNames<T = unknown> =
+    string
+    | ClassValue
+    | ((row: T) => (string | ClassValue));
+
+
+export type UIFlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
+export interface DataTableField<T = unknown> {
+    id?: keyof T | (number & {}) | (string & {});
+    field: keyof T;
+    title: ReactNode;
+    as?: 'td' | 'th';
+    align?: 'start' | 'center' | 'end';
+    render?: (row: T) => ReactNode;
+    className?: DataTableClassNames<T>;
+    colSpan?: number;
+    thProps?: Omit<DataTableTHProps<T>, 'field'>;
+    cellProps?: TableHTMLAttributes<HTMLTableCellElement>;
+    visible?: boolean;
+    colClassName?: string;
+    sortable?: boolean;
+}
+
+export type SortableTableField<T = unknown> = DataTableField<T>;
+
+export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTableElement> {
+    fields: DataTableField<T>[];
+    data: T[];
+    keyField: keyof T | ((row: T) => string | number);
+    size?: UITableSize;
+    sticky?: boolean;
+    responsive?: boolean | "sm" | "md" | "lg" | "xl" | 'xxl';
+    rowClassName?: DataTableClassNames<T>;
+    renderRow?: (row: T) => React.ReactNode;
+    onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
+    selected?: string | number | ((row: T) => boolean);
+    tfoot?: React.ReactElement<HTMLTableSectionElement>;
+    tableHeadProps?: TableHTMLAttributes<HTMLTableSectionElement>;
+    children?: ReactNode;
+}
+
+export interface DataTableCellProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableCellElement>, 'className'> {
+    field: DataTableField<T>;
+    row: T;
+    as?: 'td' | 'th',
+    className?: string | ClassValue;
+    children?: React.ReactNode;
+}
+
+export interface DataTableTHProps<T = unknown> extends Omit<DataTableCellProps<T>, 'row'> {
+    as?: 'th',
+}
+
+export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
+    data: T[];
+    keyField: keyof T | ((row: T) => string | number);
+    rowClassName?: DataTableClassNames<T>;
+    renderRow?: (row: T) => React.ReactNode;
+    onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
+    selected?: string | number | ((row: T) => boolean);
+    children?: ReactNode;
+}
+
+export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
+    rowClassName?: string | ClassValue | ((row: T) => string | ClassValue);
+    selected?: boolean;
+    row: T;
+    trRef?: React.Ref<HTMLTableRowElement>;
+    onClick?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
+}
+
+export interface SortableTableProps<T = unknown> extends DataTableProps<T> {
+    fields: DataTableField<T>[];
+    currentSort: SortProps<T>;
+    onChangeSort: (sort: SortProps<T>) => void;
+}
+
+export interface SortableTableHeadProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
+    fields: DataTableField<T>[];
+    currentSort: SortProps<T>|null;
+    onChangeSort: (sort: SortProps<T>) => void;
+}
+
+export interface SortableTableTHProps<T = unknown> extends Omit<DataTableTHProps<T>, 'onClick'> {
+    field: DataTableField<T>;
+    sorted?: boolean;
+    ascending?: boolean;
+    onClick: (sort: SortProps<T>) => void;
+}
+
+export interface RowsPerPageProps extends Omit<HTMLAttributes<HTMLSelectElement>, 'onChange'> {
+    value: number;
+    pageValues?: number[];
+    label?: string | React.ReactNode;
+    size?: UISize;
+    className?: string;
+    onChange: (value: number) => void;
+}
+
+export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
+    page: number;
+    rowsPerPage: number;
+    onChangePage: (page: number) => void;
+    count: number;
+    size?: UISize;
+    showFirst?: boolean;
+    showLast?: boolean;
+    rowsPerPageProps?: Omit<RowsPerPageProps, 'value'>;
+}
+
+
+export interface DataTableColProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
+    fields: DataTableField<T>[];
+}

package/src/useField.ts

@@ -0,0 +1,19 @@
+import type {DataTableField} from "./types";
+import {useContext} from "react";
+import {DataTableContext, type TableContextData} from "./DataTableContext";
+
+export type UseFieldArg<T = unknown> = keyof T & ((string | number) & {})
+export function useField<T = unknown>(key: UseFieldArg<T>): [
+    field:DataTableField<T>|null,
+    updateField: (key: string|number, arg: Partial<DataTableField<T>>) => void
+] {
+    const context = useContext(DataTableContext) as TableContextData<T>;
+    if (!context) {
+        throw new Error('useField must be used within a DataTableProvider');
+    }
+
+    return [
+        context.fields.find(field => field.id === key) ?? null,
+        context.updateField,
+    ]
+}

package/src/useTableContext.ts

@@ -0,0 +1,10 @@
+import {useContext} from "react";
+import {DataTableContext, type TableContextData} from "./DataTableContext";
+
+export function useTableContext<T = unknown>():TableContextData<T> {
+    const context = useContext(DataTableContext) as TableContextData<T>;
+    if (!context) {
+        throw new Error('useTableContext must be used within a DataTableProvider');
+    }
+    return context;
+}

package/src/useTableFields.ts

@@ -0,0 +1,20 @@
+import {useContext} from "react";
+import {DataTableContext, type TableContextData} from "./DataTableContext";
+
+/**
+ * Returns a tuple containing the fields and a function to update them.
+ * @returns [fields, setFields]
+ */
+export function useTableFields<T = unknown>(): [
+    fields: TableContextData<T>['fields'],
+    setFields: TableContextData<T>['setFields']
+] {
+    const context = useContext(DataTableContext) as TableContextData<T>;
+    if (!context) {
+        throw new Error('useTableContext must be used within a DataTableProvider');
+    }
+    return [
+        context.fields,
+        context.setFields
+    ];
+}

package/src/useTableSort.ts

@@ -0,0 +1,20 @@
+import {useContext} from "react";
+import {DataTableContext, type TableContextData} from "./DataTableContext";
+
+/**
+ * Returns a tuple containing the currentSort and a function to update the sort.
+ * @returns [sort, setSort]
+ */
+export function useTableSort<T = unknown>(): [
+    sort: TableContextData<T>['sort'],
+    setSort: TableContextData<T>['setSort']
+] {
+    const context = useContext(DataTableContext) as TableContextData<T>;
+    if (!context) {
+        throw new Error('useTableSort must be used within a DataTableProvider');
+    }
+    return [
+        context.sort,
+        context.setSort
+    ];
+}

package/test/Main.tsx

@@ -0,0 +1,37 @@
+import {useId, useState} from "react";
+import {DataTableProvider, type SortProps, StandaloneSortableTable} from "../src";
+import {type ProductLine, productLines, productLineSorter} from "./data";
+import {tableFields} from "./tableFields";
+import TestTable from "./TestTable";
+
+export default function Main() {
+    const initialSort: SortProps<ProductLine> = {field: 'ProductLine', ascending: true};
+    const [list, setList] = useState<ProductLine[]>([...productLines].sort(productLineSorter(initialSort)));
+    const [sort, setSort] = useState<SortProps<ProductLine>>(initialSort);
+    const [withProvider, setWithProvider] = useState(true);
+    const idProviderCheckbox = useId();
+
+    const sortChangeHandler = (sort: SortProps<ProductLine>) => {
+        setList([...productLines.sort(productLineSorter(sort))])
+        setSort(sort);
+    }
+
+    return (
+        <div>
+            <div className="form-check form-check-inline">
+                <input className="form-check-input" type="checkbox" id={idProviderCheckbox} checked={withProvider}
+                       onChange={e => setWithProvider(e.target.checked)}/>
+                <label className="form-check-label" htmlFor={idProviderCheckbox}>With DataTableProvider</label>
+            </div>
+            {withProvider && (
+                <DataTableProvider initialFields={tableFields} initialSort={initialSort}>
+                    <TestTable data={list} onChangeSort={sortChangeHandler}/>
+                </DataTableProvider>
+            )}
+            {!withProvider && <StandaloneSortableTable fields={tableFields.map(f => ({...f, visible: true}))} data={list}
+                                                       keyField={(row) => row.ProductLine}
+                                                       currentSort={sort} onChangeSort={sortChangeHandler}/>
+            }
+        </div>
+    )
+}

package/test/TableColumnsHandler.tsx

@@ -0,0 +1,28 @@
+import {useTableContext} from "../src";
+import React, {useCallback, useId} from "react";
+import type {ProductLine} from "./data";
+
+export default function TableColumnsHandler() {
+    const {updateField, getField} = useTableContext<ProductLine>();
+    const [visible, setVisible] = React.useState<boolean>(getField('ProductLineDesc')?.visible ?? true);
+    // const {sort} = useTableSort();
+    const id = useId();
+
+    const toggleFieldCollapse = useCallback((key: string, next: boolean) => {
+        console.debug('toggleFieldVisibility', key, next);
+        updateField(key, {visible: next})
+        setVisible(next);
+    }, [updateField]);
+
+    const handleVisibleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+        toggleFieldCollapse('ProductLineDesc', ev.target.checked);
+    }
+
+    return (
+        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: '1rem'}}>
+            <input type="checkbox" checked={visible} id={id} onChange={handleVisibleChange}/>
+            <label htmlFor={id}>Show Description</label>
+            {/*<code>{JSON.stringify(sort)}</code>*/}
+        </div>
+    )
+}