@chumsinc/sortable-tables 3.0.1 → 3.1.0

package/src/index.tsx

@@ -1,18 +1,19 @@
 /* eslint-disable react-refresh/only-export-components */
 
 
-export {default as DataTable} from './StandaloneDataTable';
+export {default as DataTable} from './DataTable';
+export {default as ContainedDataTableRow} from './ContainedDataTableRow';
 export {default as DataTableRow} from './DataTableRow';
 export {default as DataTableTBody} from './DataTableTBody';
 export {default as DataTableTH} from './DataTableTH';
-export {default as StandaloneSortableTable} from './StandaloneSortableTable';
+export {default as SortableTable} from './SortableTable';
 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 './DataTable'
-export {default as SortableTable} from './SortableTable'
+export {default as ContainedDataTable} from './ContainedDataTable'
+export {default as ContainedSortableTable} from './ContainedSortableTable'
 export {default as DataTableProvider} from './DataTableProvider'
 export {useField} from './useField'
 export {useTableFields} from './useTableFields'

package/src/types.ts

@@ -1,4 +1,4 @@
-import React, {type HTMLAttributes, type  MouseEvent, type  ReactNode, type  TableHTMLAttributes} from 'react'
+import {type HTMLAttributes, type  MouseEvent, type  ReactNode, type  TableHTMLAttributes} from 'react'
 import type {ClassValue} from "clsx";
 
 
@@ -75,6 +75,7 @@ export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HT
 }
 
 export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
+    fields: DataTableField<T>[];
     rowClassName?: string | ClassValue | ((row: T) => string | ClassValue);
     selected?: boolean;
     row: T;

package/test/TableColumnsHandler.tsx

@@ -1,10 +1,10 @@
 import {useTableContext} from "../src";
-import React, {useCallback, useId} from "react";
+import {type ChangeEvent, useCallback, useId, useState} from "react";
 import type {ProductLine} from "./data";
 
 export default function TableColumnsHandler() {
     const {updateField, getField} = useTableContext<ProductLine>();
-    const [visible, setVisible] = React.useState<boolean>(getField('ProductLineDesc')?.visible ?? true);
+    const [visible, setVisible] = useState<boolean>(getField('ProductLineDesc')?.visible ?? true);
     // const {sort} = useTableSort();
     const id = useId();
 
@@ -14,7 +14,7 @@ export default function TableColumnsHandler() {
         setVisible(next);
     }, [updateField]);
 
-    const handleVisibleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    const handleVisibleChange = (ev: ChangeEvent<HTMLInputElement>) => {
         toggleFieldCollapse('ProductLineDesc', ev.target.checked);
     }
 

package/test/TestTable.tsx

@@ -1,6 +1,6 @@
-import React, {useState} from 'react';
+import {useState} from 'react';
 import type {ProductLine} from './data'
-import {SortableTable, type SortProps, useTableSort} from "../src";
+import {ContainedSortableTable, type SortProps, useTableSort} from "../src";
 import TablePagination from "../src/TablePagination";
 import TableColumnsHandler from "./TableColumnsHandler";
 
@@ -32,9 +32,9 @@ export default function TestTable({data, onChangeSort}: TestTableProps) {
     return (
         <div>
             <TableColumnsHandler/>
-            <SortableTable onChangeSort={sortChangeHandler} size="lg" responsive
-                           data={data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)}
-                           keyField="ProductLine" rowClassName={rowClassName}/>
+            <ContainedSortableTable 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={{

package/test/tableFields.tsx

@@ -1,6 +1,5 @@
 import type {SortableTableField} from "../src";
 import type {ProductLine} from "./data";
-import React from "react";
 
 export const tableFields: SortableTableField<ProductLine>[] = [
     {

package/dist/StandaloneDataTable.d.ts

@@ -1,6 +0,0 @@
-import { DataTableProps } from './types';
-declare function StandaloneDataTable<T = unknown>({ fields, ...rest }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace StandaloneDataTable {
-    var displayName: string;
-}
-export default StandaloneDataTable;

package/dist/StandaloneDataTableRow.d.ts

@@ -1,9 +0,0 @@
-import { DataTableField, DataTableRowProps } from './types';
-export interface StandaloneDataTableRowProps<T = unknown> extends DataTableRowProps<T> {
-    fields: DataTableField<T>[];
-}
-declare function StandaloneDataTableRow<T = unknown>({ fields, className, rowClassName, selected, row, trRef, onClick, ...rest }: StandaloneDataTableRowProps<T>): import("react/jsx-runtime").JSX.Element | null;
-declare namespace StandaloneDataTableRow {
-    var displayName: string;
-}
-export default StandaloneDataTableRow;

package/dist/StandaloneSortableTable.d.ts

@@ -1,6 +0,0 @@
-import { SortableTableProps } from './types';
-declare function StandaloneSortableTable<T = unknown>({ fields, currentSort, ...rest }: SortableTableProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace StandaloneSortableTable {
-    var displayName: string;
-}
-export default StandaloneSortableTable;

package/src/StandaloneDataTable.tsx

@@ -1,16 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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/StandaloneSortableTable.tsx

@@ -1,21 +0,0 @@
-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';