@chumsinc/sortable-tables 2.1.2 → 3.0.0

package/src/DataTableCell.tsx

@@ -1,28 +1,33 @@
-import React, {ReactNode} from 'react';
-import type {DataTableCellProps} from "./types";
-import classNames from "classnames";
-
-export default function DataTableCell<T = unknown>({field, row, className, as, ...rest}:DataTableCellProps<T>) {
-    const cellClassName = classNames(
-        {[`text-${field.align}`]: !!field.align},
-        className,
-        typeof field.className === 'function' ? field.className(row) : field.className
-    );
-    return React.createElement(
-        (as ?? field.as) ?? 'td',
-        {
-            className: cellClassName,
-            scope: (as ?? field.as) === 'th' ? 'row' : undefined,
-            colSpan: field.colSpan,
-            ...field.cellProps,
-            ...rest
-        },
-        (row[field.field] === undefined && !field.render)
-            ? null
-            : (
-                typeof field.render === 'function'
-                    ? field.render(row)
-                    : row[field.field] as ReactNode
-            )
-    )
-}
+import {createElement, type ReactNode} from 'react';
+import type {DataTableCellProps} from "./types";
+import clsx from "clsx";
+
+
+export default function DataTableCell<T = unknown>({field, row, className, as, ...rest}: DataTableCellProps<T>) {
+    if (field.visible === false) {
+        return null;
+    }
+    const cellClassName = clsx(
+        {[`text-${field.align}`]: !!field.align},
+        className,
+        typeof field.className === 'function' ? field.className(row) : field.className
+    );
+    return createElement(
+        (as ?? field.as) ?? 'td',
+        {
+            className: cellClassName,
+            scope: (as ?? field.as) === 'th' ? 'row' : undefined,
+            colSpan: field.colSpan,
+            ...field.cellProps,
+            ...rest
+        },
+        (row[field.field] === undefined && !field.render)
+            ? null
+            : (
+                typeof field.render === 'function'
+                    ? field.render(row)
+                    : row[field.field] as ReactNode
+            )
+    )
+}
+DataTableCell.displayName = 'DataTableCell';

package/src/DataTableCols.tsx

@@ -0,0 +1,18 @@
+import {useTableFields} from "./useTableFields";
+
+export default function DataTableCols<T = unknown>() {
+    const [fields] = useTableFields<T>()
+    return (
+        <colgroup>
+            {fields
+                .filter(field => field.visible !== false)
+                .map((field, index) => (
+                    <col key={index}
+                         className={field.colClassName}
+                         span={field.colSpan ?? 1}/>
+                ))}
+        </colgroup>
+    )
+}
+DataTableCols.displayName = 'DataTableCols';
+

package/src/DataTableContext.ts

@@ -0,0 +1,13 @@
+import {createContext} from "react";
+import type {DataTableField, SortProps} from "./types";
+
+export interface TableContextData<T = unknown> {
+    fields: DataTableField<T>[];
+    setFields: (next: DataTableField<T>[] | ((prev: DataTableField<T>[]) => DataTableField<T>[])) => void;
+    sort: SortProps<T>|null;
+    setSort: (next: SortProps<T> | null | ((prev:SortProps<T>|null) => SortProps<T>|null )) => void;
+    getField: (key: string | number) => DataTableField<T> | undefined;
+    updateField: (key: string | number, arg: Partial<DataTableField<T>>) => void;
+}
+
+export const DataTableContext = createContext<TableContextData<unknown> | null>(null)

package/src/DataTableHead.tsx

@@ -1,18 +1,20 @@
-import React from "react";
+import React, {type TableHTMLAttributes} from "react";
 import DataTableTH from "./DataTableTH";
-import classNames from "classnames";
-import type {DataTableHeadProps} from "./types";
+import clsx from "clsx";
+import {useTableFields} from "./useTableFields";
 
 
-function DataTableHead<T = unknown>({fields, ...rest}: DataTableHeadProps<T>) {
+export default function DataTableHead<T = unknown>({...rest}: TableHTMLAttributes<HTMLTableSectionElement>) {
+    const [fields] = useTableFields<T>()
     return (
         <thead {...rest}>
         <tr>
-            {fields.map((field, index) => (
-                <DataTableTH key={field.id ?? index}
+            {fields
+                .map((field, index) => (
+                <DataTableTH key={String(field.id ?? index)}
                              {...field.thProps}
                              field={field}
-                             className={classNames(
+                             className={clsx(
                                  typeof field.className === 'function'
                                      ? {[`text-${field.align}`]: !!field.align}
                                      : field.className
@@ -22,6 +24,4 @@ function DataTableHead<T = unknown>({fields, ...rest}: DataTableHeadProps<T>) {
         </thead>
     )
 }
-
 DataTableHead.displayName = 'DataTableHead';
-export default DataTableHead;

package/src/DataTableProvider.tsx

@@ -0,0 +1,62 @@
+import {type ReactNode, useCallback, useMemo, useState} from "react";
+import type {DataTableField, SortProps} from "./types";
+import {DataTableContext, type TableContextData} from "./DataTableContext";
+
+export interface TableProviderProps<T = unknown> {
+    initialFields: DataTableField<T>[];
+    initialSort?: SortProps<T>|null;
+    children: ReactNode;
+}
+
+export default function DataTableProvider<T = unknown>({
+                                                           children,
+                                                           initialFields = [],
+                                                           initialSort = null,
+                                                       }: TableProviderProps<T>) {
+    const [fields, setFieldsState] = useState<DataTableField<T>[]>(initialFields);
+    const [sort, setProviderSort] = useState<SortProps<T> | null>(initialSort);
+
+    const setFields = useCallback(
+        (fields: DataTableField<T>[] | ((prev: DataTableField<T>[]) => DataTableField<T>[])) => {
+            setFieldsState(fields)
+        }, []);
+
+    const setSort = useCallback(
+        (sort: SortProps<T> | null | ((sort:SortProps<T>|null) => SortProps<T> | null)) => {
+            setProviderSort(sort)
+        }, [])
+
+
+    const updateField = useCallback((key: string | number, arg: Partial<DataTableField<T>>) => {
+        const nextState = fields.map(field => {
+            if (field.id === key) {
+                return {...field, ...arg}
+            }
+            return field;
+        });
+        setFieldsState(nextState);
+    }, [fields])
+
+    const getField = useCallback((key: string | number) => fields.find(field => field.id === key), [fields]);
+
+
+    const value = useMemo<TableContextData<T>>(
+        () => ({
+            fields,
+            setFields,
+            sort,
+            setSort,
+            getField,
+            updateField
+        }),
+        [fields, setFields, sort, setSort, updateField, getField]
+    )
+
+    return (
+        <DataTableContext.Provider value={value as unknown as TableContextData<unknown>}>
+            {children}
+        </DataTableContext.Provider>
+    )
+}
+DataTableProvider.displayName = 'DataTableProvider';
+

package/src/DataTableRow.tsx

@@ -1,19 +1,20 @@
-import React, {MouseEvent} from 'react';
-import classNames from "classnames";
+import React, {type MouseEvent} from 'react';
 import type {DataTableRowProps} from "./types";
 import DataTableCell from "./DataTableCell";
+import clsx from "clsx";
+import {useTableFields} from "./useTableFields";
 
 
-function DataTableRow<T = unknown>({
+export default function DataTableRow<T = unknown>({
                                        className,
                                        rowClassName,
                                        selected,
-                                       fields,
                                        row,
                                        trRef,
                                        onClick,
                                        ...rest
                                    }: DataTableRowProps<T>) {
+    const [fields] = useTableFields<T>()
     const clickHandler = (ev: MouseEvent<HTMLTableRowElement>) => {
         onClick?.(row, ev)
     }
@@ -25,13 +26,14 @@ function DataTableRow<T = unknown>({
 
     return (
         <tr ref={trRef}
-            className={classNames({'table-active': selected}, className, _className)}
+            className={clsx({'table-active': selected}, className, _className)}
             onClick={clickHandler}
             {...rest}>
-            {fields.map((field, index) => (<DataTableCell key={index} field={field} row={row}/>))}
+            {fields
+                .map((field, index) => (
+                    <DataTableCell key={String(field?.id ?? index)} field={field} row={row}/>
+                ))}
         </tr>
     )
 }
-
 DataTableRow.displayName = 'DataTableRow';
-export default DataTableRow;

package/src/DataTableTBody.tsx

@@ -3,8 +3,7 @@ import DataTableRow from "./DataTableRow";
 import type {DataTableTBodyProps} from "./types";
 
 
-function DataTableTBody<T = unknown>({
-                                         fields,
+export default function DataTableTBody<T = unknown>({
                                          data,
                                          keyField,
                                          rowClassName,
@@ -25,7 +24,6 @@ function DataTableTBody<T = unknown>({
             return (
                 <DataTableRow key={keyValue} onClick={onSelectRow}
                               rowClassName={rowClassName}
-                              fields={fields}
                               row={row} selected={isSelected}/>
             )
         })}
@@ -33,6 +31,4 @@ function DataTableTBody<T = unknown>({
         </tbody>
     )
 }
-
 DataTableTBody.displayName = 'DataTableTBody';
-export default DataTableTBody

package/src/DataTableTH.tsx

@@ -1,15 +1,18 @@
 import React from "react";
-import classNames from "classnames";
 import type {DataTableTHProps} from "./types";
+import clsx from "clsx";
 
 
-function DataTableTH<T = unknown>({
-                                                     field,
-                                                     className,
-                                                     children,
-                                                     ...rest
-                                                 }: DataTableTHProps<T>) {
-    const thClassName = classNames({[`text-${field.align}`]: !!field.align}, className);
+export default function DataTableTH<T = unknown>({
+                                      field,
+                                      className,
+                                      children,
+                                      ...rest
+                                  }: DataTableTHProps<T>) {
+    if (field.visible === false) {
+        return null;
+    }
+    const thClassName = clsx({[`text-${field.align}`]: !!field.align}, className);
     return (
         <th className={thClassName} scope="col" {...rest}>
             {children ?? field.title}
@@ -17,4 +20,3 @@ function DataTableTH<T = unknown>({
     )
 }
 DataTableTH.displayName = 'DataTableTH';
-export default DataTableTH;

package/src/RowsPerPage.tsx

@@ -1,11 +1,10 @@
-import React, {ChangeEvent, useId} from 'react';
-import classNames from "classnames";
+import React, {type ChangeEvent, useId} from 'react';
 import type {RowsPerPageProps} from "./types";
+import clsx from "clsx";
 
-export const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];
+const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];
 
-
-function RowsPerPage({
+export default function RowsPerPage({
                          value,
                          pageValues = defaultRowsPerPageValues,
                          size,
@@ -16,8 +15,8 @@ function RowsPerPage({
                      }: RowsPerPageProps) {
     const id = useId();
     const changeHandler = (ev: ChangeEvent<HTMLSelectElement>) => onChange(Number(ev.target.value));
-    const selectClassName = className ?? classNames('form-select', {[`form-select-${size}`]: !!size});
-    const inputGroupClassName = classNames('input-group', {
+    const selectClassName = className ?? clsx('form-select', {[`form-select-${size}`]: !!size});
+    const inputGroupClassName = clsx('input-group', {
         [`input-group-${size}`]: !!size,
     })
 
@@ -33,6 +32,4 @@ function RowsPerPage({
         </div>
     )
 }
-
 RowsPerPage.displayName = 'RowsPerPage';
-export default RowsPerPage;

package/src/SortableTable.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import classNames from "classnames";
-import SortableTableHead from "./SortableTableHead";
-import DataTableTBody from "./DataTableTBody";
 import type {SortableTableProps} from "./types";
+import clsx from "clsx";
 import Table from "./Table";
+import {DataTableCols, DataTableTBody} from "./index";
+import React from "react";
+import SortableTableHeadWrapper from "./SortableTableHeadWrapper";
 
-
-function SortableTable<T = unknown>({
-                                        fields,
-                                        data,
-                                        currentSort,
-                                        onChangeSort,
-                                        keyField,
-                                        size = '',
-                                        sticky,
-                                        rowClassName,
-                                        renderRow,
-                                        onSelectRow,
-                                        selected = '',
-                                        className = '',
-                                        tfoot,
-                                        children,
-                                        ...rest
-                                    }: SortableTableProps<T>) {
-    const tableClassName = classNames('table', className, {
+export default function SortableTable<T = unknown>({
+                                                       className,
+                                                       size,
+                                                       responsive,
+                                                       sticky,
+                                                       data,
+                                                       keyField,
+                                                       rowClassName,
+                                                       renderRow,
+                                                       onSelectRow,
+                                                       selected,
+                                                       tableHeadProps,
+                                                       children,
+                                                       tfoot,
+                                                       onChangeSort,
+                                                       ...rest
+                                                   }: Omit<SortableTableProps<T>, 'fields' | 'currentSort'>) {
+    const tableClassName = clsx('table', className, {
         [`table-${size}`]: !!size,
     })
 
     return (
-        <Table className={tableClassName} sticky={sticky} {...rest}>
-            <SortableTableHead currentSort={currentSort} fields={fields} onChangeSort={onChangeSort}/>
+        <Table className={tableClassName} responsive={responsive} sticky={sticky} {...rest}>
+            <DataTableCols/>
+            <SortableTableHeadWrapper onChangeSort={onChangeSort} {...tableHeadProps}/>
             {!!data.length && (
-                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}
+                <DataTableTBody data={data} keyField={keyField} rowClassName={rowClassName}
                                 renderRow={renderRow}
                                 onSelectRow={onSelectRow} selected={selected}/>
             )}
@@ -40,6 +40,4 @@ function SortableTable<T = unknown>({
         </Table>
     )
 }
-
 SortableTable.displayName = 'SortableTable';
-export default SortableTable;

package/src/SortableTableHead.tsx

@@ -1,26 +1,27 @@
 import React from "react";
 import SortableTableTH from "./SortableTableTH";
-import classNames from "classnames";
 import type {SortableTableHeadProps} from "./types";
+import clsx from "clsx";
+import {useTableFields} from "./useTableFields";
+import {useTableSort} from "./useTableSort";
 
-
-function SortableTableHead<T = unknown>({
-                                                           currentSort,
-                                                           fields,
-                                                           onChangeSort,
-                                                       }: SortableTableHeadProps<T>) {
-    const {field, ascending} = currentSort;
+export default function SortableTableHead<T = unknown>({
+                                            onChangeSort,
+                                        }: SortableTableHeadProps<T>) {
+    const [fields] = useTableFields<T>()
+    const [sort] = useTableSort<T>();
     return (
         <thead>
         <tr>
-            {fields.map((tableField, index) => (
+            {fields
+                .map((tableField, index) => (
                 <SortableTableTH<T> key={index} field={tableField}
-                                 sorted={field === tableField.field} ascending={ascending}
-                                 className={classNames(
-                                typeof tableField.className === 'function'
-                                    ? {[`text-${tableField.align}`]: !!tableField.align}
-                                    : tableField.className
-                            )} onClick={onChangeSort}/>
+                                    sorted={sort?.field === tableField.field} ascending={sort?.ascending}
+                                    className={clsx(
+                                        typeof tableField.className === 'function'
+                                            ? {[`text-${tableField.align}`]: !!tableField.align}
+                                            : tableField.className
+                                    )} onClick={onChangeSort}/>
             ))}
         </tr>
         </thead>
@@ -28,4 +29,4 @@ function SortableTableHead<T = unknown>({
 }
 
 SortableTableHead.displayName = 'SortableTableHead';
-export default SortableTableHead;
+

package/src/SortableTableHeadWrapper.tsx

@@ -0,0 +1,20 @@
+import {useTableFields} from "./useTableFields";
+import {useTableSort} from "./useTableSort";
+import SortableTableHead from "./SortableTableHead";
+import type {SortProps} from "./types";
+
+export interface SortableTableHeadWrapperProps<T = unknown> {
+    onChangeSort: (sort: SortProps<T>) => void;
+}
+
+export default function SortableTableHeadWrapper<T = unknown>({
+                                                                  onChangeSort,
+                                                              }: SortableTableHeadWrapperProps<T>) {
+    const [fields] = useTableFields<T>()
+    const [sort] = useTableSort<T>();
+
+    return (
+        <SortableTableHead fields={fields} currentSort={sort} onChangeSort={onChangeSort} />
+    )
+}
+SortableTableHeadWrapper.displayName = 'SortableTableHeadWrapper';

package/src/SortableTableTH.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import classNames from "classnames";
 import DataTableTH from "./DataTableTH";
 import type {SortableTableTHProps, UIFlexAlign} from "./types";
 import styled from '@emotion/styled';
+import clsx from "clsx";
 
 const flexJustifyContent = (align?: UIFlexAlign) => {
     if (!align) {
@@ -25,30 +25,35 @@ const FieldTitle = styled.div<FieldTitleProps>`
     width: 100%;
     flex-direction: ${props => props.align === 'end' ? 'row-reverse' : 'row'};
     justify-content: ${props => flexJustifyContent(props.align)};
+
     .sort-icon {
         flex-grow: ${props => props.align === 'end' ? '1' : '0'};
         opacity: ${props => props.sorted ? 1 : 0};
     }
+
     &:hover .sort-icon {
-        color: ${props => props.sorted ? 'unset' : 'var(--bs-primary)'} ;
+        color: ${props => props.sorted ? 'unset' : 'var(--bs-primary)'};
         opacity: 0.75;
         transition: opacity 0.2s;
     }
 `
 
-function SortableTableTH<T = unknown>({
+export default function SortableTableTH<T = unknown>({
                                           field,
                                           sorted,
                                           ascending,
                                           className,
                                           onClick
                                       }: SortableTableTHProps<T>) {
+    if (field.visible === false) {
+        return null;
+    }
     if (!field.sortable) {
         return (<DataTableTH field={field} className={className}/>)
     }
 
     const {className: _thClassName, ...thProps} = field.thProps ?? {};
-    const thClassName = classNames(
+    const thClassName = clsx(
         className,
         _thClassName,
         {[`text-${field.align}`]: !!field.align}
@@ -64,14 +69,12 @@ function SortableTableTH<T = unknown>({
     }
 
     return (
-        <th {...thProps} className={classNames("sortable", thClassName)} scope="col" onClick={clickHandler}>
+        <th {...thProps} className={clsx("sortable", thClassName)} scope="col" onClick={clickHandler}>
             <FieldTitle sorted={sorted} align={field.align}>
                 <div className="field-title">{field.title}</div>
-                <div className={classNames('me-1 sort-icon', iconClassName)}/>
+                <div className={clsx('me-1 sort-icon', iconClassName)}/>
             </FieldTitle>
         </th>
     )
 }
-
 SortableTableTH.displayName = 'SortableTableTH';
-export default SortableTableTH;

package/src/StandaloneDataTable.tsx

@@ -0,0 +1,16 @@
+import type {DataTableProps} from "./types";
+import DataTableProvider from "./DataTableProvider";
+import DataTable from "./DataTable";
+
+
+export default function StandaloneDataTable<T = unknown>({
+                                    fields,
+                                    ...rest
+                                }: DataTableProps<T>) {
+    return (
+        <DataTableProvider initialFields={fields}>
+            <DataTable {...rest}/>
+        </DataTableProvider>
+    )
+}
+StandaloneDataTable.displayName = 'StandaloneDataTable';

package/src/StandaloneSortHelper.tsx

@@ -0,0 +1,15 @@
+import type {SortProps} from "./types";
+import {useTableSort} from "./useTableSort";
+import {useEffect} from "react";
+
+export interface StandaloneSortHelperProps<T = unknown> {
+    nextSort: SortProps<T>
+}
+export function StandaloneSortHelper<T = unknown>({nextSort}:StandaloneSortHelperProps<T>) {
+    const [, setNextSort] = useTableSort<T>();
+    useEffect(() => {
+        console.log('setNextSort', nextSort);
+        setNextSort(nextSort);
+    }, [nextSort, setNextSort]);
+    return null;
+}

package/src/StandaloneSortableTable.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type {SortableTableProps} from "./types";
+import DataTableProvider from "./DataTableProvider";
+import SortableTable from "./SortableTable";
+import {StandaloneSortHelper} from "./StandaloneSortHelper";
+
+
+export default function StandaloneSortableTable<T = unknown>({
+                                                                 fields,
+                                                                 currentSort,
+                                                                 ...rest
+                                                             }: SortableTableProps<T>) {
+    return (
+        <DataTableProvider initialFields={fields} initialSort={currentSort}>
+            <StandaloneSortHelper nextSort={currentSort} />
+            <SortableTable {...rest}/>
+        </DataTableProvider>
+    )
+}
+
+StandaloneSortableTable.displayName = 'StandaloneSortableTable';