@servicetitan/table 25.0.1 → 25.2.0

package/dist/filters/single-select/single-select-filter.js

@@ -1,7 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import { Radio } from '@servicetitan/design-system';
-import { renderCustomColumnMenuFilter } from '../column-menu-filters';
+import { renderCustomColumnMenuFilter, } from '../column-menu-filters';
 class SelectorRadio extends Component {
     render() {
         const { options, value, renderer } = this.props;
@@ -13,21 +24,20 @@ class SelectorRadio extends Component {
         });
     }
 }
-export function singleSelectColumnMenuFilter(props) {
+export function singleSelectColumnMenuFilter(_a) {
+    var { options, valueSelector, renderItem, filterOperator } = _a, opts = __rest(_a, ["options", "valueSelector", "renderItem", "filterOperator"]);
     const FilterCell = ({ value, onChange }) => {
-        var _a;
         const handleChange = (value, event) => {
-            var _a;
             const filter = value === undefined
                 ? { value: '', operator: '' }
                 : {
                     value,
-                    operator: (_a = props.filterOperator) !== null && _a !== void 0 ? _a : 'equals',
+                    operator: filterOperator !== null && filterOperator !== void 0 ? filterOperator : 'equals',
                 };
             onChange(Object.assign(Object.assign({}, filter), { syntheticEvent: event }));
         };
-        return (_jsx(SelectorRadio, { options: props.options, value: value === '' ? undefined : value, onChange: handleChange, renderer: props.renderItem, valueSelector: (_a = props.valueSelector) !== null && _a !== void 0 ? _a : (option => option) }));
+        return (_jsx(SelectorRadio, { options: options, value: value === '' ? undefined : value, onChange: handleChange, renderer: renderItem, valueSelector: valueSelector !== null && valueSelector !== void 0 ? valueSelector : (option => option) }));
     };
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }
 //# sourceMappingURL=single-select-filter.js.map

package/dist/filters/single-select/single-select-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAwB,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAUtE,MAAM,aAAsB,SAAQ,SAAgC;IAChE,MAAM;QACF,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEhD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACrD,OAAO;YACH,oDAAoD;YACpD,6BAAkB,SAAS,EAAC,sBAAsB,gBAC9C,KAAC,KAAK,IACF,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,EAChD,OAAO,EAAE,KAAK,KAAK,WAAW,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,GACjE,KALK,KAAK,CAMT,CACV,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC;CACJ;AASD,MAAM,UAAU,4BAA4B,CACxC,KAA4C;IAE5C,MAAM,UAAU,GAA6B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;;QACjE,MAAM,YAAY,GAAG,CAAC,KAAqB,EAAE,KAAuC,EAAE,EAAE;;YACpF,MAAM,MAAM,GACR,KAAK,KAAK,SAAS;gBACf,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;gBAC7B,CAAC,CAAC;oBACI,KAAK;oBACL,QAAQ,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,QAAQ;iBAC7C,CAAC;YAEZ,QAAQ,iCACD,MAAM,KACT,cAAc,EAAE,KAAK,IACvB,CAAC;QACP,CAAC,CAAC;QAEF,OAAO,CACH,KAAC,aAAa,IACV,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACvC,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,KAAK,CAAC,UAAU,EAC1B,aAAa,EAAE,MAAA,KAAK,CAAC,aAAa,mCAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,GAC1D,CACL,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,4BAA4B,CAAC,UAAU,CAAC,CAAC;AACpD,CAAC"}
+{"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAwB,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAEH,4BAA4B,GAC/B,MAAM,wBAAwB,CAAC;AAUhC,MAAM,aAAsB,SAAQ,SAAgC;IAChE,MAAM;QACF,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEhD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACrD,OAAO;YACH,oDAAoD;YACpD,6BAAkB,SAAS,EAAC,sBAAsB,gBAC9C,KAAC,KAAK,IACF,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,EAChD,OAAO,EAAE,KAAK,KAAK,WAAW,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,GACjE,KALK,KAAK,CAMT,CACV,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC;CACJ;AAUD,MAAM,UAAU,4BAA4B,CAA6B,EAMjC;QANiC,EACrE,OAAO,EACP,aAAa,EACb,UAAU,EACV,cAAc,OAEsB,EADjC,IAAI,cAL8D,4DAMxE,CADU;IAEP,MAAM,UAAU,GAA6B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QACjE,MAAM,YAAY,GAAG,CAAC,KAAqB,EAAE,KAAuC,EAAE,EAAE;YACpF,MAAM,MAAM,GACR,KAAK,KAAK,SAAS;gBACf,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;gBAC7B,CAAC,CAAC;oBACI,KAAK;oBACL,QAAQ,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,QAAQ;iBACvC,CAAC;YAEZ,QAAQ,iCACD,MAAM,KACT,cAAc,EAAE,KAAK,IACvB,CAAC;QACP,CAAC,CAAC;QAEF,OAAO,CACH,KAAC,aAAa,IACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACvC,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,UAAU,EACpB,aAAa,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,GACpD,CACL,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,4BAA4B,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AAC1D,CAAC"}

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export * from './export';
 export * from './select-cell';
 export * from './use-observing-table-state';
 export * from './utils/filters';
-export { TableColumn, TableColumnProps, TableColumnMenuProps, TableColumnMenuFilter, TableColumnReorderEvent, TableCell, TableHeaderCellProps, TableRowProps, TableRowClickEvent, TableDetailRow, TableDetailRowProps, TableExpandChangeEvent, TableToolbar, TableNoRecords, TableFilterCellProps, TableFilterChangeEvent, } from '@servicetitan/design-system';
+export { TableColumn, TableColumnProps, TableColumnMenuProps, TableColumnMenuFilter, TableColumnReorderEvent, TableCell, TableHeaderCellProps, TableHeaderCell, TableRowProps, TableRowClickEvent, TableDetailRow, TableDetailRowProps, TableExpandChangeEvent, TableToolbar, TableNoRecords, TableFilterCellProps, TableFilterChangeEvent, } from '@servicetitan/design-system';
 export { GridColumnMenuFilterUIProps as TableColumnMenuFilterUIProps } from '@progress/kendo-react-grid/dist/npm/interfaces/GridColumnMenuFilterUIProps';
 export { IdType, DataSource, InMemoryDataSource, AsyncDataSource } from '@servicetitan/data-query';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,sBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,sBAAsB,GACzB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,2BAA2B,IAAI,4BAA4B,EAAE,MAAM,4EAA4E,CAAC;AAEzJ,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,SAAS,EACT,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,sBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,sBAAsB,GACzB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,2BAA2B,IAAI,4BAA4B,EAAE,MAAM,4EAA4E,CAAC;AAEzJ,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -6,6 +6,6 @@ export * from './export';
 export * from './select-cell';
 export * from './use-observing-table-state';
 export * from './utils/filters';
-export { TableColumn, TableColumnMenuFilter, TableCell, TableDetailRow, TableToolbar, TableNoRecords, } from '@servicetitan/design-system';
+export { TableColumn, TableColumnMenuFilter, TableCell, TableHeaderCell, TableDetailRow, TableToolbar, TableNoRecords, } from '@servicetitan/design-system';
 export { InMemoryDataSource, AsyncDataSource } from '@servicetitan/data-query';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EACH,WAAW,EAGX,qBAAqB,EAErB,SAAS,EAIT,cAAc,EAGd,YAAY,EACZ,cAAc,GAGjB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAsB,kBAAkB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EACH,WAAW,EAGX,qBAAqB,EAErB,SAAS,EAET,eAAe,EAGf,cAAc,EAGd,YAAY,EACZ,cAAc,GAGjB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAsB,kBAAkB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/table",
-    "version": "25.0.1",
+    "version": "25.2.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/table",
     "repository": {
@@ -37,9 +37,9 @@
         "memoize-one": "~6.0.0"
     },
     "devDependencies": {
-        "@servicetitan/data-query": "^25.0.1",
+        "@servicetitan/data-query": "^25.2.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^25.0.1",
+        "@servicetitan/form": "^25.2.0",
         "@servicetitan/react-ioc": "^21.6.0",
         "@servicetitan/suppress-warnings": "^21.6.0",
         "@types/accounting": "~0.4.2",
@@ -53,9 +53,9 @@
         "react": "~17.0.2"
     },
     "peerDependencies": {
-        "@servicetitan/data-query": "^25.0.1",
+        "@servicetitan/data-query": "^25.2.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^25.0.1",
+        "@servicetitan/form": "^25.2.0",
         "@servicetitan/react-ioc": ">21.0.0",
         "@servicetitan/suppress-warnings": ">21.0.0",
         "accounting": "~0.4.1",
@@ -72,5 +72,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "81ba2d8ecce891162d8d4de743c6b3fff9cf1982"
+    "gitHead": "5ce3b7761ea46df59cee9e036aec6eefadd3e0ad"
 }

package/src/demo/filters/async-select-filter.tsx

@@ -27,8 +27,8 @@ export const AsyncSelectDefaultExample: FC = provide({
             () =>
                 asyncSelectColumnMenuFilter({
                     dataFetcher: categoryFetcher,
-                    placeholder: 'Search for Categories',
                     multiple: true,
+                    contentMaxHeight: '250px',
                 }),
             [categoryFetcher]
         );

package/src/demo/filters/categories.tsx

@@ -31,6 +31,30 @@ export const categories: Category[] = [
         CategoryID: 10,
         CategoryName: 'Sashimi',
     },
+    {
+        CategoryID: 21,
+        CategoryName: 'Borsh',
+    },
+    {
+        CategoryID: 22,
+        CategoryName: 'Pasta Carbonara',
+    },
+    {
+        CategoryID: 23,
+        CategoryName: 'Caesar salad',
+    },
+    {
+        CategoryID: 24,
+        CategoryName: 'Ravioli',
+    },
+    {
+        CategoryID: 25,
+        CategoryName: 'Pizza',
+    },
+    {
+        CategoryID: 26,
+        CategoryName: 'Steak',
+    },
 ];
 
 export const CategoryCell: FC<TableCellProps> = props => {

package/src/demo/filters/multiselect-filter.tsx

@@ -19,6 +19,16 @@ export const MultiSelectDefaultExample: FC = provide({
             [madeInOptions]
         );
 
+        const categoryColumnMenu = useMemo(
+            () =>
+                multiSelectColumnMenuFilter(
+                    new Array(20).fill(0).map((_, index) => index),
+                    undefined,
+                    { contentMaxHeight: '250px' }
+                ),
+            []
+        );
+
         return (
             <Table tableState={tableState}>
                 <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
@@ -26,6 +36,11 @@ export const MultiSelectDefaultExample: FC = provide({
                 <TableColumn field="ProductName" title="Product Name" width="240px" />
 
                 <TableColumn field="MadeIn" title="Made In" columnMenu={madeInColumnMenu} />
+                <TableColumn
+                    field="CategoryID"
+                    title="CategoryID"
+                    columnMenu={categoryColumnMenu}
+                />
             </Table>
         );
     })

package/src/demo/filters/select-filter.tsx

@@ -0,0 +1,147 @@
+import { useMemo, FC, Fragment } from 'react';
+import { observer } from 'mobx-react';
+import { Banner } from '@servicetitan/design-system';
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+
+import { Table, TableColumn, selectColumnMenuFilter, TableCellProps } from '../..';
+
+import { TableStore } from './table.store';
+import { categories, CategoryCell } from './categories';
+import { Product } from '../overview/product';
+
+export const PackageCell: FC<TableCellProps> = props => {
+    const { dataItem } = props;
+
+    return <td>{dataItem?.Package?.PackageName}</td>;
+};
+
+export const SelectAsyncExample: FC = provide({
+    singletons: [TableStore],
+})(
+    observer(() => {
+        const [{ categoryFetcherClean, madeInFetcherClean, tableState }] =
+            useDependencies(TableStore);
+
+        const madeInColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    dataFetcher: madeInFetcherClean,
+                    search: true,
+                }),
+            [madeInFetcherClean]
+        );
+
+        const categoryColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    dataFetcher: categoryFetcherClean,
+                    multiple: true,
+                    contentMaxHeight: '250px',
+                    valueSelector: item => item.CategoryID,
+                }),
+            [categoryFetcherClean]
+        );
+
+        return (
+            <Fragment>
+                <Banner title="Default filter with async select" className="m-b-2">
+                    Async select filter allows to choose one or several option from the list that
+                    will be fetched from BE. The list size is not limited, so you can also use
+                    search to find desired option.
+                    <br />
+                    Use it when there can be greater than 20 possible options
+                </Banner>
+                <Table tableState={tableState} striped={false}>
+                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                    <TableColumn field="ProductName" title="Product Name" width="240px" />
+                    <TableColumn
+                        field="MadeIn"
+                        title="Made In (async single-select filter)"
+                        columnMenu={madeInColumnMenu}
+                    />
+                    <TableColumn
+                        field="CategoryID"
+                        title="Category (async multi-select filter)"
+                        columnMenu={categoryColumnMenu}
+                        cell={CategoryCell}
+                    />
+                </Table>
+            </Fragment>
+        );
+    })
+);
+
+export const SelectSyncExample: FC = provide({
+    singletons: [TableStore],
+})(
+    observer(() => {
+        const [{ madeInOptions, packageOptions, tableState }] = useDependencies(TableStore);
+
+        const madeInColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    data: madeInOptions,
+                    search: {
+                        placeholder: 'Search for made-ins',
+                        filter: search => item => item.toLowerCase().includes(search),
+                    },
+                }),
+            [madeInOptions]
+        );
+
+        const categoryColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    data: categories,
+                    multiple: true,
+                    contentMaxHeight: '250px',
+                    valueSelector: item => item.CategoryID,
+                    renderItem: item => item.CategoryName,
+                    search: true,
+                }),
+            []
+        );
+
+        const packageColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    data: packageOptions,
+                    multiple: false,
+                    valueSelector: item => item.Id,
+                    renderItem: item => item.Name,
+                    rowValueSelector: (item: Product['Package']) => item?.PackageId,
+                }),
+            [packageOptions]
+        );
+
+        return (
+            <Fragment>
+                <Banner title="Default filter with sync select" className="m-b-2">
+                    Select filter allows to choose one or multiple option(s) from the provided list.
+                    You can pass simple options (string or number) or complex objects
+                </Banner>
+                <Table tableState={tableState} striped={false}>
+                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                    <TableColumn field="ProductName" title="Product Name" width="240px" />
+                    <TableColumn
+                        field="MadeIn"
+                        title="Made In (sync single-select filter)"
+                        columnMenu={madeInColumnMenu}
+                    />
+                    <TableColumn
+                        field="CategoryID"
+                        title="Category (sync multi-select filter)"
+                        columnMenu={categoryColumnMenu}
+                        cell={CategoryCell}
+                    />
+                    <TableColumn
+                        field="Package"
+                        title="Package (sync single-select filter)"
+                        columnMenu={packageColumnMenu}
+                        cell={PackageCell}
+                    />
+                </Table>
+            </Fragment>
+        );
+    })
+);

package/src/demo/filters/single-select-filter.tsx

@@ -27,10 +27,11 @@ export const SingleSelectDefaultExample: FC = provide({
                     options: categories,
                     renderItem: cat => (
                         <BodyText>
-                            <span className="fw-bold">cat.CategoryName</span> (#{cat.CategoryID})
+                            <span className="fw-bold">{cat.CategoryName}</span> (#{cat.CategoryID})
                         </BodyText>
                     ),
                     valueSelector: cat => cat.CategoryID,
+                    contentMaxHeight: '200px',
                 }),
             []
         );

package/src/demo/filters/table.store.ts

@@ -1,8 +1,13 @@
 import { injectable } from '@servicetitan/react-ioc';
 
-import { InMemoryDataSource, TableState, AsyncSelectFilterDataFetcher } from '../..';
+import {
+    InMemoryDataSource,
+    TableState,
+    AsyncSelectFilterDataFetcher,
+    SelectFilterDataFetcher,
+} from '../..';
 import { products } from '../overview/products';
-import { categories } from './categories';
+import { categories, Category } from './categories';
 
 @injectable()
 export class TableStore {
@@ -15,6 +20,22 @@ export class TableStore {
         return Array.from(new Set(products.map(p => p.MadeIn)));
     }
 
+    get packageOptions() {
+        const map = products.reduce(
+            (out, product) => ({
+                ...out,
+                ...(product.Package
+                    ? { [product.Package.PackageId]: product.Package.PackageName }
+                    : {}),
+            }),
+            {} as Record<number, string>
+        );
+
+        return Object.keys(map)
+            .map(Number)
+            .map(id => ({ Id: id, Name: map[id] }));
+    }
+
     categoryFetcher: AsyncSelectFilterDataFetcher<number> = async opts => {
         await new Promise(resolve => setTimeout(resolve, 1500));
 
@@ -39,6 +60,28 @@ export class TableStore {
         };
     };
 
+    categoryFetcherClean: SelectFilterDataFetcher<Category> = async opts => {
+        await new Promise(resolve => setTimeout(resolve, 1500));
+
+        const sv = opts.search?.trim().toLowerCase();
+
+        return {
+            data: categories.filter(cat =>
+                sv ? cat.CategoryName.toLowerCase().includes(sv) : true
+            ),
+        };
+    };
+
+    madeInFetcherClean: SelectFilterDataFetcher<string> = async opts => {
+        await new Promise(resolve => setTimeout(resolve, 1500));
+
+        const sv = opts.search?.trim().toLowerCase();
+
+        return {
+            data: this.madeInOptions.filter(opt => (sv ? opt.toLowerCase().includes(sv) : true)),
+        };
+    };
+
     private getDataSource() {
         return new InMemoryDataSource(products, row => row.ProductID);
     }

package/src/demo/footer-page-size/index.ts

@@ -0,0 +1 @@
+export * from './table';

package/src/demo/footer-page-size/table.tsx

@@ -0,0 +1,104 @@
+import { useMemo, FC } from 'react';
+
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+
+import { observer } from 'mobx-react';
+
+import { Tag } from '@servicetitan/design-system';
+import { getEnumKeys } from '@servicetitan/form';
+
+import {
+    Table,
+    TableColumn,
+    BooleanEditableCell,
+    DateRangeColumnMenuFilter,
+    StandardColumnMenuFilter,
+    standardFilterWithMultiselect,
+    multiSelectColumnMenuFilter,
+    CurrencyRangeColumnMenuFilter,
+} from '../..';
+
+import { TableStore } from '../overview/table.store';
+import { UserRole } from '../overview/product';
+
+const UserRoleColumnMenuFilter = multiSelectColumnMenuFilter(getEnumKeys(UserRole), userRole => (
+    <Tag compact color={UserRole[userRole] === UserRole.Owner ? 'success' : 'default'}>
+        {userRole}
+    </Tag>
+));
+
+export const TableFooterPageSizeExample: FC = provide({
+    singletons: [TableStore],
+})(
+    observer(() => {
+        const [{ tableState }] = useDependencies(TableStore);
+
+        const madeInColumnMenu = useMemo(
+            () => standardFilterWithMultiselect({ tableState }),
+            [tableState]
+        );
+
+        return (
+            <Table
+                tableState={tableState}
+                striped={false}
+                sortable
+                pager={{ pageSizes: [3, 5, 7, 10] }}
+            >
+                <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+
+                <TableColumn
+                    field="ProductName"
+                    title="Product Name"
+                    columnMenu={StandardColumnMenuFilter}
+                    width="240px"
+                />
+
+                <TableColumn
+                    field="Supplier"
+                    title="Supplier"
+                    columnMenu={StandardColumnMenuFilter}
+                    width="150px"
+                />
+
+                <TableColumn
+                    field="MadeIn"
+                    title="Made In"
+                    columnMenu={madeInColumnMenu}
+                    width="175px"
+                />
+
+                <TableColumn
+                    field="UnitsOnOrder"
+                    title="First Ordered On"
+                    columnMenu={DateRangeColumnMenuFilter}
+                    format="{0:MM/dd/yyyy}"
+                    width="240px"
+                />
+
+                <TableColumn
+                    field="UnitPrice"
+                    title="Unit Price"
+                    columnMenu={CurrencyRangeColumnMenuFilter}
+                    format="{0:c}"
+                    width="125px"
+                />
+
+                <TableColumn
+                    field="Discontinued"
+                    title="Discontinued"
+                    cell={BooleanEditableCell}
+                    sortable={false}
+                    width="125px"
+                />
+
+                <TableColumn
+                    field="AvailableFor"
+                    title="Available For"
+                    columnMenu={UserRoleColumnMenuFilter}
+                    width="240px"
+                />
+            </Table>
+        );
+    })
+);

package/src/demo/index.ts

@@ -2,3 +2,4 @@ export * from './overview';
 export * from './master-detail';
 export * from './state-caching';
 export * from './column-hiding';
+export * from './footer-page-size';

package/src/demo/overview/product.ts

@@ -13,6 +13,11 @@ export enum Supplier {
     Benjamin,
 }
 
+export interface ProductPackage {
+    PackageId: number;
+    PackageName: string;
+}
+
 export interface Product {
     ProductID: number;
     ProductName: string;
@@ -25,4 +30,5 @@ export interface Product {
     UnitsOnOrder: Date;
     Discontinued: boolean;
     AvailableFor?: UserRole;
+    Package?: ProductPackage;
 }

package/src/demo/overview/products.ts

@@ -13,6 +13,10 @@ export const products: Product[] = [
         UnitsOnOrder: new Date('1/11/2023'),
         Discontinued: false,
         AvailableFor: UserRole.Admin,
+        Package: {
+            PackageId: 1,
+            PackageName: 'Standard package',
+        },
     },
     {
         ProductID: 2,
@@ -25,6 +29,10 @@ export const products: Product[] = [
         UnitsInStock: 17,
         UnitsOnOrder: new Date('2/11/2023'),
         Discontinued: false,
+        Package: {
+            PackageId: 1,
+            PackageName: 'Standard package',
+        },
     },
     {
         ProductID: 3,
@@ -63,6 +71,10 @@ export const products: Product[] = [
         UnitsOnOrder: new Date('5/11/2023'),
         Discontinued: true,
         AvailableFor: UserRole.GeneralOffice,
+        Package: {
+            PackageId: 2,
+            PackageName: 'Extended package',
+        },
     },
     {
         ProductID: 6,

package/src/demo/overview/table.store.ts

@@ -65,6 +65,7 @@ export class TableStore {
                 ),
                 Discontinued: new FieldState(false),
                 AvailableFor: new FieldState<UserRole | undefined>(undefined),
+                Package: new FieldState<Product['Package'] | undefined>(undefined),
             }),
             row
         );