@chumsinc/sortable-tables 2.0.6

package/dist/DataTableRow.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { noop } from "./utils";
+import DataTableCell from "./DataTableCell";
+function DataTableRow({ className, rowClassName, selected, fields, row, trRef, onClick = noop, ...rest }) {
+    const clickHandler = () => {
+        return onClick ? onClick() : noop();
+    };
+    const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;
+    if (!row) {
+        return null;
+    }
+    return (_jsx("tr", { ref: trRef, className: classNames({ 'table-active': selected }, className, _className), onClick: clickHandler, ...rest, children: fields.map((field, index) => (_jsx(DataTableCell, { field: field, row: row }, index))) }));
+}
+DataTableRow.displayName = 'DataTableRow';
+export default DataTableRow;
+//# sourceMappingURL=DataTableRow.js.map

package/dist/DataTableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableRow.js","sourceRoot":"","sources":["../src/DataTableRow.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAE7B,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,SAAS,YAAY,CAAc,EACmB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,GAAG,EACH,KAAK,EACL,OAAO,GAAG,IAAI,EACd,GAAG,IAAI,EACY;IACrE,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,OAAO,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IACxC,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,OAAO,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;IACzF,IAAI,CAAC,GAAG,EAAE,CAAC;QACP,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,aAAI,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,UAAU,CAAC,EAAC,cAAc,EAAE,QAAQ,EAAC,EAAE,SAAS,EAAE,UAAU,CAAC,EACxE,OAAO,EAAE,YAAY,KACjB,IAAI,YACP,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,KAAC,aAAa,IAAa,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAA7B,KAAK,CAA4B,CAAC,CAAC,GACrF,CACR,CAAA;AACL,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,eAAe,YAAY,CAAC"}

package/dist/DataTableTBody.d.ts

@@ -0,0 +1,6 @@
+import { DataTableTBodyProps } from "./types";
+declare function DataTableTBody<T = unknown>({ fields, data, keyField, rowClassName, renderRow, onSelectRow, selected, children, ...rest }: DataTableTBodyProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableTBody {
+    var displayName: string;
+}
+export default DataTableTBody;

package/dist/DataTableTBody.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DataTableRow from "./DataTableRow";
+import { noop } from "./utils";
+function DataTableTBody({ fields, data, keyField, rowClassName, renderRow, onSelectRow = noop, selected = '', children, ...rest }) {
+    return (_jsxs("tbody", { ...rest, children: [data.map(row => {
+                const keyValue = String(typeof keyField === "function" ? keyField(row) : row[keyField]);
+                const isSelected = typeof selected === 'function' ? selected(row) : keyValue === selected;
+                if (renderRow) {
+                    return renderRow(row);
+                }
+                return (_jsx(DataTableRow, { onClick: () => onSelectRow(row), rowClassName: rowClassName, fields: fields, row: row, selected: isSelected }, keyValue));
+            }), children] }));
+}
+DataTableTBody.displayName = 'DataTableTBody';
+export default DataTableTBody;
+//# sourceMappingURL=DataTableTBody.js.map

package/dist/DataTableTBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTBody.js","sourceRoot":"","sources":["../src/DataTableTBody.tsx"],"names":[],"mappings":";AACA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAK7B,SAAS,cAAc,CAAc,EACT,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,EAAE,EACb,QAAQ,EACR,GAAG,IAAI,EACc;IAE7C,OAAO,CACH,oBAAW,IAAI,aACd,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBACZ,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACxF,MAAM,UAAU,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC;gBAC1F,IAAI,SAAS,EAAE,CAAC;oBACZ,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC;gBAC1B,CAAC;gBACD,OAAO,CACH,KAAC,YAAY,IAAgB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,EAC9C,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,IAHzB,QAAQ,CAGoB,CAClD,CAAA;YACL,CAAC,CAAC,EACD,QAAQ,IACD,CACX,CAAA;AACL,CAAC;AACD,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAC9C,eAAe,cAAc,CAAA"}

package/dist/DataTableTH.d.ts

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

package/dist/DataTableTH.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+function DataTableTH({ field, className, children, ...rest }) {
+    const thClassName = classNames({ [`text-${field.align}`]: !!field.align }, className);
+    return (_jsx("th", { className: thClassName, scope: "col", ...rest, children: children ?? field.title }));
+}
+DataTableTH.displayName = 'DataTableTH';
+export default DataTableTH;
+//# sourceMappingURL=DataTableTH.js.map

package/dist/DataTableTH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTH.js","sourceRoot":"","sources":["../src/DataTableTH.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,SAAS,WAAW,CAAc,EACmB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACW;IACnE,MAAM,WAAW,GAAG,UAAU,CAAC,EAAC,CAAC,QAAQ,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,EAAC,EAAE,SAAS,CAAC,CAAC;IACpF,OAAO,CACH,aAAI,SAAS,EAAE,WAAW,EAAE,KAAK,EAAC,KAAK,KAAK,IAAI,YAC3C,QAAQ,IAAI,KAAK,CAAC,KAAK,GACvB,CACR,CAAA;AACL,CAAC;AACD,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AACxC,eAAe,WAAW,CAAC"}

package/dist/RowsPerPage.d.ts

@@ -0,0 +1,7 @@
+import { RowsPerPageProps } from "./types";
+export declare const defaultRowsPerPageValues: number[];
+declare function RowsPerPage({ value, pageValues, size, label, className, onChange, ...rest }: RowsPerPageProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RowsPerPage {
+    var displayName: string;
+}
+export default RowsPerPage;

package/dist/RowsPerPage.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import classNames from "classnames";
+export const defaultRowsPerPageValues = [10, 25, 50, 100, 250, 500, 1000];
+function RowsPerPage({ value, pageValues = defaultRowsPerPageValues, size, label, className, onChange, ...rest }) {
+    const id = useId();
+    const changeHandler = (ev) => onChange(Number(ev.target.value));
+    const selectClassName = className ?? classNames('form-select', { [`form-select-${size}`]: !!size });
+    const inputGroupClassName = classNames('input-group', {
+        [`input-group-${size}`]: !!size,
+    });
+    return (_jsxs("div", { className: inputGroupClassName, children: [_jsx("label", { className: "input-group-text", htmlFor: id, children: label ?? 'Rows' }), _jsx("select", { className: selectClassName, id: id, value: value, onChange: changeHandler, ...rest, children: pageValues.map(value => (_jsx("option", { value: value, children: value }, value))) })] }, value));
+}
+RowsPerPage.displayName = 'RowsPerPage';
+export default RowsPerPage;
+//# sourceMappingURL=RowsPerPage.js.map

package/dist/RowsPerPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowsPerPage.js","sourceRoot":"","sources":["../src/RowsPerPage.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAc,KAAK,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,MAAM,CAAC,MAAM,wBAAwB,GAAa,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;AAGpF,SAAS,WAAW,CAAC,EACI,KAAK,EACL,UAAU,GAAG,wBAAwB,EACrC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACQ;IACpC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,aAAa,GAAG,CAAC,EAAkC,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAChG,MAAM,eAAe,GAAG,SAAS,IAAI,UAAU,CAAC,aAAa,EAAE,EAAC,CAAC,eAAe,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,EAAC,CAAC,CAAC;IAClG,MAAM,mBAAmB,GAAG,UAAU,CAAC,aAAa,EAAE;QAClD,CAAC,eAAe,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;KAClC,CAAC,CAAA;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,mBAAmB,aAC/B,gBAAO,SAAS,EAAC,kBAAkB,EAAC,OAAO,EAAE,EAAE,YAAG,KAAK,IAAI,MAAM,GAAS,EAC1E,iBAAQ,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,EAAE,EAClC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,KAAM,IAAI,YAClD,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACrB,iBAAoB,KAAK,EAAE,KAAK,YAAG,KAAK,IAA3B,KAAK,CAAgC,CACrD,CAAC,GACG,KAP6B,KAAK,CAQzC,CACT,CAAA;AACL,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AACxC,eAAe,WAAW,CAAC"}

package/dist/SortableTable.d.ts

@@ -0,0 +1,6 @@
+import { SortableTableProps } from "./types";
+declare function SortableTable<T = unknown>({ fields, data, currentSort, onChangeSort, keyField, size, sticky, rowClassName, renderRow, onSelectRow, selected, className, tfoot, children, ...rest }: SortableTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace SortableTable {
+    var displayName: string;
+}
+export default SortableTable;

package/dist/SortableTable.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import SortableTableHead from "./SortableTableHead";
+import DataTableTBody from "./DataTableTBody";
+import { noop } from "./utils";
+import Table from "./Table";
+function SortableTable({ fields, data, currentSort, onChangeSort, keyField, size = '', sticky, rowClassName, renderRow, onSelectRow = noop, selected = '', className = '', tfoot, children, ...rest }) {
+    const tableClassName = classNames('table', className, {
+        [`table-${size}`]: !!size,
+    });
+    return (_jsxs(Table, { className: tableClassName, sticky: sticky, ...rest, children: [_jsx(SortableTableHead, { currentSort: currentSort, fields: fields, onChangeSort: onChangeSort }), !!data.length && (_jsx(DataTableTBody, { fields: fields, data: data, keyField: keyField, rowClassName: rowClassName, renderRow: renderRow, onSelectRow: onSelectRow, selected: selected })), children, tfoot] }));
+}
+SortableTable.displayName = 'SortableTable';
+export default SortableTable;
+//# sourceMappingURL=SortableTable.js.map

package/dist/SortableTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTable.js","sourceRoot":"","sources":["../src/SortableTable.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAC7B,OAAO,KAAK,MAAM,SAAS,CAAC;AAG5B,SAAS,aAAa,CAAc,EACI,MAAM,EACN,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,MAAM,EACN,YAAY,EACZ,SAAS,EACT,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,EAAE,EACd,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACa;IACxD,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,EAAE;QAClD,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;KAC5B,CAAC,CAAA;IAEF,OAAO,CACH,MAAC,KAAK,IAAC,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,KAAM,IAAI,aACtD,KAAC,iBAAiB,IAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,GAAG,EACzF,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CACd,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAC1E,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,CAClE,EACA,QAAQ,EACR,KAAK,IACF,CACX,CAAA;AACL,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAC5C,eAAe,aAAa,CAAC"}

package/dist/SortableTableHead.d.ts

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

package/dist/SortableTableHead.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SortableTableTH from "./SortableTableTH";
+import classNames from "classnames";
+function SortableTableHead({ currentSort, fields, onChangeSort, }) {
+    const { field, ascending } = currentSort;
+    return (_jsx("thead", { children: _jsx("tr", { children: fields.map((tableField, index) => (_jsx(SortableTableTH, { field: tableField, sorted: field === tableField.field, ascending: ascending, className: classNames(typeof tableField.className === 'function'
+                    ? { [`text-${tableField.align}`]: !!tableField.align }
+                    : tableField.className), onClick: onChangeSort }, index))) }) }));
+}
+SortableTableHead.displayName = 'SortableTableHead';
+export default SortableTableHead;
+//# sourceMappingURL=SortableTableHead.js.map

package/dist/SortableTableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTableHead.js","sourceRoot":"","sources":["../src/SortableTableHead.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,SAAS,iBAAiB,CAAc,EACmB,WAAW,EACX,MAAM,EACN,YAAY,GACY;IAC/E,MAAM,EAAC,KAAK,EAAE,SAAS,EAAC,GAAG,WAAW,CAAC;IACvC,OAAO,CACH,0BACA,uBACK,MAAM,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,KAAC,eAAe,IAAgB,KAAK,EAAE,UAAU,EAChC,MAAM,EAAE,KAAK,KAAK,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EACxD,SAAS,EAAE,UAAU,CACtB,OAAO,UAAU,CAAC,SAAS,KAAK,UAAU;oBACtC,CAAC,CAAC,EAAC,CAAC,QAAQ,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,EAAC;oBACpD,CAAC,CAAC,UAAU,CAAC,SAAS,CAC7B,EAAE,OAAO,EAAE,YAAY,IANX,KAAK,CAMS,CAC1C,CAAC,GACD,GACG,CACX,CAAA;AACL,CAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AACpD,eAAe,iBAAiB,CAAC"}

package/dist/SortableTableTH.d.ts

@@ -0,0 +1,6 @@
+import { SortableTableTHProps } from "./types";
+declare function SortableTableTH<T = unknown>({ field, sorted, ascending, className, onClick }: SortableTableTHProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace SortableTableTH {
+    var displayName: string;
+}
+export default SortableTableTH;

package/dist/SortableTableTH.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import DataTableTH from "./DataTableTH";
+import styled from '@emotion/styled';
+const flexJustifyContent = (align) => {
+    if (!align) {
+        return 'flex-start';
+    }
+    switch (align) {
+        case 'end':
+            return 'flex-end';
+        default:
+            return 'center';
+    }
+};
+const FieldTitle = styled.div `
+    display: flex;
+    width: 100%;
+    flex-direction: ${props => props.align === 'end' ? 'row-reverse' : 'row'};
+    justify-content: ${props => flexJustifyContent(props.align)};
+    .sort-icon {
+        flex-grow: ${props => props.align === 'end' ? '1' : '0'};
+        opacity: ${props => props.sorted ? 1 : 0};
+    }
+    &:hover .sort-icon {
+        color: ${props => props.sorted ? 'unset' : 'var(--bs-primary)'} ;
+        opacity: 0.75;
+        transition: opacity 0.2s;
+    }
+`;
+function SortableTableTH({ field, sorted, ascending, className, onClick }) {
+    if (!field.sortable) {
+        return (_jsx(DataTableTH, { field: field, className: className }));
+    }
+    const { className: _thClassName, ...thProps } = field.thProps ?? {};
+    const thClassName = classNames(className, _thClassName, { [`text-${field.align}`]: !!field.align });
+    const clickHandler = () => {
+        onClick({ field: field.field, ascending: !sorted ? true : !ascending });
+    };
+    const iconClassName = {
+        'bi-arrow-down': ascending,
+        'bi-arrow-up': !ascending,
+    };
+    return (_jsx("th", { ...thProps, className: classNames("sortable", thClassName), scope: "col", onClick: clickHandler, children: _jsxs(FieldTitle, { sorted: sorted, align: field.align, children: [_jsx("div", { className: "field-title", children: field.title }), _jsx("div", { className: classNames('me-1 sort-icon', iconClassName) })] }) }));
+}
+SortableTableTH.displayName = 'SortableTableTH';
+export default SortableTableTH;
+//# sourceMappingURL=SortableTableTH.js.map

package/dist/SortableTableTH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTableTH.js","sourceRoot":"","sources":["../src/SortableTableTH.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,kBAAkB,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC/C,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,OAAO,YAAY,CAAC;IACxB,CAAC;IACD,QAAQ,KAAK,EAAE,CAAC;QACZ,KAAK,KAAK;YACN,OAAO,UAAU,CAAC;QACtB;YACI,OAAO,QAAQ,CAAC;IACxB,CAAC;AACL,CAAC,CAAA;AAMD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAiB;;;sBAGxB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK;uBACrD,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC;;qBAE1C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;mBAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;iBAG/B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB;;;;CAIrE,CAAA;AAED,SAAS,eAAe,CAAc,EACI,KAAK,EACL,MAAM,EACN,SAAS,EACT,SAAS,EACT,OAAO,EACe;IAC5D,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAClB,OAAO,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,CAAC,CAAA;IAC/D,CAAC;IAED,MAAM,EAAC,SAAS,EAAE,YAAY,EAAE,GAAG,OAAO,EAAC,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;IAClE,MAAM,WAAW,GAAG,UAAU,CAC1B,SAAS,EACT,YAAY,EACZ,EAAC,CAAC,QAAQ,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,EAAC,CAC3C,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,OAAO,CAAC,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAAC,CAAC,CAAC;IAC1E,CAAC,CAAA;IAED,MAAM,aAAa,GAAG;QAClB,eAAe,EAAE,SAAS;QAC1B,aAAa,EAAE,CAAC,SAAS;KAC5B,CAAA;IAED,OAAO,CACH,gBAAQ,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC,EAAE,KAAK,EAAC,KAAK,EAAC,OAAO,EAAE,YAAY,YAC9F,MAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aAC1C,cAAK,SAAS,EAAC,aAAa,YAAE,KAAK,CAAC,KAAK,GAAO,EAChD,cAAK,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAE,aAAa,CAAC,GAAG,IACrD,GACZ,CACR,CAAA;AACL,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAChD,eAAe,eAAe,CAAC"}

package/dist/Table.d.ts

@@ -0,0 +1,5 @@
+import React, { TableHTMLAttributes } from 'react';
+import { DataTableProps } from "./types";
+export type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>;
+declare const _default: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps<unknown>, "sticky" | "responsive"> & React.RefAttributes<HTMLTableElement>>;
+export default _default;

package/dist/Table.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled from "@emotion/styled";
+import classNames from "classnames";
+const StyledTable = styled.table `
+    --table-sticky-top: ${props => props.sticky ? '0' : undefined};
+
+    thead {
+        tr:nth-of-type(1) td,
+        tr:nth-of-type(1) th {
+            top: var(--table-sticky-top, unset);
+            position: ${props => props.sticky ? "sticky" : "unset"};
+            z-index: ${props => props.sticky ? 10 : "unset"};
+            background: ${props => props.sticky ? "linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))" : "unset"};
+        }
+    }
+`;
+export default React.forwardRef(function Table({ sticky, responsive, children, ...rest }, ref) {
+    if (responsive) {
+        const className = classNames({
+            'table-responsive': responsive === true,
+            [`table-responsive-${responsive}`]: responsive !== true,
+        });
+        return (_jsx("div", { className: className, children: _jsx(StyledTable, { ref: ref, ...rest, children: children }) }));
+    }
+    return (_jsx(StyledTable, { sticky: sticky, ref: ref, ...rest, children: children }));
+});
+//# sourceMappingURL=Table.js.map

package/dist/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAkB;0BACxB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;;;;;;wBAMzC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;uBAC3C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;0BACjC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,gFAAgF,CAAC,CAAC,CAAC,OAAO;;;CAG3I,CAAA;AAED,eAAe,KAAK,CAAC,UAAU,CAC3B,SAAS,KAAK,CAAC,EACI,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,GAAG;IACjB,IAAI,UAAU,EAAE,CAAC;QACb,MAAM,SAAS,GAAG,UAAU,CAAC;YACzB,kBAAkB,EAAE,UAAU,KAAK,IAAI;YACvC,CAAC,oBAAoB,UAAU,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI;SAC1D,CAAC,CAAA;QACF,OAAO,CACH,cAAK,SAAS,EAAE,SAAS,YACrB,KAAC,WAAW,IAAC,GAAG,EAAE,GAAG,KAAM,IAAI,YAAG,QAAQ,GAAe,GACvD,CACT,CAAA;IACL,CAAC;IACD,OAAO,CACH,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAM,IAAI,YAAG,QAAQ,GAAe,CAC5E,CAAA;AACL,CAAC,CAAC,CAAA"}

package/dist/TablePagination.d.ts

@@ -0,0 +1,6 @@
+import { TablePaginationProps } from "./types";
+declare function TablePagination({ page, rowsPerPage, onChangePage, count, size, showFirst, showLast, className, rowsPerPageProps, ...rest }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TablePagination {
+    var displayname: string;
+}
+export default TablePagination;

package/dist/TablePagination.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import RowsPerPage from "./RowsPerPage";
+import classNames from "classnames";
+function TablePagination({ page, rowsPerPage, onChangePage, count, size, showFirst, showLast, className, rowsPerPageProps, ...rest }) {
+    const first = count === 0 ? 0 : (page * rowsPerPage) + 1;
+    const last = Math.min(page * rowsPerPage + rowsPerPage, count);
+    const lastPage = rowsPerPage === 0 ? 0 : Math.floor((count - 1) / rowsPerPage);
+    const buttonClassName = classNames("btn btn-link", { [`btn-${size}`]: !!size });
+    return (_jsxs("div", { className: classNames("row g-3 justify-content-end", className), ...rest, children: [!!rowsPerPageProps && (_jsx("div", { className: "col-auto", children: _jsx(RowsPerPage, { ...rowsPerPageProps, value: rowsPerPage, size: size }) })), _jsx("div", { className: "col-auto", children: _jsxs("div", { className: "row g-3 flex-nowrap align-items-baseline", children: [_jsxs("div", { className: "col-auto", children: [first, "-", last, " of ", count] }), showFirst && (_jsx("div", { className: "col-auto", children: _jsx("button", { className: buttonClassName, disabled: page === 0, onClick: () => onChangePage(0), "aria-label": "First page", children: _jsx("span", { className: "bi-chevron-bar-left", "aria-hidden": "true" }) }) })), _jsx("div", { className: "col-auto", children: _jsx("button", { className: buttonClassName, disabled: page === 0, onClick: () => onChangePage(page - 1), "aria-label": "Previous page", children: _jsx("span", { className: "bi-chevron-left", "aria-hidden": "true" }) }) }), _jsx("div", { className: "col-auto", children: _jsx("button", { className: buttonClassName, disabled: page >= lastPage, onClick: () => onChangePage(page + 1), "aria-label": "Next page", children: _jsx("span", { className: "bi-chevron-right", "aria-hidden": "true" }) }) }), showLast && (_jsx("div", { className: "col-auto", children: _jsx("button", { className: buttonClassName, disabled: page >= lastPage, onClick: () => onChangePage(lastPage), "aria-label": "Last page", children: _jsx("span", { className: "bi-chevron-bar-right", "aria-hidden": "true" }) }) }))] }) })] }));
+}
+TablePagination.displayname = 'TablePagination';
+export default TablePagination;
+//# sourceMappingURL=TablePagination.js.map

package/dist/TablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.js","sourceRoot":"","sources":["../src/TablePagination.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,SAAS,eAAe,CAAC,EACI,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,GAAG,IAAI,EACY;IAE5C,MAAM,KAAK,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IACzD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,WAAW,GAAG,WAAW,EAAE,KAAK,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC;IAE/E,MAAM,eAAe,GAAG,UAAU,CAAC,cAAc,EAAE,EAAC,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,EAAC,CAAC,CAAC;IAE9E,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,6BAA6B,EAAE,SAAS,CAAC,KAAM,IAAI,aACzE,CAAC,CAAC,gBAAgB,IAAI,CACnB,cAAK,SAAS,EAAC,UAAU,YACrB,KAAC,WAAW,OAAK,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,GAClE,CACT,EACD,cAAK,SAAS,EAAC,UAAU,YACrB,eAAK,SAAS,EAAC,0CAA0C,aACrD,eAAK,SAAS,EAAC,UAAU,aACpB,KAAK,OAAG,IAAI,UAAM,KAAK,IACtB,EACL,SAAS,IAAI,CACV,cAAK,SAAS,EAAC,UAAU,YACrB,iBAAQ,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,KAAK,CAAC,EAChD,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAa,YAAY,YAC3D,eAAM,SAAS,EAAC,qBAAqB,iBAAa,MAAM,GAAE,GACrD,GACP,CACT,EACD,cAAK,SAAS,EAAC,UAAU,YACrB,iBAAQ,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,KAAK,CAAC,EAChD,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,gBAAa,eAAe,YACrE,eAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,GAAE,GACjD,GACP,EACN,cAAK,SAAS,EAAC,UAAU,YACrB,iBAAQ,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,IAAI,QAAQ,EACtD,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,gBAAa,WAAW,YACjE,eAAM,SAAS,EAAC,kBAAkB,iBAAa,MAAM,GAAE,GAClD,GACP,EACL,QAAQ,IAAI,CACT,cAAK,SAAS,EAAC,UAAU,YACrB,iBAAQ,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,IAAI,QAAQ,EACtD,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,gBAAa,WAAW,YACjE,eAAM,SAAS,EAAC,sBAAsB,iBAAa,MAAM,GAAE,GACtD,GACP,CACT,IACC,GACJ,IACJ,CACT,CAAA;AACL,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAChD,eAAe,eAAe,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { default as DataTable } from './DataTable';
+export { default as DataTableRow } from './DataTableRow';
+export { default as DataTableTBody } from './DataTableTBody';
+export { default as DataTableTH } from './DataTableTH';
+export { default as SortableTable } from './SortableTable';
+export { default as SortableTableHead } from './SortableTableHead';
+export { default as SortableTableTH } from './SortableTableTH';
+export { default as RowsPerPage, defaultRowsPerPageValues } from './RowsPerPage';
+export { default as TablePagination } from './TablePagination';
+export type { DataTableHeadProps, DataTableField, DataTableTHProps, DataTableClassNames, DataTableProps, SortableTableField, DataTableRowProps, DataTableTBodyProps, SortableTableTHProps, SortableTableHeadProps, SortProps, SortableTableProps, UISize, UIFlexAlign, TablePaginationProps, RowsPerPageProps } from './types';

package/dist/index.js

@@ -0,0 +1,10 @@
+export { default as DataTable } from './DataTable';
+export { default as DataTableRow } from './DataTableRow';
+export { default as DataTableTBody } from './DataTableTBody';
+export { default as DataTableTH } from './DataTableTH';
+export { default as SortableTable } from './SortableTable';
+export { default as SortableTableHead } from './SortableTableHead';
+export { default as SortableTableTH } from './SortableTableTH';
+export { default as RowsPerPage, defaultRowsPerPageValues } from './RowsPerPage';
+export { default as TablePagination } from './TablePagination';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,aAAa,CAAC;AACjD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAC,OAAO,IAAI,WAAW,EAAE,wBAAwB,EAAC,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,mBAAmB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,104 @@
+import React, { HTMLAttributes, ReactNode, TableHTMLAttributes } from 'react';
+import classNames from "classnames";
+export interface SortProps<T = unknown> {
+    field: keyof T;
+    ascending: boolean;
+}
+export type UISize = 'sm' | 'lg' | '';
+export type UITableSize = UISize | 'xs';
+export type DataTableClassNames<T = unknown> = string | classNames.Argument | ((row: T) => (string | classNames.Argument));
+export type UIFlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+export interface DataTableField<T = unknown> {
+    id?: number | string;
+    field: keyof T;
+    title: ReactNode;
+    as?: 'td' | 'th';
+    align?: 'start' | 'center' | 'end';
+    render?: (row: T) => ReactNode;
+    className?: DataTableClassNames<T>;
+    colSpan?: number;
+    thProps?: Omit<DataTableTHProps<T>, 'field'>;
+    cellProps?: TableHTMLAttributes<HTMLTableCellElement>;
+}
+export interface SortableTableField<T = unknown> extends DataTableField<T> {
+    sortable?: boolean;
+}
+export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTableElement> {
+    fields: DataTableField<T>[];
+    data: T[];
+    keyField: keyof T | ((row: T) => string | number);
+    size?: UITableSize;
+    sticky?: boolean;
+    responsive?: boolean | "sm" | "md" | "lg" | "xl" | 'xxl';
+    rowClassName?: DataTableClassNames<T>;
+    renderRow?: (row: T) => React.ReactNode;
+    onSelectRow?: (row: T) => T | void;
+    selected?: string | number | ((row: T) => boolean);
+    tfoot?: React.ReactElement<HTMLTableSectionElement>;
+    tableHeadProps?: DataTableHeadProps<T>;
+    children?: ReactNode;
+}
+export interface DataTableCellProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableCellElement>, 'className'> {
+    field: DataTableField<T>;
+    row: T;
+    as?: 'td' | 'th';
+    className?: string | classNames.Argument;
+    children?: React.ReactNode;
+}
+export interface DataTableTHProps<T = unknown> extends Omit<DataTableCellProps<T>, 'row'> {
+    as?: 'th';
+}
+export interface DataTableHeadProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
+    fields: DataTableField<T>[];
+}
+export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
+    fields: DataTableField<T>[];
+    data: T[];
+    keyField: keyof T | ((row: T) => string | number);
+    rowClassName?: DataTableClassNames<T>;
+    renderRow?: (row: T) => React.ReactNode;
+    onSelectRow?: (row: T) => T | void;
+    selected?: string | number | ((row: T) => boolean);
+    children?: ReactNode;
+}
+export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
+    rowClassName?: string | classNames.Argument | ((row: T) => string | classNames.Argument);
+    selected?: boolean;
+    fields: DataTableField<T>[];
+    row: T;
+    trRef?: React.Ref<HTMLTableRowElement>;
+    onClick?: (row?: T) => T | void;
+}
+export interface SortableTableProps<T = unknown> extends DataTableProps<T> {
+    currentSort: SortProps<T>;
+    onChangeSort: (sort: SortProps<T>) => void;
+}
+export interface SortableTableHeadProps<T = unknown> extends DataTableHeadProps<T> {
+    currentSort: SortProps<T>;
+    fields: SortableTableField<T>[];
+    onChangeSort: (sort: SortProps<T>) => void;
+}
+export interface SortableTableTHProps<T = unknown> extends Omit<DataTableTHProps<T>, 'onClick'> {
+    field: SortableTableField<T>;
+    sorted?: boolean;
+    ascending?: boolean;
+    onClick: (sort: SortProps<T>) => void;
+}
+export interface RowsPerPageProps extends Omit<HTMLAttributes<HTMLSelectElement>, 'onChange'> {
+    value: number;
+    pageValues?: number[];
+    label?: string;
+    size?: UISize;
+    className?: string;
+    onChange: (value: number) => void;
+}
+export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
+    page: number;
+    rowsPerPage: number;
+    onChangePage: (page: number) => void;
+    count: number;
+    size?: UISize;
+    showFirst?: boolean;
+    showLast?: boolean;
+    rowsPerPageProps?: Omit<RowsPerPageProps, 'value'>;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare function noop(): void;

package/dist/utils.js

@@ -0,0 +1,2 @@
+export function noop() { }
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,IAAI,KAAG,CAAC"}

package/eslint.config.mjs

@@ -0,0 +1,14 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@chumsinc/sortable-tables",
+  "version": "2.0.6",
+  "main": "./dist/index.js",
+  "source": "./src/index.tsx",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "@emotion/styled": "^11.14.0",
+    "classnames": "*",
+    "react": ">=18.1.0",
+    "react-dom": ">=18.1.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist/",
+    "compile": "tsc",
+    "dev": "webpack serve --config webpack.dev.mjs --progress",
+    "build": "npm run clean && npm run compile",
+    "version": "auto-changelog -p && git add CHANGELOG.md"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@emotion/styled": "^11.14.0",
+    "@eslint/js": "^9.8.0",
+    "@types/node": "^22.1.0",
+    "@types/numeral": "^2.0.3",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "auto-changelog": "^2.4.0",
+    "bootstrap": "^5.3.2",
+    "bootstrap-icons": "^1.11.1",
+    "classnames": "^2.3.2",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.8.0",
+    "eslint-plugin-react": "^7.35.0",
+    "globals": "^15.9.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "sass-loader": "^16.0.0",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.2.2",
+    "typescript-eslint": "^8.0.1",
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.9.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-manifest-plugin": "^5.0.0",
+    "webpack-merge": "^6.0.1"
+  },
+  "auto-changelog": {
+    "template": "changelog-template.hbs",
+    "unreleased": true,
+    "commitLimit": false,
+    "breakingPattern": "BREAKING CHANGE:"
+  },
+  "overrides": {
+    "eslint": "^9.8.0"
+  },
+  "description": "A sortable table module package for Chums, Inc.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ChumsInc/sortable-tables.git"
+  },
+  "author": "Steve Montgomery",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ChumsInc/sortable-tables/issues"
+  },
+  "homepage": "https://github.com/ChumsInc/sortable-tables#readme",
+  "directories": {
+    "test": "test"
+  },
+  "dependencies": {},
+  "keywords": [
+    "Bootstrap",
+    "Table"
+  ]
+}

package/public/index.html

@@ -0,0 +1,28 @@
+<!doctype html public "storage">
+<html lang="en-us">
+<head>
+    <meta charSet="utf-8"/>
+    <title>CHUMS!</title>
+    <meta name="description" content="Chums App "/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400;700&amp;family=Roboto:wght@100;300;400;700&amp;display=swap"
+          rel="stylesheet">
+    <link rel="stylesheet" href="https://intranet.chums.com/node_modules/bootstrap-icons/font/bootstrap-icons.css">
+    <link rel="stylesheet" type="text/css"
+          href="https://intranet.chums.com/node_modules/bootstrap/dist/css/bootstrap.css">
+
+    <link rel="stylesheet" type="text/css" href="https://intranet.chums.com/css/intranet.css?v=1494436263">
+    <link rel="stylesheet" type="text/css" href="https://intranet.chums.com/css/chums.css">
+    <!--    <link rel="stylesheet" href="/public/styles.css"/>-->
+    <script src="https://intranet.chums.com/js/preferred-theme.js"></script>
+</head>
+<body>
+<div id="app" class="container-fluid">
+    <strong>Loading</strong> the app.
+</div>
+<script src="main.js"></script>
+<!--<script src="/chums.js"></script>-->
+<script src="vendors.js"></script>
+<script src="vendors-react.js"></script>
+</body>
+</html>