@chumsinc/sortable-tables 3.0.2 → 3.1.1

package/src/{StandaloneSortHelper.tsx → SortHelper.tsx}

@@ -5,7 +5,7 @@ import {useEffect} from "react";
 export interface StandaloneSortHelperProps<T = unknown> {
     nextSort: SortProps<T>
 }
-export function StandaloneSortHelper<T = unknown>({nextSort}:StandaloneSortHelperProps<T>) {
+export function SortHelper<T = unknown>({nextSort}:StandaloneSortHelperProps<T>) {
     const [, setNextSort] = useTableSort<T>();
     useEffect(() => {
         console.log('setNextSort', nextSort);

package/src/SortableTable.tsx

@@ -1,43 +1,20 @@
 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";
+import DataTableProvider from "./DataTableProvider";
+import ContainedSortableTable from "./ContainedSortableTable";
+import {SortHelper} from "./SortHelper";
+
 
 export default function SortableTable<T = unknown>({
-                                                       className,
-                                                       size,
-                                                       responsive,
-                                                       sticky,
-                                                       data,
-                                                       keyField,
-                                                       rowClassName,
-                                                       renderRow,
-                                                       onSelectRow,
-                                                       selected,
-                                                       tableHeadProps,
-                                                       children,
-                                                       tfoot,
-                                                       onChangeSort,
+                                                       fields,
+                                                       currentSort,
                                                        ...rest
-                                                   }: Omit<SortableTableProps<T>, 'fields' | 'currentSort'>) {
-    const tableClassName = clsx('table', className, {
-        [`table-${size}`]: !!size,
-    })
-
+                                                   }: SortableTableProps<T>) {
     return (
-        <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>
+        <DataTableProvider initialFields={fields} initialSort={currentSort}>
+            <SortHelper nextSort={currentSort}/>
+            <ContainedSortableTable {...rest}/>
+        </DataTableProvider>
     )
 }
+
 SortableTable.displayName = 'SortableTable';

package/src/SortableTableHead.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import SortableTableTH from "./SortableTableTH";
 import type {SortableTableHeadProps} from "./types";
 import clsx from "clsx";

package/src/SortableTableTH.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import DataTableTH from "./DataTableTH";
 import type {SortableTableTHProps, UIFlexAlign} from "./types";
 import styled from '@emotion/styled';

package/src/Table.tsx

@@ -1,4 +1,4 @@
-import React, {type RefObject, type TableHTMLAttributes} from 'react';
+import {type RefObject, type TableHTMLAttributes} from 'react';
 import styled from "@emotion/styled";
 import type {DataTableProps} from "./types";
 import clsx from "clsx";

package/src/TablePagination.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import RowsPerPage from "./RowsPerPage";
 import type {TablePaginationProps} from "./types";
 import clsx from "clsx";

package/src/index.tsx

@@ -1,19 +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 StandaloneDataTableRow} from './StandaloneDataTableRow';
 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'
@@ -21,7 +21,6 @@ export {useTableSort} from './useTableSort'
 export {useTableContext} from './useTableContext'
 export {DataTableContext, type TableContextData} from './DataTableContext'
 export type {TableProviderProps} from './DataTableProvider'
-export type {StandaloneDataTableRowProps} from './StandaloneDataTableRow'
 export type {
     SortProps,
     DataTableField,

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/tsconfig-dts.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "noEmit": false,
+  }
+}

package/tsconfig.json

@@ -3,7 +3,7 @@
     "allowJs": false,
     "allowSyntheticDefaultImports": true,
     "declaration": true,
-    "declarationDir": "./dist/types",
+    "declarationDir": "./dist",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,

package/vite.config.ts

@@ -1,12 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
 import {resolve} from 'node:path'
 import {cwd} from 'node:process'
 
 // https://vite.dev/config/
 export default defineConfig({
-    plugins: [react({}), dts({include: ['src']})],
+    plugins: [
+        react({}),
+    ],
     resolve: {},
     build: {
         lib: {

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/StandaloneSortHelper.d.ts

@@ -1,5 +0,0 @@
-import { SortProps } from './types';
-export interface StandaloneSortHelperProps<T = unknown> {
-    nextSort: SortProps<T>;
-}
-export declare function StandaloneSortHelper<T = unknown>({ nextSort }: StandaloneSortHelperProps<T>): null;

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