@servicetitan/table 25.0.1 → 25.1.0

package/dist/demo/footer-page-size/index.d.ts

@@ -0,0 +1,2 @@
+export * from './table';
+//# sourceMappingURL=index.d.ts.map

package/dist/demo/footer-page-size/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/demo/footer-page-size/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/demo/footer-page-size/index.js

@@ -0,0 +1,2 @@
+export * from './table';
+//# sourceMappingURL=index.js.map

package/dist/demo/footer-page-size/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/demo/footer-page-size/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/demo/footer-page-size/table.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const TableFooterPageSizeExample: FC;
+//# sourceMappingURL=table.d.ts.map

package/dist/demo/footer-page-size/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/demo/footer-page-size/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AA6BpC,eAAO,MAAM,0BAA0B,EAAE,EA0ExC,CAAC"}

package/dist/demo/footer-page-size/table.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } 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 => (_jsx(Tag, Object.assign({ compact: true, color: UserRole[userRole] === UserRole.Owner ? 'success' : 'default' }, { children: userRole }))));
+export const TableFooterPageSizeExample = provide({
+    singletons: [TableStore],
+})(observer(() => {
+    const [{ tableState }] = useDependencies(TableStore);
+    const madeInColumnMenu = useMemo(() => standardFilterWithMultiselect({ tableState }), [tableState]);
+    return (_jsxs(Table, Object.assign({ tableState: tableState, striped: false, sortable: true, pager: { pageSizes: [3, 5, 7, 10] } }, { children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name", columnMenu: StandardColumnMenuFilter, width: "240px" }), _jsx(TableColumn, { field: "Supplier", title: "Supplier", columnMenu: StandardColumnMenuFilter, width: "150px" }), _jsx(TableColumn, { field: "MadeIn", title: "Made In", columnMenu: madeInColumnMenu, width: "175px" }), _jsx(TableColumn, { field: "UnitsOnOrder", title: "First Ordered On", columnMenu: DateRangeColumnMenuFilter, format: "{0:MM/dd/yyyy}", width: "240px" }), _jsx(TableColumn, { field: "UnitPrice", title: "Unit Price", columnMenu: CurrencyRangeColumnMenuFilter, format: "{0:c}", width: "125px" }), _jsx(TableColumn, { field: "Discontinued", title: "Discontinued", cell: BooleanEditableCell, sortable: false, width: "125px" }), _jsx(TableColumn, { field: "AvailableFor", title: "Available For", columnMenu: UserRoleColumnMenuFilter, width: "240px" })] })));
+}));
+//# sourceMappingURL=table.js.map

package/dist/demo/footer-page-size/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/demo/footer-page-size/table.tsx"],"names":[],"mappings":"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"}

package/dist/demo/index.d.ts

@@ -2,4 +2,5 @@ export * from './overview';
 export * from './master-detail';
 export * from './state-caching';
 export * from './column-hiding';
+export * from './footer-page-size';
 //# sourceMappingURL=index.d.ts.map

package/dist/demo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/dist/demo/index.js

@@ -2,4 +2,5 @@ export * from './overview';
 export * from './master-detail';
 export * from './state-caching';
 export * from './column-hiding';
+export * from './footer-page-size';
 //# sourceMappingURL=index.js.map

package/dist/demo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/table",
-    "version": "25.0.1",
+    "version": "25.1.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.1.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^25.0.1",
+        "@servicetitan/form": "^25.1.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.1.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^25.0.1",
+        "@servicetitan/form": "^25.1.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": "bb6fc7bc0d532fce0512a7cc6e008cf0a5bfc91f"
 }

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/table.stories.tsx

@@ -2,14 +2,16 @@ import {
     TableExample,
     TableMasterDetailExample,
     TableStateCachingExample,
-    TableColumnHidingExample
+    TableColumnHidingExample,
+    TableFooterPageSizeExample,
 } from './demo';
 
 export default {
-    title: 'Table/Demos'
+    title: 'Table/Demos',
 };
 
 export const Table = () => <TableExample />;
 export const TableMasterDetail = () => <TableMasterDetailExample />;
 export const TableStateCaching = () => <TableStateCachingExample />;
 export const TableColumnHiding = () => <TableColumnHidingExample />;
+export const TableFooterPageSize = () => <TableFooterPageSizeExample />;