@chumsinc/sortable-tables 2.0.6

package/test/TestTable.tsx

@@ -0,0 +1,67 @@
+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,
+                                 pageValues: [5, 10, 15, 25, 50, 100]
+                             }}
+                             showFirst={list.length > rowsPerPage}
+                             showLast={list.length > rowsPerPage}
+                             count={list.length}/>
+        </div>
+
+    )
+}

package/test/data.ts

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

package/test/index.tsx

@@ -0,0 +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>
+);

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "outDir": "./dist/",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "es2020"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

package/webpack.common.mjs

@@ -0,0 +1,72 @@
+import path from 'node:path';
+import process from "node:process";
+
+export default {
+    entry: './src/index.tsx',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    {loader: 'style-loader'},
+                    {loader: 'css-loader'},
+                ],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                    'sass-loader',
+                ],
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    plugins: [
+    ],
+    optimization: {
+        splitChunks: {
+            chunks: 'async',
+            minSize: 20000,
+            minRemainingSize: 0,
+            minChunks: 1,
+            maxAsyncRequests: 30,
+            maxInitialRequests: 30,
+            enforceSizeThreshold: 50000,
+            cacheGroups: {
+                react: {
+                    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
+                    name: 'vendors-react',
+                    chunks: 'all',
+                    priority: 10,
+                },
+                defaultVendors: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'vendors',
+                    chunks: 'all',
+                    priority: 0,
+                },
+                default: {
+                    minChunks: 2,
+                    priority: -10,
+                    reuseExistingChunk: true,
+                }
+            }
+        }
+    },
+    output: {
+        path: path.join(process.cwd(), 'public/js'),
+        filename: "[name].js",
+        sourceMapFilename: '[file].map',
+        publicPath: '/',
+    },
+    target: 'web',
+}

package/webpack.dev.mjs

@@ -0,0 +1,35 @@
+import {merge} from 'webpack-merge';
+import common from './webpack.common.mjs';
+import path from 'node:path';
+import process from 'node:process';
+
+const localProxy = {
+    target: 'http://localhost:8081',
+    ignorePath: false,
+    changeOrigin: true,
+    secure: false,
+};
+
+export default merge(common, {
+    entry: './test/index.tsx',
+    mode: 'development',
+    devServer: {
+        allowedHosts: 'auto',
+        static: {
+            directory: path.join(process.cwd(), 'public'),
+            serveIndex: true,
+            watch: false,
+        },
+        hot: true,
+        port: 3000,
+        proxy: [
+            {context: ['/api'], ...localProxy},
+        ],
+        watchFiles: [
+            path.join(process.cwd(), 'src/**/*'),
+            path.join(process.cwd(), 'test/**/*')
+        ]
+    },
+    devtool: 'inline-source-map',
+    plugins: []
+});