@chumsinc/sortable-tables 2.2.0 → 3.0.1

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/StandaloneDataTableRow.tsx

@@ -0,0 +1,42 @@
+import React, {type MouseEvent} from 'react';
+import type {DataTableField, DataTableRowProps} from "./types";
+import DataTableCell from "./DataTableCell";
+import clsx from "clsx";
+import {useTableFields} from "./useTableFields";
+
+export interface StandaloneDataTableRowProps<T = unknown> extends DataTableRowProps<T> {
+    fields: DataTableField<T>[]
+}
+
+export default function StandaloneDataTableRow<T = unknown>({
+                                                                fields,
+                                                                className,
+                                                                rowClassName,
+                                                                selected,
+                                                                row,
+                                                                trRef,
+                                                                onClick,
+                                                                ...rest
+                                                            }: StandaloneDataTableRowProps<T>) {
+    const clickHandler = (ev: MouseEvent<HTMLTableRowElement>) => {
+        onClick?.(row, ev)
+    }
+
+    const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;
+    if (!row) {
+        return null;
+    }
+
+    return (
+        <tr ref={trRef}
+            className={clsx({'table-active': selected}, className, _className)}
+            onClick={clickHandler}
+            {...rest}>
+            {fields
+                .map((field, index) => (
+                    <DataTableCell key={String(field?.id ?? index)} field={field} row={row}/>
+                ))}
+        </tr>
+    )
+}
+StandaloneDataTableRow.displayName = 'StandaloneDataTableRow';

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';