@chumsinc/sortable-tables 2.1.2 → 3.0.0

package/test/TestTable.tsx

@@ -1,68 +1,51 @@
-import React, {useEffect, useState} from 'react';
-import {ProductLine, productLines, productLineSorter} from './data'
-import {SortableTable, SortableTableField, SortProps} from "../src";
-import TablePagination from "../src/TablePagination";
-
-const fields: SortableTableField<ProductLine>[] = [
-    {field: 'ProductLine', title: 'Prod Line', sortable: true, as: 'th'},
-    {field: 'ProductLineDesc', title: 'Description', sortable: true},
-    {
-        field: 'ProductType',
-        title: 'Description',
-        sortable: true,
-        render: (row) => <span className="badge bg-info">{row.ProductType}</span>,
-        align: 'center'
-    },
-    {
-        field: 'Valuation',
-        title: 'Valuation',
-        sortable: true,
-        render: (row) => <span className="badge bg-secondary">{row.Valuation}</span>,
-        align: 'center'
-    },
-    {
-        field: 'ExplodeKitItems',
-        title: 'Explode Kit Items?',
-        sortable: true,
-        render: (row) => <span className="badge bg-primary">{row.ExplodeKitItems}</span>,
-        align: 'end'
-    },
-]
-const rowClassName = (row: ProductLine) => row.active ? '' : 'table-warning';
-
-export default function TestTable() {
-    const [sort, setSort] = useState<SortProps<ProductLine>>({field: 'ProductLine', ascending: true});
-    const [list, setList] = useState<ProductLine[]>(productLines);
-    const [page, setPage] = useState(0);
-    const [rowsPerPage, setRowsPerPage] = useState(5);
-
-
-    useEffect(() => {
-        setList([...productLines.sort(productLineSorter(sort))]);
-        setPage(0)
-    }, [sort]);
-
-    const rowsPerPageChangeHandler = (rpp: number) => {
-        setPage(0);
-        setRowsPerPage(rpp);
-    }
-
-    return (
-        <div>
-            <SortableTable currentSort={sort} onChangeSort={setSort} fields={fields} size="lg" responsive
-                           data={list.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)}
-                           keyField="ProductLine" rowClassName={rowClassName}/>
-            <TablePagination page={page} onChangePage={setPage} size="sm"
-                             rowsPerPage={rowsPerPage}
-                             rowsPerPageProps={{
-                                 onChange: rowsPerPageChangeHandler,
-                                 label: <span className="bi-images" />,
-                                 pageValues: [5, 10, 15, 25, 50, 100]
-                             }}
-                             showFirst={list.length > rowsPerPage}
-                             showLast={list.length > rowsPerPage}
-                             count={list.length}/>
-        </div>
-
-    )
-}
+import React, {useState} from 'react';
+import type {ProductLine} from './data'
+import {SortableTable, type SortProps, useTableSort} from "../src";
+import TablePagination from "../src/TablePagination";
+import TableColumnsHandler from "./TableColumnsHandler";
+
+
+const rowClassName = (row: ProductLine) => row.active ? '' : 'table-warning';
+
+export interface TestTableProps {
+    data: ProductLine[];
+    onChangeSort?: (sort: SortProps<ProductLine>) => void;
+}
+
+export default function TestTable({data, onChangeSort}: TestTableProps) {
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    const [, setSort] = useTableSort<ProductLine>();
+
+
+    const rowsPerPageChangeHandler = (rpp: number) => {
+        setPage(0);
+        setRowsPerPage(rpp);
+    }
+
+    const sortChangeHandler = (sort: SortProps<ProductLine>) => {
+        onChangeSort?.(sort);
+        setSort(sort);
+    }
+
+
+    return (
+        <div>
+            <TableColumnsHandler/>
+            <SortableTable 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={{
+                                 onChange: rowsPerPageChangeHandler,
+                                 label: <span className="bi-images"/>,
+                                 pageValues: [5, 10, 15, 25, 50, 100]
+                             }}
+                             showFirst={data.length > rowsPerPage}
+                             showLast={data.length > rowsPerPage}
+                             count={data.length}/>
+        </div>
+
+    )
+}

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

@@ -0,0 +1,52 @@
+import type {SortableTableField} from "../src";
+import type {ProductLine} from "./data";
+import React from "react";
+
+export const tableFields: SortableTableField<ProductLine>[] = [
+    {
+        id: 'prodLine',
+        field: 'ProductLine',
+        title: 'Prod Line',
+        sortable: true,
+        as: 'th'
+    },
+    {
+        id: 'ProductLineDesc',
+        field: 'ProductLineDesc',
+        title: 'Description',
+        sortable: true,
+        visible: false,
+    },
+    {
+        id: 'prodType',
+        field: 'ProductType',
+        title: 'Description',
+        sortable: true,
+        render: (row) => <span className="badge bg-info">{row.ProductType}</span>,
+        align: 'center'
+    },
+    {
+        id: 'valuation',
+        field: 'Valuation',
+        title: 'Valuation',
+        sortable: true,
+        render: (row) => <span className="badge bg-secondary">{row.Valuation}</span>,
+        align: 'center'
+    },
+    {
+        id: 'explodeKit',
+        field: 'ExplodeKitItems',
+        title: 'Explode Kit Items?',
+        sortable: true,
+        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>,
+    }
+]