@chumsinc/sortable-tables 2.1.2 → 3.0.0

package/CHANGELOG.md

@@ -7,15 +7,54 @@ 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.1.2](https://github.com/ChumsInc/sortable-tables/compare/v2.1.1...v2.1.2)
+#### [v3.0.0](https://github.com/ChumsInc/sortable-tables/compare/v2.2.0...v3.0.0)
+
+> 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
+
+
+
+
+### Commits
+
+- [`78c1ccc`](https://github.com/ChumsInc/sortable-tables/commit/78c1ccc7fe0ccb1a98077ecdbbe75f21a8b08da5)  chore: add new context-based table components and integrate TableProvider with useTableFields hook
+
+#### [v2.1.3](https://github.com/ChumsInc/sortable-tables/compare/v2.1.2...v2.1.3) - 2025-12-15
+
+> 2025-12-15
+
+
+
+
+### Commits
+
+- [`f4bdc3e`](https://github.com/ChumsInc/sortable-tables/commit/f4bdc3e6007cad72623eafe7d823cbb15c5edf68)  chore: replace classnames with clsx, add DataTableCols declaration, add DataTableCols with option for visibility:collapse
+
+#### [v2.1.2](https://github.com/ChumsInc/sortable-tables/compare/v2.1.1...v2.1.2) - 2025-12-02
 
 > 2025-12-02
 
 
 
 
-### Commits
-
+### Commits
+
 - [`210a01e`](https://github.com/ChumsInc/sortable-tables/commit/210a01e9cf4e62a63d569bd6ced41a26f17b5ae5)  chore: update dependencies in package-lock.json
 
 #### [v2.1.1](https://github.com/ChumsInc/sortable-tables/compare/v2.1.0...v2.1.1) - 2025-11-04
@@ -25,8 +64,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`be79047`](https://github.com/ChumsInc/sortable-tables/commit/be79047541456eee2006706438b55aa61aed4fc1)  chore: update types and dependencies
 
 #### [v2.1.0](https://github.com/ChumsInc/sortable-tables/compare/v2.0.14...v2.1.0) - 2025-11-03
@@ -36,8 +75,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`7b2a057`](https://github.com/ChumsInc/sortable-tables/commit/7b2a057454d2b46affe2cccfce060c7812065a23)  migrate to vite library build
 - [`ae562e9`](https://github.com/ChumsInc/sortable-tables/commit/ae562e9c631b94c367f87ff5df70e849ee0405a2)  migrate to vite library build
 
@@ -48,8 +87,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`48f4b1f`](https://github.com/ChumsInc/sortable-tables/commit/48f4b1f0df1e94a4eede5e1333a25262b28f4cdd)  chore: npm updates, apply className attribute to rendered table.
 
 #### [v2.0.13](https://github.com/ChumsInc/sortable-tables/compare/v2.0.12...v2.0.13) - 2025-07-08
@@ -59,8 +98,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`4f9d4cc`](https://github.com/ChumsInc/sortable-tables/commit/4f9d4cc0cb6da9c27fa26c93bfd6ee302a70ff3c)  fix: still trying to make it work for MouseEvent typing ... perhaps I should learn to write tests?
 
 #### [v2.0.12](https://github.com/ChumsInc/sortable-tables/compare/v2.0.11...v2.0.12) - 2025-07-08
@@ -70,8 +109,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`23062bc`](https://github.com/ChumsInc/sortable-tables/commit/23062bc7b9bb8764c1a83f96f3c1e75db292fbf4)  fix: types.d.ts did not seem to get updated on last build
 
 #### [v2.0.11](https://github.com/ChumsInc/sortable-tables/compare/v2.0.10...v2.0.11) - 2025-07-08
@@ -81,8 +120,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`83848ad`](https://github.com/ChumsInc/sortable-tables/commit/83848ad28bad0dcd659f3a4bcf2a9ee1ab44d860)  fix: add stricter typing for onSelectRow MouseEvent<HTMLTableRowElement>
 
 #### [v2.0.10](https://github.com/ChumsInc/sortable-tables/compare/v2.0.9...v2.0.10) - 2025-07-07
@@ -92,8 +131,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`8f314f4`](https://github.com/ChumsInc/sortable-tables/commit/8f314f4f89a0f47382de3a678b8ec124ac44ebdf)  fix: allow key modifiers to be passed on onSelectRow
 - [`7267ff2`](https://github.com/ChumsInc/sortable-tables/commit/7267ff20a6a233043919c53e46113f5300dea9af)  fix: allow key modifiers to be passed on onSelectRow
 
@@ -104,8 +143,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`08001a6`](https://github.com/ChumsInc/sortable-tables/commit/08001a6604fea9ae723147f36a54261d798153c8)  fix: add correct fields type for SortableTableProps, npm updates
 
 #### [v2.0.8](https://github.com/ChumsInc/sortable-tables/compare/v2.0.7...v2.0.8) - 2025-03-13
@@ -115,8 +154,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`ad120cd`](https://github.com/ChumsInc/sortable-tables/commit/ad120cd7f521d194613370aa91befd24582aef5d)  fix: allow React.ReactNode for rowsPerPage label
 
 #### [v2.0.7](https://github.com/ChumsInc/sortable-tables/compare/v2.0.6...v2.0.7) - 2025-02-27
@@ -126,8 +165,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`2350125`](https://github.com/ChumsInc/sortable-tables/commit/2350125f5fca9545c2ca1136191af5f765313e4f)  fix: always show datacell contents if the render attribute is not undefined.
 - [`3ffa14a`](https://github.com/ChumsInc/sortable-tables/commit/3ffa14a3f1648173a9d8c896abe886c26928506e)  chore: npm updates
 - [`364895d`](https://github.com/ChumsInc/sortable-tables/commit/364895dd31a6aa4a8b8d4911b965323637a7e85f)  chore: update README.md
@@ -142,11 +181,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
-- [`4d7716d`](https://github.com/ChumsInc/sortable-tables/commit/4d7716d5d23eac513b3761c03b722aeba250019b)  fix: Accessibility fixes
-- aria labels for pagination buttons
-- allow set table cell as TD or TH
+### Commits
+
+- [`4d7716d`](https://github.com/ChumsInc/sortable-tables/commit/4d7716d5d23eac513b3761c03b722aeba250019b)  fix: Accessibility fixes
+- aria labels for pagination buttons
+- allow set table cell as TD or TH
 - set scope on sortable table header cell
 
 #### [v2.0.5](https://github.com/ChumsInc/sortable-tables/compare/v2.0.4...v2.0.5) - 2025-02-07
@@ -156,8 +195,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`cd6ae46`](https://github.com/ChumsInc/sortable-tables/commit/cd6ae4690642081d649933f3a6828f180db50cc3)  fix: RowsPerPage select element was missing id attribute
 
 #### [v2.0.4](https://github.com/ChumsInc/sortable-tables/compare/v2.0.3...v2.0.4) - 2025-02-06
@@ -167,11 +206,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
-- [`82a8737`](https://github.com/ChumsInc/sortable-tables/commit/82a87377d0a63ae4ea4826a7842640c3efc19d6c)  feat:
-- add responsive option
-- add sort indicator alignment
+### Commits
+
+- [`82a8737`](https://github.com/ChumsInc/sortable-tables/commit/82a87377d0a63ae4ea4826a7842640c3efc19d6c)  feat:
+- add responsive option
+- add sort indicator alignment
 - add testing (visual, not automated)
 - [`4f31f68`](https://github.com/ChumsInc/sortable-tables/commit/4f31f68f59875bfde20e7a3bf828b0e41c91bba0)  feat: Show sort icon on hover.
 - [`116487f`](https://github.com/ChumsInc/sortable-tables/commit/116487f5edd46c47eedc721c6feb2b71e92c189c)  feat: Show sort icon on hover over the TH
@@ -183,8 +222,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`b3e03b4`](https://github.com/ChumsInc/sortable-tables/commit/b3e03b4887b87c7cf744be4fda396cb2f41d7e1d)  feat: Show sort icon on hover.
 
 #### [v2.0.2](https://github.com/ChumsInc/sortable-tables/compare/v2.0.1...v2.0.2) - 2025-02-05
@@ -194,8 +233,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`6127c13`](https://github.com/ChumsInc/sortable-tables/commit/6127c13ef9c987b28e64c6883ea3c2e12026c9ff)  fix: ensure thProps.className gets applied to SortableTH
 
 #### v2.0.1 - 2025-02-05
@@ -205,19 +244,19 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 
 
-### Commits
-
+### Commits
+
 - [`319cf62`](https://github.com/ChumsInc/sortable-tables/commit/319cf620ace584d7a1a5962879d007da898c0905)  Initial commit
 - [`76ff58a`](https://github.com/ChumsInc/sortable-tables/commit/76ff58a7005dfea279dbdbb04303b3fca65bcc22)  initial commit, time for testing.
-- [`d8639dc`](https://github.com/ChumsInc/sortable-tables/commit/d8639dc51c0373a1123b5e5b751caa89f2873b6a)  fix: add dist directory
-- updates to package.json
+- [`d8639dc`](https://github.com/ChumsInc/sortable-tables/commit/d8639dc51c0373a1123b5e5b751caa89f2873b6a)  fix: add dist directory
+- updates to package.json
 - updates to tsconfig.json
-- [`e314afe`](https://github.com/ChumsInc/sortable-tables/commit/e314afefd0bb93f493867daca924bcba4992e78e)  features:
-- include TablePagination element
-- RowsPerPage select
+- [`e314afe`](https://github.com/ChumsInc/sortable-tables/commit/e314afefd0bb93f493867daca924bcba4992e78e)  features:
+- include TablePagination element
+- RowsPerPage select
 - add displayName to each component
-- [`472dac4`](https://github.com/ChumsInc/sortable-tables/commit/472dac4f942d729db8cabccfd15d50acf0ec9d90)  fixes
-- add label option for RowsPerPage
+- [`472dac4`](https://github.com/ChumsInc/sortable-tables/commit/472dac4f942d729db8cabccfd15d50acf0ec9d90)  fixes
+- add label option for RowsPerPage
 - update TablePagination layout
 - [`29d01eb`](https://github.com/ChumsInc/sortable-tables/commit/29d01eb21114a805c75e64838497c8f309676879)  fix: add xs table size
 - [`ef2b963`](https://github.com/ChumsInc/sortable-tables/commit/ef2b963564efd036d052acde54e471d4319aa46e)  chore: Update README to specific to that package.

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,6 +1,6 @@
-import { DataTableProps } from './types';
-declare function DataTable<T = unknown>({ fields, data, keyField, size, sticky, responsive, rowClassName, renderRow, onSelectRow, selected, className, tfoot, children, tableHeadProps, ...rest }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace DataTable {
-    var displayName: string;
-}
-export default DataTable;
+import { DataTableProps } from './types';
+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;
+}
+export default DataTable;