@chumsinc/sortable-tables 2.2.0 → 3.0.0

package/test/data.ts

@@ -1,232 +1,232 @@
-import {SortProps} from "../src";
-
-export interface ProductLine {
-    ProductLine: string,
-    ProductLineDesc: string,
-    ProductType: string;
-    Valuation: string;
-    ExplodeKitItems: string;
-    active: boolean;
-}
-
-export const productLines: ProductLine[] = [
-    {
-        "ProductLine": "A",
-        "ProductLineDesc": "Watchbands",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "BC",
-        "ProductLineDesc": "Beyond Coastal",
-        "ProductType": "F",
-        "Valuation": "5",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "CASE",
-        "ProductLineDesc": "Accessory Cases & Bags",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "A",
-        "active": true
-    },
-    {
-        "ProductLine": "D",
-        "ProductLineDesc": "Display Racks",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "E",
-        "ProductLineDesc": "Retainers",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "E2",
-        "ProductLineDesc": "Optical Accessories",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "F2",
-        "ProductLineDesc": "Active Gear/Fitness",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "FGRM",
-        "ProductLineDesc": "Finished Goods w/USA Step",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "FUSA",
-        "ProductLineDesc": "#Freestyle USA Sales",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "A",
-        "active": false
-    },
-    {
-        "ProductLine": "G",
-        "ProductLineDesc": "Chums Custom OEM",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "J",
-        "ProductLineDesc": "Winter Products",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "JP",
-        "ProductLineDesc": "Japan Products",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "A",
-        "active": true
-    },
-    {
-        "ProductLine": "K",
-        "ProductLineDesc": "Keychains",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "L",
-        "ProductLineDesc": "Wallets",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "M",
-        "ProductLineDesc": "Misc Products",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "O",
-        "ProductLineDesc": "Lip Balm/Lotion",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "P",
-        "ProductLineDesc": "Paracord",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "A",
-        "active": true
-    },
-    {
-        "ProductLine": "POFG",
-        "ProductLineDesc": "Purchased Items with WT",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "R",
-        "ProductLineDesc": "Rep Sample Product",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "RBC",
-        "ProductLineDesc": "#Rep Sample BeyondCoastal",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "A",
-        "active": false
-    },
-    {
-        "ProductLine": "RM",
-        "ProductLineDesc": "Raw Materials",
-        "ProductType": "R",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "RMLY",
-        "ProductLineDesc": "Lanyard RHOOKS Sold",
-        "ProductType": "R",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "S",
-        "ProductLineDesc": "Promotional Products",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    },
-    {
-        "ProductLine": "T",
-        "ProductLineDesc": "Kits",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "A",
-        "active": true
-    },
-    {
-        "ProductLine": "V",
-        "ProductLineDesc": "Lanyards",
-        "ProductType": "F",
-        "Valuation": "2",
-        "ExplodeKitItems": "P",
-        "active": true
-    }
-];
-
-export const productLineSorter = (sort: SortProps<ProductLine>) => (a: ProductLine, b: ProductLine) => {
-    const {field, ascending} = sort;
-    const sortMod = ascending === false ? -1 : 1;
-    switch (field) {
-        case 'ProductLine':
-        case 'ProductLineDesc':
-        case 'ProductType':
-        case 'Valuation':
-        case 'ExplodeKitItems':
-            return (
-                a[field].localeCompare(b[field]) === 0
-                    ? a.ProductLine.localeCompare(b.ProductLine)
-                    : a[field].localeCompare(b[field])
-            ) * sortMod;
-        default:
-            return a.ProductLine.localeCompare(b.ProductLine)
-    }
-}
+import type {SortProps} from "../src";
+
+export interface ProductLine {
+    ProductLine: string,
+    ProductLineDesc: string,
+    ProductType: string;
+    Valuation: string;
+    ExplodeKitItems: string;
+    active: boolean;
+}
+
+export const productLines: ProductLine[] = [
+    {
+        "ProductLine": "A",
+        "ProductLineDesc": "Watchbands",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "BC",
+        "ProductLineDesc": "Beyond Coastal",
+        "ProductType": "F",
+        "Valuation": "5",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "CASE",
+        "ProductLineDesc": "Accessory Cases & Bags",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "A",
+        "active": true
+    },
+    {
+        "ProductLine": "D",
+        "ProductLineDesc": "Display Racks",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "E",
+        "ProductLineDesc": "Retainers",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "E2",
+        "ProductLineDesc": "Optical Accessories",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "F2",
+        "ProductLineDesc": "Active Gear/Fitness",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "FGRM",
+        "ProductLineDesc": "Finished Goods w/USA Step",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "FUSA",
+        "ProductLineDesc": "#Freestyle USA Sales",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "A",
+        "active": false
+    },
+    {
+        "ProductLine": "G",
+        "ProductLineDesc": "Chums Custom OEM",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "J",
+        "ProductLineDesc": "Winter Products",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "JP",
+        "ProductLineDesc": "Japan Products",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "A",
+        "active": true
+    },
+    {
+        "ProductLine": "K",
+        "ProductLineDesc": "Keychains",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "L",
+        "ProductLineDesc": "Wallets",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "M",
+        "ProductLineDesc": "Misc Products",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "O",
+        "ProductLineDesc": "Lip Balm/Lotion",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "P",
+        "ProductLineDesc": "Paracord",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "A",
+        "active": true
+    },
+    {
+        "ProductLine": "POFG",
+        "ProductLineDesc": "Purchased Items with WT",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "R",
+        "ProductLineDesc": "Rep Sample Product",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "RBC",
+        "ProductLineDesc": "#Rep Sample BeyondCoastal",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "A",
+        "active": false
+    },
+    {
+        "ProductLine": "RM",
+        "ProductLineDesc": "Raw Materials",
+        "ProductType": "R",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "RMLY",
+        "ProductLineDesc": "Lanyard RHOOKS Sold",
+        "ProductType": "R",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "S",
+        "ProductLineDesc": "Promotional Products",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    },
+    {
+        "ProductLine": "T",
+        "ProductLineDesc": "Kits",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "A",
+        "active": true
+    },
+    {
+        "ProductLine": "V",
+        "ProductLineDesc": "Lanyards",
+        "ProductType": "F",
+        "Valuation": "2",
+        "ExplodeKitItems": "P",
+        "active": true
+    }
+];
+
+export const productLineSorter = (sort: SortProps<ProductLine>) => (a: ProductLine, b: ProductLine) => {
+    const {field, ascending} = sort;
+    const sortMod = ascending === false ? -1 : 1;
+    switch (field) {
+        case 'ProductLine':
+        case 'ProductLineDesc':
+        case 'ProductType':
+        case 'Valuation':
+        case 'ExplodeKitItems':
+            return (
+                a[field].localeCompare(b[field]) === 0
+                    ? a.ProductLine.localeCompare(b.ProductLine)
+                    : a[field].localeCompare(b[field])
+            ) * sortMod;
+        default:
+            return a.ProductLine.localeCompare(b.ProductLine)
+    }
+}

package/test/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import {createRoot} from "react-dom/client";
-import TestTable from "./TestTable";
-
-const container = document.getElementById('app');
-const root = createRoot(container!);
-root.render(
-    <React.StrictMode>
-        <TestTable />
-    </React.StrictMode>
-);
+import React from 'react';
+import {createRoot} from "react-dom/client";
+import Main from "./Main";
+
+const container = document.getElementById('app');
+const root = createRoot(container!);
+root.render(
+    <React.StrictMode>
+        <Main/>
+    </React.StrictMode>
+);

package/test/tableFields.tsx

@@ -1,5 +1,5 @@
-import {SortableTableField} from "../src";
-import {ProductLine} from "./data";
+import type {SortableTableField} from "../src";
+import type {ProductLine} from "./data";
 import React from "react";
 
 export const tableFields: SortableTableField<ProductLine>[] = [
@@ -15,7 +15,7 @@ export const tableFields: SortableTableField<ProductLine>[] = [
         field: 'ProductLineDesc',
         title: 'Description',
         sortable: true,
-        collapse: true,
+        visible: false,
     },
     {
         id: 'prodType',
@@ -41,4 +41,12 @@ export const tableFields: SortableTableField<ProductLine>[] = [
         render: (row) => <span className="badge bg-primary">{row.ExplodeKitItems}</span>,
         align: 'end'
     },
+    {
+        id: 'active',
+        field: 'active',
+        title: 'Active?',
+        sortable: true,
+        align: 'center',
+        render: (row) => <span className={`badge ${row.active ? 'bg-success' : 'bg-danger'}`}>{row.active ? 'Yes' : 'No'}</span>,
+    }
 ]

package/test/utils.ts

@@ -0,0 +1,19 @@
+import type {SortProps} from "../src";
+import type {ProductLine} from "./data";
+
+export const productLineSorter = (sort: SortProps<ProductLine>) => (a: ProductLine, b: ProductLine) => {
+    const {field, ascending} = sort;
+    const sortMod = ascending === false ? -1 : 1;
+    switch (field) {
+        case 'ProductLine':
+        case 'ProductLineDesc':
+        case 'ProductType':
+        case 'Valuation':
+            return (a[field].localeCompare(b[field]) === 0
+                    ? a.ProductLine.localeCompare(b.ProductLine)
+                    : a[field].localeCompare(b[field])
+            ) * sortMod;
+        default:
+            return a.ProductLine.localeCompare(b.ProductLine) * sortMod;
+    }
+}

package/tsconfig.json

@@ -25,6 +25,7 @@
     "strict": true,
     "target": "esNext",
     "useDefineForClassFields": true,
+    "verbatimModuleSyntax": true
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules","dist"]

package/dist/DataTableWithContext.d.ts

@@ -1,2 +0,0 @@
-import { DataTableProps } from './types';
-export default function DataTableWithContext<T = unknown>({ className, size, responsive, sticky, data, keyField, rowClassName, renderRow, onSelectRow, selected, tableHeadProps, children, tfoot, ...rest }: Omit<DataTableProps<T>, 'fields'>): import("react/jsx-runtime").JSX.Element;

package/dist/SortableTableWithContext.d.ts

@@ -1,2 +0,0 @@
-import { SortableTableProps } from './types';
-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'>): import("react/jsx-runtime").JSX.Element;

package/dist/TableProvider.d.ts

@@ -1,17 +0,0 @@
-import { ReactNode } from 'react';
-import { DataTableField } from './types';
-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;
-}
-export interface TableProviderProps<T = unknown> {
-    initialFields: DataTableField<T>[];
-    children: ReactNode;
-}
-export default function TableProvider<T = unknown>({ children, initialFields }: TableProviderProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare function useTableContext<T = unknown>(): TableContextData<T>;
-export declare function useTableFields<T = unknown>(): DataTableField<T>[];
-export declare function useField<T = unknown>(key: string | number): DataTableField<T> | null;
-export declare function useHasTableFieldsContext(): boolean;

package/src/DataTableWithContext.tsx

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

package/src/SortableTableWithContext.tsx

@@ -1,44 +0,0 @@
-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>
-    )
-}