@chumsinc/sortable-tables 2.2.0 → 3.0.1

package/CHANGELOG.md

@@ -7,7 +7,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v2.2.0](https://github.com/ChumsInc/sortable-tables/compare/v2.1.3...v2.2.0)
+#### [v3.0.1](https://github.com/ChumsInc/sortable-tables/compare/v3.0.0...v3.0.1)
+
+> 2026-01-19
+
+
+
+
+### Commits
+
+- [`34ca622`](https://github.com/ChumsInc/sortable-tables/commit/34ca622de8fc42834d663a4d680091cf69f283cf)  chore: npm updates & build
+- [`34d095c`](https://github.com/ChumsInc/sortable-tables/commit/34d095ce9ec7c406b51a771d95e881cbc2459a94)  fix: add StandaloneDataTableRow
+- [`830d3ef`](https://github.com/ChumsInc/sortable-tables/commit/830d3ef5375905427c6434f8fd64ccfd34cbe679)  chore: update readme
+
+#### [v3.0.0](https://github.com/ChumsInc/sortable-tables/compare/v2.2.0...v3.0.0) - 2025-12-30
+
+> 2025-12-30
+
+
+
+
+### Commits
+
+- [`372fb75`](https://github.com/ChumsInc/sortable-tables/commit/372fb75f6401cdafe51a8c94bb725a9b5bb55054)  Add DataTableProvider to allow for better modifying of columns.
+- [`54f85e5`](https://github.com/ChumsInc/sortable-tables/commit/54f85e50d2390e7dfd2b9b3f4aad1a215abc51a5)  Add DataTableProvider to allow for better modifying of columns.
+- [`ca0dee4`](https://github.com/ChumsInc/sortable-tables/commit/ca0dee45c5f0e76c9239642e5946b171b0559fa0)  chore: add type definitions for SortableTableHeadWrapper, declare component with displayName
+- [`d5cb405`](https://github.com/ChumsInc/sortable-tables/commit/d5cb40577c6e9edbe84a0770af756b6e28d8ae5d)  chore: replace "collapse" with "visible" for field visibility control, filter hidden fields in table rendering
+- [`f8e67fb`](https://github.com/ChumsInc/sortable-tables/commit/f8e67fbc6f38cb8e457cb0f864abd3933b9f895b)  chore: move field visibility filter to DataTableCell, simplify SortableTableHead rendering logic
+- [`0d376b5`](https://github.com/ChumsInc/sortable-tables/commit/0d376b5567005ace9a64e14b6e593d5a7f617b20)  chore: add StandaloneSortHelper to help handle sortChanges in StandaloneSortableTable component
+- [`0780ecf`](https://github.com/ChumsInc/sortable-tables/commit/0780ecf033a3291e65d080915e14cb3c9812a1b6)  chore: add testing for standalone tables
+
+#### [v2.2.0](https://github.com/ChumsInc/sortable-tables/compare/v2.1.3...v2.2.0) - 2025-12-16
 
 > 2025-12-16
 

package/README.md

@@ -8,10 +8,10 @@ This components uses [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/content/t
 additional table size 'xs' for less padding.
 
 ## Usage
-Typical Usage:
+### Configure Columns
 ```tsx
-import {SortableTable, SortableTableField, SortProps} from "@chumsinc/sortable-tables";
-import {ProductLine} from 'chums-type'
+import {StandaloneSortableTable, SortableTableField, SortProps} from "@chumsinc/sortable-tables";
+import {ProductLine} from 'chums-types'
 
 const fields: SortableTableField<ProductLine>[] = [
   {field: 'ProductLine', title: 'Prod Line', sortable: true, as: 'th'},
@@ -38,6 +38,94 @@ const fields: SortableTableField<ProductLine>[] = [
     align: 'end'
   },
 ];
+```
+### Usage in a DataTableProvider
+```tsx
+export default function Main() {
+    const dispatch = useAppDispatch();
+    const initialSort: SortProps<ProductLine> = {field: 'ProductLine', ascending: true};
+
+    return (
+            <DataTableProvider initialFields={tableFields} initialSort={initialSort}>
+              <TestTable />
+            </DataTableProvider>
+    )
+}
+
+function TestTable() {
+    const dispatch = useAppDispatch();
+    const data = useAppSelector(selectSortedProductLines);
+    const sort = useAppSelector(selectProductLinesSort);
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    const [, setCurrentSort] = useTableSort<ProductLine>();
+
+    useEffect(() => {
+        setCurrentSort(sort);
+        setPage(0)
+    }, [sort, setCurrentSort])
+    
+  const rowsPerPageChangeHandler = (rpp: number) => {
+    setPage(0);
+    setRowsPerPage(rpp);
+  }
+
+  const sortChangeHandler = (sort: SortProps<ProductLine>) => {
+        dispatch(setProductLinesSort(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" aria-label="Images Per Page"></span>,
+                               pageValues: [5, 10, 15, 25, 50, 100]
+                             }}
+                             showFirst={data.length > rowsPerPage}
+                             showLast={data.length > rowsPerPage}
+                             count={data.length}/>
+          </div>
+
+  )
+}
+
+function TableColumnsHandler() {
+  const [getField, updateField] = useTableContext<ProductLine>();
+  const [collapse, setCollapse] = React.useState<boolean>(getField('ProductLineDesc')?.collapse ?? false);
+  const id = useId();
+
+  const toggleFieldCollapse = useCallback((key: string, next: boolean) => {
+    console.debug('toggleFieldVisibility', key, next);
+    updateField(key, (prev) => ({...prev, collapse: next}))
+    setCollapse(next);
+  }, [updateField]);
+
+  const handleVisibleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    toggleFieldCollapse('ProductLineDesc', ev.target.checked);
+  }
+
+  return (
+          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: '1rem'}}>
+            <input type="checkbox" checked={collapse} id={id} onChange={handleVisibleChange}/>
+            <label htmlFor={id}>Hide Description</label>
+          </div>
+  )
+}
+
+
+```
+### Usage as a Standalone Table:
+```tsx
+import {StandaloneSortableTable, SortableTableField, SortProps} from "@chumsinc/sortable-tables";
+import {ProductLine} from 'chums-type'
+import {fields} from './fields'
 
 export default function ProductLinesList() {
   const [sort, setSort] = useState<SortProps<ProductLine>>({field: 'ProductLine', ascending: true});
@@ -58,7 +146,7 @@ export default function ProductLinesList() {
 
   return (
           <div>
-            <SortableTable currentSort={sort} onChangeSort={setSort} fields={fields} size="lg" responsive
+            <StandaloneSortableTable 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"
@@ -75,8 +163,10 @@ export default function ProductLinesList() {
 } 
 ```
 
+## 
 ## Breaking Changes
 Breaking changes from `chums-components`
 - TablePagination
   - The rows per page options were moved to a new attribute `rowsPerPageProps`
   - RowsPerPage now renders as a bootstrap InputGroup element
+- For old standalone tables without the ContextProvider use version 2.1.3

package/dist/DataTable.d.ts

@@ -1,5 +1,5 @@
 import { DataTableProps } from './types';
-declare function DataTable<T = unknown>({ fields, ...rest }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function DataTable<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;
 declare namespace DataTable {
     var displayName: string;
 }

package/dist/DataTableCell.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { DataTableCellProps } from './types';
-export default function DataTableCell<T = unknown>({ field, row, className, as, ...rest }: DataTableCellProps<T>): import('react').DetailedReactHTMLElement<{
+declare function DataTableCell<T = unknown>({ field, row, className, as, ...rest }: DataTableCellProps<T>): import('react').DetailedReactHTMLElement<{
     children?: ReactNode | undefined;
     align?: "left" | "center" | "right" | undefined;
     bgcolor?: string | undefined;
@@ -292,4 +292,8 @@ export default function DataTableCell<T = unknown>({ field, row, className, as,
     className: string;
     scope: string | undefined;
     colSpan: number | undefined;
-}, HTMLElement>;
+}, HTMLElement> | null;
+declare namespace DataTableCell {
+    var displayName: string;
+}
+export default DataTableCell;

package/dist/DataTableCols.d.ts

@@ -1,4 +1,4 @@
-declare function DataTableCols(): import("react/jsx-runtime").JSX.Element;
+declare function DataTableCols<T = unknown>(): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTableCols {
     var displayName: string;
 }

package/dist/DataTableContext.d.ts

@@ -0,0 +1,10 @@
+import { DataTableField, SortProps } from './types';
+export interface TableContextData<T = unknown> {
+    fields: DataTableField<T>[];
+    setFields: (next: DataTableField<T>[] | ((prev: DataTableField<T>[]) => DataTableField<T>[])) => void;
+    sort: SortProps<T> | null;
+    setSort: (next: SortProps<T> | null | ((prev: SortProps<T> | null) => SortProps<T> | null)) => void;
+    getField: (key: string | number) => DataTableField<T> | undefined;
+    updateField: (key: string | number, arg: Partial<DataTableField<T>>) => void;
+}
+export declare const DataTableContext: import('react').Context<TableContextData<unknown> | null>;

package/dist/DataTableProvider.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { DataTableField, SortProps } from './types';
+export interface TableProviderProps<T = unknown> {
+    initialFields: DataTableField<T>[];
+    initialSort?: SortProps<T> | null;
+    children: ReactNode;
+}
+declare function DataTableProvider<T = unknown>({ children, initialFields, initialSort, }: TableProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableProvider {
+    var displayName: string;
+}
+export default DataTableProvider;

package/dist/DataTableTH.d.ts

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

package/dist/SortableTable.d.ts

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

package/dist/SortableTableHead.d.ts

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

package/dist/SortableTableHeadWrapper.d.ts

@@ -0,0 +1,9 @@
+import { SortProps } from './types';
+export interface SortableTableHeadWrapperProps<T = unknown> {
+    onChangeSort: (sort: SortProps<T>) => void;
+}
+declare function SortableTableHeadWrapper<T = unknown>({ onChangeSort, }: SortableTableHeadWrapperProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace SortableTableHeadWrapper {
+    var displayName: string;
+}
+export default SortableTableHeadWrapper;

package/dist/SortableTableTH.d.ts

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

package/dist/StandaloneDataTable.d.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,6 @@
+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/dist/Table.d.ts

@@ -1,5 +1,6 @@
-import { default as React, TableHTMLAttributes } from 'react';
+import { RefObject, 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;
+export interface StyledTableProps extends TableHTMLAttributes<HTMLTableElement>, Pick<DataTableProps, 'sticky' | 'responsive'> {
+    ref?: RefObject<HTMLTableElement>;
+}
+export default function Table({ sticky, responsive, children, className, ref, ...rest }: StyledTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),m=require("react"),C=require("@emotion/styled"),j=m.createContext(null);function g({children:e,initialFields:t=[]}){const[a,n]=m.useState(t),l=m.useCallback(i=>{n(i)},[]),o=m.useCallback((i,u)=>{const b=a.map(d=>d.id===i?{...d,...u}:d);n(b)},[a]),c=m.useCallback(i=>a.find(u=>u.id===i),[a]),r=m.useMemo(()=>({fields:a,setFields:l,updateField:o,getField:c}),[a,l,o,c]);return s.jsx(j.Provider,{value:r,children:e})}function F(){const e=m.useContext(j);if(!e)throw new Error("useTableContext must be used within a FieldsProvider");return e}function f(){return F().fields}function V(e){const t=m.useContext(j);if(!t)throw new Error("useTableContext must be used within a FieldsProvider");return t.fields.find(n=>n.id===e)??null}function G(){return m.useContext(j)!==null}function R(e){var t,a,n="";if(typeof e=="string"||typeof e=="number")n+=e;else if(typeof e=="object")if(Array.isArray(e)){var l=e.length;for(t=0;t<l;t++)e[t]&&(a=R(e[t]))&&(n&&(n+=" "),n+=a)}else for(a in e)e[a]&&(n&&(n+=" "),n+=a);return n}function x(){for(var e,t,a=0,n="",l=arguments.length;a<l;a++)(e=arguments[a])&&(t=R(e))&&(n&&(n+=" "),n+=t);return n}const H=C.table`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),m=require("react"),R=require("@emotion/styled"),f=m.createContext(null);function y({children:e,initialFields:t=[],initialSort:a=null}){const[s,l]=m.useState(t),[r,i]=m.useState(a),c=m.useCallback(x=>{l(x)},[]),o=m.useCallback(x=>{i(x)},[]),u=m.useCallback((x,p)=>{const N=s.map(j=>j.id===x?{...j,...p}:j);l(N)},[s]),d=m.useCallback(x=>s.find(p=>p.id===x),[s]),b=m.useMemo(()=>({fields:s,setFields:c,sort:r,setSort:o,getField:d,updateField:u}),[s,c,r,o,u,d]);return n.jsx(f.Provider,{value:b,children:e})}y.displayName="DataTableProvider";function E(e){var t,a,s="";if(typeof e=="string"||typeof e=="number")s+=e;else if(typeof e=="object")if(Array.isArray(e)){var l=e.length;for(t=0;t<l;t++)e[t]&&(a=E(e[t]))&&(s&&(s+=" "),s+=a)}else for(a in e)e[a]&&(s&&(s+=" "),s+=a);return s}function h(){for(var e,t,a=0,s="",l=arguments.length;a<l;a++)(e=arguments[a])&&(t=E(e))&&(s&&(s+=" "),s+=t);return s}const F=R.table`
     --table-sticky-top: ${e=>e.sticky?"0":void 0};
 
     thead {
@@ -10,11 +10,11 @@
             background: ${e=>e.sticky?"linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))":"unset"};
         }
     }
-`,w=m.forwardRef(function({sticky:t,responsive:a,children:n,className:l,...o},c){if(a){const r=x(l,{"table-responsive":a===!0,[`table-responsive-${a}`]:a!==!0});return s.jsx("div",{className:r,children:s.jsx(H,{ref:c,...o,children:n})})}return s.jsx(H,{className:l,sticky:t,ref:c,...o,children:n})});function N({field:e,className:t,children:a,...n}){const l=x({[`text-${e.align}`]:!!e.align},t);return s.jsx("th",{className:l,scope:"col",...n,children:a??e.title})}N.displayName="DataTableTH";function P({...e}){const t=f();return s.jsx("thead",{...e,children:s.jsx("tr",{children:t.map((a,n)=>s.jsx(N,{...a.thProps,field:a,className:x(typeof a.className=="function"?{[`text-${a.align}`]:!!a.align}:a.className)},a.id??n))})})}P.displayName="DataTableHead";function M({className:e,size:t,responsive:a,sticky:n,data:l,keyField:o,rowClassName:c,renderRow:r,onSelectRow:i,selected:u,tableHeadProps:b,children:d,tfoot:p,...h}){const v=x("table",e,{[`table-${t}`]:!!t});return s.jsxs(w,{sticky:n,responsive:a,className:v,...h,children:[s.jsx(y,{}),s.jsx(P,{...b}),!!l.length&&s.jsx(T,{data:l,keyField:o,rowClassName:c,renderRow:r,onSelectRow:i,selected:u}),d,p]})}function W({fields:e,...t}){return s.jsx(g,{initialFields:e,children:s.jsx(M,{...t})})}W.displayName="DataTable";function I({field:e,row:t,className:a,as:n,...l}){const o=x({[`text-${e.align}`]:!!e.align},a,typeof e.className=="function"?e.className(t):e.className);return m.createElement(n??e.as??"td",{className:o,scope:(n??e.as)==="th"?"row":void 0,colSpan:e.colSpan,...e.cellProps,...l},t[e.field]===void 0&&!e.render?null:typeof e.render=="function"?e.render(t):t[e.field])}function D({className:e,rowClassName:t,selected:a,row:n,trRef:l,onClick:o,...c}){const r=f(),i=b=>{o?.(n,b)},u=typeof t=="function"?t(n):t;return n?s.jsx("tr",{ref:l,className:x({"table-active":a},e,u),onClick:i,...c,children:r.map((b,d)=>s.jsx(I,{field:b,row:n},b?.id??d))}):null}D.displayName="DataTableRow";function T({data:e,keyField:t,rowClassName:a,renderRow:n,onSelectRow:l,selected:o="",children:c,...r}){return s.jsxs("tbody",{...r,children:[e.map(i=>{const u=String(typeof t=="function"?t(i):i[t]),b=typeof o=="function"?o(i):u===o;return n?n(i):s.jsx(D,{onClick:l,rowClassName:a,row:i,selected:b},u)}),c]})}T.displayName="DataTableTBody";const J=e=>{if(!e)return"flex-start";switch(e){case"end":return"flex-end";default:return"center"}},L=C.div`
+`;function M({sticky:e,responsive:t,children:a,className:s,ref:l,...r}){if(t){const i=h(s,{"table-responsive":t===!0,[`table-responsive-${t}`]:t!==!0});return n.jsx("div",{className:i,children:n.jsx(F,{ref:l,...r,children:a})})}return n.jsx(F,{className:s,sticky:e,ref:l,...r,children:a})}function v({field:e,className:t,children:a,...s}){if(e.visible===!1)return null;const l=h({[`text-${e.align}`]:!!e.align},t);return n.jsx("th",{className:l,scope:"col",...s,children:a??e.title})}v.displayName="DataTableTH";function T(){const e=m.useContext(f);if(!e)throw new Error("useTableContext must be used within a DataTableProvider");return[e.fields,e.setFields]}function q({...e}){const[t]=T();return n.jsx("thead",{...e,children:n.jsx("tr",{children:t.map((a,s)=>n.jsx(v,{...a.thProps,field:a,className:h(typeof a.className=="function"?{[`text-${a.align}`]:!!a.align}:a.className)},String(a.id??s)))})})}q.displayName="DataTableHead";function D({className:e,size:t,responsive:a,sticky:s,data:l,keyField:r,rowClassName:i,renderRow:c,onSelectRow:o,selected:u,tableHeadProps:d,children:b,tfoot:x,...p}){const N=h("table",e,{[`table-${t}`]:!!t});return n.jsxs(M,{sticky:s,responsive:a,className:N,...p,children:[n.jsx(C,{}),n.jsx(q,{...d}),!!l.length&&n.jsx(S,{data:l,keyField:r,rowClassName:i,renderRow:c,onSelectRow:o,selected:u}),b,x]})}D.displayName="DataTable";function B({fields:e,...t}){return n.jsx(y,{initialFields:e,children:n.jsx(D,{...t})})}B.displayName="StandaloneDataTable";function W({field:e,row:t,className:a,as:s,...l}){if(e.visible===!1)return null;const r=h({[`text-${e.align}`]:!!e.align},a,typeof e.className=="function"?e.className(t):e.className);return m.createElement(s??e.as??"td",{className:r,scope:(s??e.as)==="th"?"row":void 0,colSpan:e.colSpan,...e.cellProps,...l},t[e.field]===void 0&&!e.render?null:typeof e.render=="function"?e.render(t):t[e.field])}W.displayName="DataTableCell";function k({className:e,rowClassName:t,selected:a,row:s,trRef:l,onClick:r,...i}){const[c]=T(),o=d=>{r?.(s,d)},u=typeof t=="function"?t(s):t;return s?n.jsx("tr",{ref:l,className:h({"table-active":a},e,u),onClick:o,...i,children:c.map((d,b)=>n.jsx(W,{field:d,row:s},String(d?.id??b)))}):null}k.displayName="DataTableRow";function S({data:e,keyField:t,rowClassName:a,renderRow:s,onSelectRow:l,selected:r="",children:i,...c}){return n.jsxs("tbody",{...c,children:[e.map(o=>{const u=String(typeof t=="function"?t(o):o[t]),d=typeof r=="function"?r(o):u===r;return s?s(o):n.jsx(k,{onClick:l,rowClassName:a,row:o,selected:d},u)}),i]})}S.displayName="DataTableTBody";function g(){const e=m.useContext(f);if(!e)throw new Error("useTableSort must be used within a DataTableProvider");return[e.sort,e.setSort]}const G=e=>e?e==="end"?"flex-end":"center":"flex-start",I=R.div`
     display: flex;
     width: 100%;
     flex-direction: ${e=>e.align==="end"?"row-reverse":"row"};
-    justify-content: ${e=>J(e.align)};
+    justify-content: ${e=>G(e.align)};
 
     .sort-icon {
         flex-grow: ${e=>e.align==="end"?"1":"0"};
@@ -26,9 +26,5 @@
         opacity: 0.75;
         transition: opacity 0.2s;
     }
-`;function S({field:e,sorted:t,ascending:a,className:n,onClick:l}){if(!e.sortable)return s.jsx(N,{field:e,className:n});const{className:o,...c}=e.thProps??{},r=x(n,o,{[`text-${e.align}`]:!!e.align}),i=()=>{l({field:e.field,ascending:t?!a:!0})},u={"bi-arrow-down":a,"bi-arrow-up":!a};return s.jsx("th",{...c,className:x("sortable",r),scope:"col",onClick:i,children:s.jsxs(L,{sorted:t,align:e.align,children:[s.jsx("div",{className:"field-title",children:e.title}),s.jsx("div",{className:x("me-1 sort-icon",u)})]})})}S.displayName="SortableTableTH";function k({currentSort:e,onChangeSort:t}){const a=f(),{field:n,ascending:l}=e;return s.jsx("thead",{children:s.jsx("tr",{children:a.map((o,c)=>s.jsx(S,{field:o,sorted:n===o.field,ascending:l,className:x(typeof o.className=="function"?{[`text-${o.align}`]:!!o.align}:o.className),onClick:t},c))})})}k.displayName="SortableTableHead";function q({className:e,size:t,responsive:a,sticky:n,data:l,keyField:o,rowClassName:c,renderRow:r,onSelectRow:i,selected:u,tableHeadProps:b,children:d,tfoot:p,currentSort:h,onChangeSort:v,..._}){const A=x("table",e,{[`table-${t}`]:!!t});return s.jsxs(w,{className:A,responsive:a,sticky:n,..._,children:[s.jsx(y,{}),s.jsx(k,{currentSort:h,onChangeSort:v,...b}),!!l.length&&s.jsx(T,{data:l,keyField:o,rowClassName:c,renderRow:r,onSelectRow:i,selected:u}),d,p]})}function B({fields:e,...t}){return s.jsx(g,{initialFields:e,children:s.jsx(q,{...t})})}B.displayName="SortableTable";const O=[10,25,50,100,250,500,1e3];function $({value:e,pageValues:t=O,size:a,label:n,className:l,onChange:o,...c}){const r=m.useId(),i=d=>o(Number(d.target.value)),u=l??x("form-select",{[`form-select-${a}`]:!!a}),b=x("input-group",{[`input-group-${a}`]:!!a});return s.jsxs("div",{className:b,children:[s.jsx("label",{className:"input-group-text",htmlFor:r,children:n??"Rows"}),s.jsx("select",{className:u,id:r,value:e,onChange:i,...c,children:t.map(d=>s.jsx("option",{value:d,children:d},d))})]},e)}$.displayName="RowsPerPage";function E({page:e,rowsPerPage:t,onChangePage:a,count:n,size:l,showFirst:o,showLast:c,className:r,rowsPerPageProps:i,...u}){const b=n===0?0:e*t+1,d=Math.min(e*t+t,n),p=t===0?0:Math.floor((n-1)/t),h=x("btn btn-link",{[`btn-${l}`]:!!l});return s.jsxs("div",{className:x("row g-3 justify-content-end",r),...u,children:[!!i&&s.jsx("div",{className:"col-auto",children:s.jsx($,{...i,value:t,size:l})}),s.jsx("div",{className:"col-auto",children:s.jsxs("div",{className:"row g-3 flex-nowrap align-items-baseline",children:[s.jsxs("div",{className:"col-auto",children:[b,"-",d," of ",n]}),o&&s.jsx("div",{className:"col-auto",children:s.jsx("button",{className:h,disabled:e===0,onClick:()=>a(0),"aria-label":"First page",children:s.jsx("span",{className:"bi-chevron-bar-left","aria-hidden":"true"})})}),s.jsx("div",{className:"col-auto",children:s.jsx("button",{className:h,disabled:e===0,onClick:()=>a(e-1),"aria-label":"Previous page",children:s.jsx("span",{className:"bi-chevron-left","aria-hidden":"true"})})}),s.jsx("div",{className:"col-auto",children:s.jsx("button",{className:h,disabled:e>=p,onClick:()=>a(e+1),"aria-label":"Next page",children:s.jsx("span",{className:"bi-chevron-right","aria-hidden":"true"})})}),c&&s.jsx("div",{className:"col-auto",children:s.jsx("button",{className:h,disabled:e>=p,onClick:()=>a(p),"aria-label":"Last page",children:s.jsx("span",{className:"bi-chevron-bar-right","aria-hidden":"true"})})})]})})]})}E.displayname="TablePagination";const K=C.col`
-    &.col-collapsed {
-        visibility: collapse;
-    }
-`;function y(){const e=f();return s.jsx("colgroup",{children:e.map((t,a)=>s.jsx(K,{className:x(t.colClassName,{"col-collapsed":t.collapse}),span:t.colSpan??1},a))})}y.displayName="DataTableCols";exports.DataTable=W;exports.DataTableCols=y;exports.DataTableProvider=g;exports.DataTableRow=D;exports.DataTableTBody=T;exports.DataTableTH=N;exports.DataTableWithContext=M;exports.RowsPerPage=$;exports.SortableTable=B;exports.SortableTableHead=k;exports.SortableTableTH=S;exports.SortableTableWithContext=q;exports.TablePagination=E;exports.useField=V;exports.useHasTableFieldsContext=G;exports.useTableContext=F;exports.useTableFields=f;
+`;function $({field:e,sorted:t,ascending:a,className:s,onClick:l}){if(e.visible===!1)return null;if(!e.sortable)return n.jsx(v,{field:e,className:s});const{className:r,...i}=e.thProps??{},c=h(s,r,{[`text-${e.align}`]:!!e.align}),o=()=>{l({field:e.field,ascending:t?!a:!0})},u={"bi-arrow-down":a,"bi-arrow-up":!a};return n.jsx("th",{...i,className:h("sortable",c),scope:"col",onClick:o,children:n.jsxs(I,{sorted:t,align:e.align,children:[n.jsx("div",{className:"field-title",children:e.title}),n.jsx("div",{className:h("me-1 sort-icon",u)})]})})}$.displayName="SortableTableTH";function H({onChangeSort:e}){const[t]=T(),[a]=g();return n.jsx("thead",{children:n.jsx("tr",{children:t.map((s,l)=>n.jsx($,{field:s,sorted:a?.field===s.field,ascending:a?.ascending,className:h(typeof s.className=="function"?{[`text-${s.align}`]:!!s.align}:s.className),onClick:e},l))})})}H.displayName="SortableTableHead";function _({onChangeSort:e}){const[t]=T(),[a]=g();return n.jsx(H,{fields:t,currentSort:a,onChangeSort:e})}_.displayName="SortableTableHeadWrapper";function w({className:e,size:t,responsive:a,sticky:s,data:l,keyField:r,rowClassName:i,renderRow:c,onSelectRow:o,selected:u,tableHeadProps:d,children:b,tfoot:x,onChangeSort:p,...N}){const j=h("table",e,{[`table-${t}`]:!!t});return n.jsxs(M,{className:j,responsive:a,sticky:s,...N,children:[n.jsx(C,{}),n.jsx(_,{onChangeSort:p,...d}),!!l.length&&n.jsx(S,{data:l,keyField:r,rowClassName:i,renderRow:c,onSelectRow:o,selected:u}),b,x]})}w.displayName="SortableTable";function J({nextSort:e}){const[,t]=g();return m.useEffect(()=>{console.log("setNextSort",e),t(e)},[e,t]),null}function A({fields:e,currentSort:t,...a}){return n.jsxs(y,{initialFields:e,initialSort:t,children:[n.jsx(J,{nextSort:t}),n.jsx(w,{...a})]})}A.displayName="StandaloneSortableTable";const L=[10,25,50,100,250,500,1e3];function P({value:e,pageValues:t=L,size:a,label:s,className:l,onChange:r,...i}){const c=m.useId(),o=b=>r(Number(b.target.value)),u=l??h("form-select",{[`form-select-${a}`]:!!a}),d=h("input-group",{[`input-group-${a}`]:!!a});return n.jsxs("div",{className:d,children:[n.jsx("label",{className:"input-group-text",htmlFor:c,children:s??"Rows"}),n.jsx("select",{className:u,id:c,value:e,onChange:o,...i,children:t.map(b=>n.jsx("option",{value:b,children:b},b))})]},e)}P.displayName="RowsPerPage";function V({page:e,rowsPerPage:t,onChangePage:a,count:s,size:l,showFirst:r,showLast:i,className:c,rowsPerPageProps:o,...u}){const d=s===0?0:e*t+1,b=Math.min(e*t+t,s),x=t===0?0:Math.floor((s-1)/t),p=h("btn btn-link",{[`btn-${l}`]:!!l});return n.jsxs("div",{className:h("row g-3 justify-content-end",c),...u,children:[!!o&&n.jsx("div",{className:"col-auto",children:n.jsx(P,{...o,value:t,size:l})}),n.jsx("div",{className:"col-auto",children:n.jsxs("div",{className:"row g-3 flex-nowrap align-items-baseline",children:[n.jsxs("div",{className:"col-auto",children:[d,"-",b," of ",s]}),r&&n.jsx("div",{className:"col-auto",children:n.jsx("button",{className:p,disabled:e===0,onClick:()=>a(0),"aria-label":"First page",children:n.jsx("span",{className:"bi-chevron-bar-left","aria-hidden":"true"})})}),n.jsx("div",{className:"col-auto",children:n.jsx("button",{className:p,disabled:e===0,onClick:()=>a(e-1),"aria-label":"Previous page",children:n.jsx("span",{className:"bi-chevron-left","aria-hidden":"true"})})}),n.jsx("div",{className:"col-auto",children:n.jsx("button",{className:p,disabled:e>=x,onClick:()=>a(e+1),"aria-label":"Next page",children:n.jsx("span",{className:"bi-chevron-right","aria-hidden":"true"})})}),i&&n.jsx("div",{className:"col-auto",children:n.jsx("button",{className:p,disabled:e>=x,onClick:()=>a(x),"aria-label":"Last page",children:n.jsx("span",{className:"bi-chevron-bar-right","aria-hidden":"true"})})})]})})]})}V.displayname="TablePagination";function C(){const[e]=T();return n.jsx("colgroup",{children:e.filter(t=>t.visible!==!1).map((t,a)=>n.jsx("col",{className:t.colClassName,span:t.colSpan??1},a))})}C.displayName="DataTableCols";function O(e){const t=m.useContext(f);if(!t)throw new Error("useField must be used within a DataTableProvider");return[t.fields.find(a=>a.id===e)??null,t.updateField]}function K(){const e=m.useContext(f);if(!e)throw new Error("useTableContext must be used within a DataTableProvider");return e}exports.DataTable=B;exports.DataTableCols=C;exports.DataTableContext=f;exports.DataTableProvider=y;exports.DataTableRow=k;exports.DataTableTBody=S;exports.DataTableTH=v;exports.DataTableWithContext=D;exports.RowsPerPage=P;exports.SortableTable=w;exports.SortableTableHead=H;exports.SortableTableTH=$;exports.StandaloneSortableTable=A;exports.TablePagination=V;exports.useField=O;exports.useTableContext=K;exports.useTableFields=T;exports.useTableSort=g;
 //# sourceMappingURL=index.cjs.js.map