@chumsinc/sortable-tables 2.1.2 → 2.2.0

package/src/SortableTable.tsx

@@ -1,43 +1,17 @@
 import React from 'react';
-import classNames from "classnames";
-import SortableTableHead from "./SortableTableHead";
-import DataTableTBody from "./DataTableTBody";
 import type {SortableTableProps} from "./types";
-import Table from "./Table";
+import TableProvider from "./TableProvider";
+import SortableTableWithContext from "./SortableTableWithContext";
 
 
 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, {
-        [`table-${size}`]: !!size,
-    })
-
     return (
-        <Table className={tableClassName} sticky={sticky} {...rest}>
-            <SortableTableHead currentSort={currentSort} fields={fields} onChangeSort={onChangeSort}/>
-            {!!data.length && (
-                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}
-                                renderRow={renderRow}
-                                onSelectRow={onSelectRow} selected={selected}/>
-            )}
-            {children}
-            {tfoot}
-        </Table>
+        <TableProvider initialFields={fields}>
+            <SortableTableWithContext {...rest}/>
+        </TableProvider>
     )
 }
 

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 "./TableProvider";
 
 
 function SortableTableHead<T = unknown>({
-                                                           currentSort,
-                                                           fields,
-                                                           onChangeSort,
-                                                       }: SortableTableHeadProps<T>) {
+                                            currentSort,
+                                            onChangeSort,
+                                        }: SortableTableHeadProps<T>) {
+    const fields = useTableFields<T>()
     const {field, ascending} = currentSort;
     return (
         <thead>
         <tr>
             {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={field === tableField.field} ascending={ascending}
+                                    className={clsx(
+                                        typeof tableField.className === 'function'
+                                            ? {[`text-${tableField.align}`]: !!tableField.align}
+                                            : tableField.className
+                                    )} onClick={onChangeSort}/>
             ))}
         </tr>
         </thead>

package/src/SortableTableTH.tsx

@@ -3,6 +3,7 @@ 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,12 +26,14 @@ 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;
     }
@@ -48,7 +51,7 @@ function SortableTableTH<T = unknown>({
     }
 
     const {className: _thClassName, ...thProps} = field.thProps ?? {};
-    const thClassName = classNames(
+    const thClassName = clsx(
         className,
         _thClassName,
         {[`text-${field.align}`]: !!field.align}
@@ -64,10 +67,10 @@ 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>
     )

package/src/SortableTableWithContext.tsx

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

package/src/Table.tsx

@@ -1,7 +1,7 @@
 import React, {TableHTMLAttributes} from 'react';
 import styled from "@emotion/styled";
 import type {DataTableProps} from "./types";
-import classNames from "classnames";
+import clsx from "clsx";
 
 export type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>
 
@@ -28,7 +28,7 @@ export default React.forwardRef<HTMLTableElement, StyledTableProps>(
                        ...rest
                    }, ref) {
         if (responsive) {
-            const _className = classNames(className, {
+            const _className = clsx(className, {
                 'table-responsive': responsive === true,
                 [`table-responsive-${responsive}`]: responsive !== true,
             })

package/src/TablePagination.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import RowsPerPage from "./RowsPerPage";
-import classNames from "classnames";
 import type {TablePaginationProps} from "./types";
+import clsx from "clsx";
 
 function TablePagination({
                              page,
@@ -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}/>

package/src/TableProvider.tsx

@@ -0,0 +1,77 @@
+import {createContext, ReactNode, useCallback, useContext, useMemo, useState} from "react";
+import {DataTableField} from "./types";
+
+/* eslint-disable react-refresh/only-export-components */
+
+export interface TableContextData<T = unknown> {
+    fields: DataTableField<T>[];
+    setFields: (next: DataTableField<T>[] | ((prev: DataTableField<T>[]) => DataTableField<T>[])) => void;
+    updateField: (key: string | number, arg: Partial<DataTableField<T>>) => void;
+    getField: (key: string | number) => DataTableField<T> | undefined;
+}
+
+const DataTableContext = createContext<TableContextData<unknown> | null>(null)
+
+export interface TableProviderProps<T = unknown> {
+    initialFields: DataTableField<T>[];
+    children: ReactNode;
+}
+
+export default function TableProvider<T = unknown>({children, initialFields = []}: TableProviderProps<T>) {
+    const [fields, setFieldsState] = useState<DataTableField<T>[]>(initialFields);
+
+    const setFields = useCallback((fields: DataTableField<T>[] | ((prev: DataTableField<T>[]) => DataTableField<T>[])) => {
+        setFieldsState(fields)
+    }, []);
+    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, updateField, getField
+        }),
+        [fields, setFields, updateField, getField]
+    )
+
+    return (
+        <DataTableContext.Provider value={value as unknown as TableContextData<unknown>}>
+            {children}
+        </DataTableContext.Provider>
+    )
+}
+
+
+export function useTableContext<T = unknown>() {
+    const context = useContext(DataTableContext) as TableContextData<T>;
+    if (!context) {
+        throw new Error('useTableContext must be used within a FieldsProvider');
+    }
+    return context;
+}
+
+export function useTableFields<T = unknown>() {
+    return useTableContext<T>().fields;
+}
+
+export function useField<T = unknown>(key: string | number): DataTableField<T> | null {
+    const context = useContext(DataTableContext) as TableContextData<T>;
+    if (!context) {
+        throw new Error('useTableContext must be used within a FieldsProvider');
+    }
+    const field = context.fields.find(field => field.id === key);
+    return field ?? null
+}
+
+export function useHasTableFieldsContext() {
+    return useContext(DataTableContext) !== null;
+}

package/src/index.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react-refresh/only-export-components */
+
 export {default as DataTable} from './DataTable';
 export {default as DataTableRow} from './DataTableRow';
 export {default as DataTableTBody} from './DataTableTBody';
@@ -5,10 +7,15 @@ export {default as DataTableTH} from './DataTableTH';
 export {default as SortableTable} from './SortableTable';
 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 './DataTableWithContext'
+export {default as SortableTableWithContext} from './SortableTableWithContext'
+export {default as DataTableProvider} from './TableProvider'
+export {useTableContext, useTableFields, useHasTableFieldsContext, useField} from './TableProvider'
+export type {TableContextData, TableProviderProps} from './TableProvider'
 export type {
-    DataTableHeadProps,
     DataTableField,
     DataTableTHProps,
     DataTableClassNames,
@@ -27,3 +34,4 @@ export type {
     UITableSize,
     DataTableCellProps
 } from './types';
+

package/src/types.ts

@@ -1,5 +1,5 @@
 import React, {type HTMLAttributes, type  MouseEvent, type  ReactNode, type  TableHTMLAttributes} from 'react'
-import {Argument} from "classnames";
+import type {ClassValue} from "clsx";
 
 
 export interface SortProps<T = unknown> {
@@ -12,8 +12,8 @@ export type UITableSize = UISize | 'xs';
 
 export type DataTableClassNames<T = unknown> =
     string
-    | Argument
-    | ((row: T) => (string | Argument));
+    | ClassValue
+    | ((row: T) => (string | ClassValue));
 
 
 export type UIFlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
@@ -28,13 +28,14 @@ export interface DataTableField<T = unknown> {
     className?: DataTableClassNames<T>;
     colSpan?: number;
     thProps?: Omit<DataTableTHProps<T>, 'field'>;
-    cellProps?: TableHTMLAttributes<HTMLTableCellElement>
-}
-
-export interface SortableTableField<T = unknown> extends DataTableField<T> {
+    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[];
@@ -47,7 +48,7 @@ export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTab
     onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
     selected?: string | number | ((row: T) => boolean);
     tfoot?: React.ReactElement<HTMLTableSectionElement>;
-    tableHeadProps?: DataTableHeadProps<T>;
+    tableHeadProps?: TableHTMLAttributes<HTMLTableSectionElement>;
     children?: ReactNode;
 }
 
@@ -55,7 +56,7 @@ export interface DataTableCellProps<T = unknown> extends Omit<TableHTMLAttribute
     field: DataTableField<T>;
     row: T;
     as?: 'td' | 'th',
-    className?: string | Argument;
+    className?: string | ClassValue;
     children?: React.ReactNode;
 }
 
@@ -63,12 +64,7 @@ export interface DataTableTHProps<T = unknown> extends Omit<DataTableCellProps<T
     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>;
@@ -79,28 +75,26 @@ export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HT
 }
 
 export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
-    rowClassName?: string | Argument | ((row: T) => string | Argument);
+    rowClassName?: string | ClassValue | ((row: T) => string | ClassValue);
     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>[];
+    fields: DataTableField<T>[];
     currentSort: SortProps<T>;
     onChangeSort: (sort: SortProps<T>) => void;
 }
 
-export interface SortableTableHeadProps<T = unknown> extends DataTableHeadProps<T> {
+export interface SortableTableHeadProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
     currentSort: SortProps<T>;
-    fields: SortableTableField<T>[];
     onChangeSort: (sort: SortProps<T>) => void;
 }
 
 export interface SortableTableTHProps<T = unknown> extends Omit<DataTableTHProps<T>, 'onClick'> {
-    field: SortableTableField<T>;
+    field: DataTableField<T>;
     sorted?: boolean;
     ascending?: boolean;
     onClick: (sort: SortProps<T>) => void;
@@ -126,3 +120,7 @@ export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
     rowsPerPageProps?: Omit<RowsPerPageProps, 'value'>;
 }
 
+
+export interface DataTableColProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
+    fields: DataTableField<T>[];
+}

package/test/TableColumnsHandler.tsx

@@ -0,0 +1,28 @@
+import {useTableContext, useTableSort} from "../src";
+import React, {useCallback, useId} from "react";
+import {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 id = useId();
+
+    const toggleFieldCollapse = useCallback((key: string, next: boolean) => {
+        console.debug('toggleFieldVisibility', key, next);
+        updateField(key, {collapse: next})
+        setCollapse(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={collapse} id={id} onChange={handleVisibleChange}/>
+            <label htmlFor={id}>Hide Description</label>
+            <code>{JSON.stringify(sort)}</code>
+        </div>
+    )
+}

package/test/TestTable.tsx

@@ -1,33 +1,12 @@
-import React, {useEffect, useState} from 'react';
-import {ProductLine, productLines, productLineSorter} from './data'
-import {SortableTable, SortableTableField, SortProps} from "../src";
+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 fields: SortableTableField<ProductLine>[] = [
-    {field: 'ProductLine', title: 'Prod Line', sortable: true, as: 'th'},
-    {field: 'ProductLineDesc', title: 'Description', sortable: true},
-    {
-        field: 'ProductType',
-        title: 'Description',
-        sortable: true,
-        render: (row) => <span className="badge bg-info">{row.ProductType}</span>,
-        align: 'center'
-    },
-    {
-        field: 'Valuation',
-        title: 'Valuation',
-        sortable: true,
-        render: (row) => <span className="badge bg-secondary">{row.Valuation}</span>,
-        align: 'center'
-    },
-    {
-        field: 'ExplodeKitItems',
-        title: 'Explode Kit Items?',
-        sortable: true,
-        render: (row) => <span className="badge bg-primary">{row.ExplodeKitItems}</span>,
-        align: 'end'
-    },
-]
 const rowClassName = (row: ProductLine) => row.active ? '' : 'table-warning';
 
 export default function TestTable() {
@@ -37,26 +16,25 @@ export default function TestTable() {
     const [rowsPerPage, setRowsPerPage] = useState(5);
 
 
-    useEffect(() => {
-        setList([...productLines.sort(productLineSorter(sort))]);
-        setPage(0)
-    }, [sort]);
-
     const rowsPerPageChangeHandler = (rpp: number) => {
         setPage(0);
         setRowsPerPage(rpp);
     }
 
+
     return (
         <div>
-            <SortableTable currentSort={sort} onChangeSort={setSort} fields={fields} size="lg" responsive
-                           data={list.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)}
-                           keyField="ProductLine" rowClassName={rowClassName}/>
+            <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" />,
+                                 label: <span className="bi-images"/>,
                                  pageValues: [5, 10, 15, 25, 50, 100]
                              }}
                              showFirst={list.length > rowsPerPage}

package/test/tableFields.tsx

@@ -0,0 +1,44 @@
+import {SortableTableField} from "../src";
+import {ProductLine} from "./data";
+import React from "react";
+
+export const tableFields: SortableTableField<ProductLine>[] = [
+    {
+        id: 'prodLine',
+        field: 'ProductLine',
+        title: 'Prod Line',
+        sortable: true,
+        as: 'th'
+    },
+    {
+        id: 'ProductLineDesc',
+        field: 'ProductLineDesc',
+        title: 'Description',
+        sortable: true,
+        collapse: true,
+    },
+    {
+        id: 'prodType',
+        field: 'ProductType',
+        title: 'Description',
+        sortable: true,
+        render: (row) => <span className="badge bg-info">{row.ProductType}</span>,
+        align: 'center'
+    },
+    {
+        id: 'valuation',
+        field: 'Valuation',
+        title: 'Valuation',
+        sortable: true,
+        render: (row) => <span className="badge bg-secondary">{row.Valuation}</span>,
+        align: 'center'
+    },
+    {
+        id: 'explodeKit',
+        field: 'ExplodeKitItems',
+        title: 'Explode Kit Items?',
+        sortable: true,
+        render: (row) => <span className="badge bg-primary">{row.ExplodeKitItems}</span>,
+        align: 'end'
+    },
+]

package/vite.config.ts

@@ -16,13 +16,12 @@ export default defineConfig({
             formats: ['es', 'cjs'],
         },
         rollupOptions: {
-            external: ['react', 'react/jsx-runtime', 'react-dom', 'classnames', '@emotion/styled'],
+            external: ['react', 'react/jsx-runtime', 'react-dom', '@emotion/styled'],
             output: {
                 globals:{
                     react: 'React',
                     'react-dom': 'ReactDOM',
                     'react/jsx-runtime': 'jsxRuntime',
-                    classnames: 'classNames',
                     '@emotion/styled': 'styled'
                 }
             }