@chumsinc/sortable-tables 2.2.0 → 3.0.0

package/src/types.ts

@@ -1,126 +1,127 @@
-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?: 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>;
-    collapse?: 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> {
-    currentSort: SortProps<T>;
-    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>[];
-}
+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

@@ -1,17 +1,17 @@
-import {useTableContext, useTableSort} from "../src";
+import {useTableContext} from "../src";
 import React, {useCallback, useId} from "react";
-import {ProductLine} from "./data";
+import type {ProductLine} from "./data";
 
 export default function TableColumnsHandler() {
     const {updateField, getField} = useTableContext<ProductLine>();
-    const [collapse, setCollapse] = React.useState<boolean>(getField('ProductLineDesc')?.collapse ?? false);
-    const {sort} = useTableSort();
+    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, {collapse: next})
-        setCollapse(next);
+        updateField(key, {visible: next})
+        setVisible(next);
     }, [updateField]);
 
     const handleVisibleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
@@ -20,9 +20,9 @@ export default function TableColumnsHandler() {
 
     return (
         <div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: '1rem'}}>
-            <input type="checkbox" checked={collapse} id={id} onChange={handleVisibleChange}/>
-            <label htmlFor={id}>Hide Description</label>
-            <code>{JSON.stringify(sort)}</code>
+            <input type="checkbox" checked={visible} id={id} onChange={handleVisibleChange}/>
+            <label htmlFor={id}>Show Description</label>
+            {/*<code>{JSON.stringify(sort)}</code>*/}
         </div>
     )
 }

package/test/TestTable.tsx

@@ -1,46 +1,51 @@
-import React, {useState} from 'react';
-import {ProductLine, productLines} from './data'
-import {SortableTableWithContext, SortProps} from "../src";
-import TablePagination from "../src/TablePagination";
-import TableProvider from "../src/TableProvider";
-import TableColumnsHandler from "./TableColumnsHandler";
-import {tableFields} from "./tableFields";
-
-
-const rowClassName = (row: ProductLine) => row.active ? '' : 'table-warning';
-
-export default function TestTable() {
-    const [sort, setSort] = useState<SortProps<ProductLine>>({field: 'ProductLine', ascending: true});
-    const [list, setList] = useState<ProductLine[]>(productLines);
-    const [page, setPage] = useState(0);
-    const [rowsPerPage, setRowsPerPage] = useState(5);
-
-
-    const rowsPerPageChangeHandler = (rpp: number) => {
-        setPage(0);
-        setRowsPerPage(rpp);
-    }
-
-
-    return (
-        <div>
-            <TableProvider initialFields={tableFields}>
-                <TableColumnsHandler/>
-                <SortableTableWithContext currentSort={sort} onChangeSort={setSort} size="lg" responsive
-                                          data={list.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)}
-                                          keyField="ProductLine" rowClassName={rowClassName}/>
-            </TableProvider>
-            <TablePagination page={page} onChangePage={setPage} size="sm"
-                             rowsPerPage={rowsPerPage}
-                             rowsPerPageProps={{
-                                 onChange: rowsPerPageChangeHandler,
-                                 label: <span className="bi-images"/>,
-                                 pageValues: [5, 10, 15, 25, 50, 100]
-                             }}
-                             showFirst={list.length > rowsPerPage}
-                             showLast={list.length > rowsPerPage}
-                             count={list.length}/>
-        </div>
-
-    )
-}
+import React, {useState} from 'react';
+import type {ProductLine} from './data'
+import {SortableTable, type SortProps, useTableSort} from "../src";
+import TablePagination from "../src/TablePagination";
+import TableColumnsHandler from "./TableColumnsHandler";
+
+
+const rowClassName = (row: ProductLine) => row.active ? '' : 'table-warning';
+
+export interface TestTableProps {
+    data: ProductLine[];
+    onChangeSort?: (sort: SortProps<ProductLine>) => void;
+}
+
+export default function TestTable({data, onChangeSort}: TestTableProps) {
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    const [, setSort] = useTableSort<ProductLine>();
+
+
+    const rowsPerPageChangeHandler = (rpp: number) => {
+        setPage(0);
+        setRowsPerPage(rpp);
+    }
+
+    const sortChangeHandler = (sort: SortProps<ProductLine>) => {
+        onChangeSort?.(sort);
+        setSort(sort);
+    }
+
+
+    return (
+        <div>
+            <TableColumnsHandler/>
+            <SortableTable onChangeSort={sortChangeHandler} size="lg" responsive
+                           data={data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)}
+                           keyField="ProductLine" rowClassName={rowClassName}/>
+            <TablePagination page={page} onChangePage={setPage} size="sm"
+                             rowsPerPage={rowsPerPage}
+                             rowsPerPageProps={{
+                                 onChange: rowsPerPageChangeHandler,
+                                 label: <span className="bi-images"/>,
+                                 pageValues: [5, 10, 15, 25, 50, 100]
+                             }}
+                             showFirst={data.length > rowsPerPage}
+                             showLast={data.length > rowsPerPage}
+                             count={data.length}/>
+        </div>
+
+    )
+}