@chumsinc/sortable-tables 2.2.0 → 3.0.0

package/src/DataTableCols.tsx

@@ -1,25 +1,18 @@
-import styled from "@emotion/styled";
-import clsx from "clsx";
-import {useTableFields} from "./TableProvider";
+import {useTableFields} from "./useTableFields";
 
-const TableCol = styled.col`
-    &.col-collapsed {
-        visibility: collapse;
-    }
-`
-
-function DataTableCols() {
-    const fields = useTableFields()
+export default function DataTableCols<T = unknown>() {
+    const [fields] = useTableFields<T>()
     return (
         <colgroup>
-            {fields.map((field, index) => (
-                <TableCol key={index}
-                          className={clsx(field.colClassName, {'col-collapsed': field.collapse})}
-                          span={field.colSpan ?? 1}/>
-            ))}
+            {fields
+                .filter(field => field.visible !== false)
+                .map((field, index) => (
+                    <col key={index}
+                         className={field.colClassName}
+                         span={field.colSpan ?? 1}/>
+                ))}
         </colgroup>
     )
 }
-
 DataTableCols.displayName = 'DataTableCols';
-export default 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,16 +1,17 @@
 import React, {type TableHTMLAttributes} from "react";
 import DataTableTH from "./DataTableTH";
 import clsx from "clsx";
-import {useTableFields} from "./TableProvider";
+import {useTableFields} from "./useTableFields";
 
 
-function DataTableHead<T = unknown>({...rest}: TableHTMLAttributes<HTMLTableSectionElement>) {
-    const fields = useTableFields<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={clsx(
@@ -23,6 +24,4 @@ function DataTableHead<T = unknown>({...rest}: TableHTMLAttributes<HTMLTableSect
         </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,11 +1,11 @@
-import React, {MouseEvent} from 'react';
+import React, {type MouseEvent} from 'react';
 import type {DataTableRowProps} from "./types";
 import DataTableCell from "./DataTableCell";
 import clsx from "clsx";
-import {useTableFields} from "./TableProvider";
+import {useTableFields} from "./useTableFields";
 
 
-function DataTableRow<T = unknown>({
+export default function DataTableRow<T = unknown>({
                                        className,
                                        rowClassName,
                                        selected,
@@ -14,7 +14,7 @@ function DataTableRow<T = unknown>({
                                        onClick,
                                        ...rest
                                    }: DataTableRowProps<T>) {
-    const fields = useTableFields<T>()
+    const [fields] = useTableFields<T>()
     const clickHandler = (ev: MouseEvent<HTMLTableRowElement>) => {
         onClick?.(row, ev)
     }
@@ -29,10 +29,11 @@ function DataTableRow<T = unknown>({
             className={clsx({'table-active': selected}, className, _className)}
             onClick={clickHandler}
             {...rest}>
-            {fields.map((field, index) => (<DataTableCell key={field?.id ?? 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,7 +3,7 @@ import DataTableRow from "./DataTableRow";
 import type {DataTableTBodyProps} from "./types";
 
 
-function DataTableTBody<T = unknown>({
+export default function DataTableTBody<T = unknown>({
                                          data,
                                          keyField,
                                          rowClassName,
@@ -31,6 +31,4 @@ function DataTableTBody<T = unknown>({
         </tbody>
     )
 }
-
 DataTableTBody.displayName = 'DataTableTBody';
-export default DataTableTBody

package/src/DataTableTH.tsx

@@ -3,12 +3,15 @@ import type {DataTableTHProps} from "./types";
 import clsx from "clsx";
 
 
-function DataTableTH<T = unknown>({
+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}>
@@ -16,6 +19,4 @@ function DataTableTH<T = unknown>({
         </th>
     )
 }
-
 DataTableTH.displayName = 'DataTableTH';
-export default DataTableTH;

package/src/RowsPerPage.tsx

@@ -1,10 +1,10 @@
-import React, {ChangeEvent, useId} from 'react';
+import React, {type ChangeEvent, useId} from 'react';
 import type {RowsPerPageProps} from "./types";
 import clsx from "clsx";
 
 const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];
 
-function RowsPerPage({
+export default function RowsPerPage({
                          value,
                          pageValues = defaultRowsPerPageValues,
                          size,
@@ -32,6 +32,4 @@ function RowsPerPage({
         </div>
     )
 }
-
 RowsPerPage.displayName = 'RowsPerPage';
-export default RowsPerPage;

package/src/SortableTable.tsx

@@ -1,19 +1,43 @@
-import React from 'react';
 import type {SortableTableProps} from "./types";
-import TableProvider from "./TableProvider";
-import SortableTableWithContext from "./SortableTableWithContext";
+import clsx from "clsx";
+import Table from "./Table";
+import {DataTableCols, DataTableTBody} from "./index";
+import React from "react";
+import SortableTableHeadWrapper from "./SortableTableHeadWrapper";
 
+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,
+    })
 
-function SortableTable<T = unknown>({
-                                        fields,
-                                        ...rest
-                                    }: SortableTableProps<T>) {
     return (
-        <TableProvider initialFields={fields}>
-            <SortableTableWithContext {...rest}/>
-        </TableProvider>
+        <Table className={tableClassName} responsive={responsive} sticky={sticky} {...rest}>
+            <DataTableCols/>
+            <SortableTableHeadWrapper onChangeSort={onChangeSort} {...tableHeadProps}/>
+            {!!data.length && (
+                <DataTableTBody data={data} keyField={keyField} rowClassName={rowClassName}
+                                renderRow={renderRow}
+                                onSelectRow={onSelectRow} selected={selected}/>
+            )}
+            {children}
+            {tfoot}
+        </Table>
     )
 }
-
 SortableTable.displayName = 'SortableTable';
-export default SortableTable;

package/src/SortableTableHead.tsx

@@ -2,21 +2,21 @@ import React from "react";
 import SortableTableTH from "./SortableTableTH";
 import type {SortableTableHeadProps} from "./types";
 import clsx from "clsx";
-import {useTableFields} from "./TableProvider";
+import {useTableFields} from "./useTableFields";
+import {useTableSort} from "./useTableSort";
 
-
-function SortableTableHead<T = unknown>({
-                                            currentSort,
+export default function SortableTableHead<T = unknown>({
                                             onChangeSort,
                                         }: SortableTableHeadProps<T>) {
-    const fields = useTableFields<T>()
-    const {field, ascending} = currentSort;
+    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}
+                                    sorted={sort?.field === tableField.field} ascending={sort?.ascending}
                                     className={clsx(
                                         typeof tableField.className === 'function'
                                             ? {[`text-${tableField.align}`]: !!tableField.align}
@@ -29,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,5 +1,4 @@
 import React from "react";
-import classNames from "classnames";
 import DataTableTH from "./DataTableTH";
 import type {SortableTableTHProps, UIFlexAlign} from "./types";
 import styled from '@emotion/styled';
@@ -39,13 +38,16 @@ const FieldTitle = styled.div<FieldTitleProps>`
     }
 `
 
-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}/>)
     }
@@ -75,6 +77,4 @@ function SortableTableTH<T = unknown>({
         </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';

package/src/Table.tsx

@@ -1,44 +1,49 @@
-import React, {TableHTMLAttributes} from 'react';
-import styled from "@emotion/styled";
-import type {DataTableProps} from "./types";
-import clsx from "clsx";
-
-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 = 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>
-        )
-    })
+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

@@ -3,7 +3,7 @@ import RowsPerPage from "./RowsPerPage";
 import type {TablePaginationProps} from "./types";
 import clsx from "clsx";
 
-function TablePagination({
+export default function TablePagination({
                              page,
                              rowsPerPage,
                              onChangePage,
@@ -67,6 +67,4 @@ function TablePagination({
         </div>
     )
 }
-
 TablePagination.displayname = 'TablePagination';
-export default TablePagination

package/src/index.tsx

@@ -1,37 +1,43 @@
 /* eslint-disable react-refresh/only-export-components */
 
-export {default as DataTable} from './DataTable';
+
+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} 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 {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 {
+    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';