@servicetitan/table 31.2.0 → 32.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/demo/column-hiding/index.js +1 -0
- package/dist/demo/column-hiding/index.js.map +1 -1
- package/dist/demo/column-hiding/product.js +7 -6
- package/dist/demo/column-hiding/product.js.map +1 -1
- package/dist/demo/column-hiding/products.js +12 -11
- package/dist/demo/column-hiding/products.js.map +1 -1
- package/dist/demo/column-hiding/table.js +126 -32
- package/dist/demo/column-hiding/table.js.map +1 -1
- package/dist/demo/column-hiding/table.store.js +30 -27
- package/dist/demo/column-hiding/table.store.js.map +1 -1
- package/dist/demo/filters/async-select-filter.js +59 -12
- package/dist/demo/filters/async-select-filter.js.map +1 -1
- package/dist/demo/filters/categories.js +20 -16
- package/dist/demo/filters/categories.js.map +1 -1
- package/dist/demo/filters/multiselect-filter.js +37 -5
- package/dist/demo/filters/multiselect-filter.js.map +1 -1
- package/dist/demo/filters/range-filter.js +104 -10
- package/dist/demo/filters/range-filter.js.map +1 -1
- package/dist/demo/filters/select-filter.js +139 -41
- package/dist/demo/filters/select-filter.js.map +1 -1
- package/dist/demo/filters/single-select-filter.js +109 -18
- package/dist/demo/filters/single-select-filter.js.map +1 -1
- package/dist/demo/filters/table.store.js +77 -86
- package/dist/demo/filters/table.store.js.map +1 -1
- package/dist/demo/footer-page-size/index.js +1 -0
- package/dist/demo/footer-page-size/index.js.map +1 -1
- package/dist/demo/footer-page-size/table.js +82 -6
- package/dist/demo/footer-page-size/table.js.map +1 -1
- package/dist/demo/index.js +1 -0
- package/dist/demo/index.js.map +1 -1
- package/dist/demo/master-detail/detail-table.js +41 -9
- package/dist/demo/master-detail/detail-table.js.map +1 -1
- package/dist/demo/master-detail/detail-table.store.js +60 -56
- package/dist/demo/master-detail/detail-table.store.js.map +1 -1
- package/dist/demo/master-detail/index.js +1 -0
- package/dist/demo/master-detail/index.js.map +1 -1
- package/dist/demo/master-detail/master-table.store.js +65 -61
- package/dist/demo/master-detail/master-table.store.js.map +1 -1
- package/dist/demo/master-detail/product-detail.js +2 -1
- package/dist/demo/master-detail/product-detail.js.map +1 -1
- package/dist/demo/master-detail/product-details.js +10 -9
- package/dist/demo/master-detail/product-details.js.map +1 -1
- package/dist/demo/master-detail/product.js +7 -6
- package/dist/demo/master-detail/product.js.map +1 -1
- package/dist/demo/master-detail/products.js +12 -11
- package/dist/demo/master-detail/products.js.map +1 -1
- package/dist/demo/master-detail/table-master-detail.js +39 -8
- package/dist/demo/master-detail/table-master-detail.js.map +1 -1
- package/dist/demo/overview/actions-cell.js +47 -10
- package/dist/demo/overview/actions-cell.js.map +1 -1
- package/dist/demo/overview/index.js +1 -0
- package/dist/demo/overview/index.js.map +1 -1
- package/dist/demo/overview/product.js +7 -6
- package/dist/demo/overview/product.js.map +1 -1
- package/dist/demo/overview/products.js +15 -14
- package/dist/demo/overview/products.js.map +1 -1
- package/dist/demo/overview/table.js +176 -21
- package/dist/demo/overview/table.js.map +1 -1
- package/dist/demo/overview/table.store.js +45 -51
- package/dist/demo/overview/table.store.js.map +1 -1
- package/dist/demo/row-details/index.js +1 -0
- package/dist/demo/row-details/index.js.map +1 -1
- package/dist/demo/row-details/row-details-table.js +52 -5
- package/dist/demo/row-details/row-details-table.js.map +1 -1
- package/dist/demo/row-details/row-details-table.store.js +27 -19
- package/dist/demo/row-details/row-details-table.store.js.map +1 -1
- package/dist/demo/state-caching/beverages.js +11 -10
- package/dist/demo/state-caching/beverages.js.map +1 -1
- package/dist/demo/state-caching/index.js +1 -0
- package/dist/demo/state-caching/index.js.map +1 -1
- package/dist/demo/state-caching/product.js +2 -1
- package/dist/demo/state-caching/product.js.map +1 -1
- package/dist/demo/state-caching/products.js +12 -11
- package/dist/demo/state-caching/products.js.map +1 -1
- package/dist/demo/state-caching/state-caching-table.js +44 -3
- package/dist/demo/state-caching/state-caching-table.js.map +1 -1
- package/dist/demo/state-caching/state-caching-table.store.js +42 -54
- package/dist/demo/state-caching/state-caching-table.store.js.map +1 -1
- package/dist/details/expand-column.js +31 -7
- package/dist/details/expand-column.js.map +1 -1
- package/dist/details/index.js +1 -0
- package/dist/details/index.js.map +1 -1
- package/dist/editable-cell/boolean-editable-cell.js +15 -4
- package/dist/editable-cell/boolean-editable-cell.js.map +1 -1
- package/dist/editable-cell/get-action-cell.js +14 -7
- package/dist/editable-cell/get-action-cell.js.map +1 -1
- package/dist/editable-cell/get-editable-cell.js +16 -8
- package/dist/editable-cell/get-editable-cell.js.map +1 -1
- package/dist/editable-cell/get-select-editable-cell.js +19 -5
- package/dist/editable-cell/get-select-editable-cell.js.map +1 -1
- package/dist/editable-cell/index.js +1 -0
- package/dist/editable-cell/index.js.map +1 -1
- package/dist/editable-cell/text-editable-cell.js +23 -5
- package/dist/editable-cell/text-editable-cell.js.map +1 -1
- package/dist/export/export.js +38 -1
- package/dist/export/export.js.map +1 -1
- package/dist/export/export.module.css.d.ts +3 -0
- package/dist/export/index.js +1 -0
- package/dist/export/index.js.map +1 -1
- package/dist/filters/async-select/async-select-filter.js +167 -132
- package/dist/filters/async-select/async-select-filter.js.map +1 -1
- package/dist/filters/column-menu-filters.js +39 -8
- package/dist/filters/column-menu-filters.js.map +1 -1
- package/dist/filters/datetime-filter/datetime-filter.js +73 -50
- package/dist/filters/datetime-filter/datetime-filter.js.map +1 -1
- package/dist/filters/field-values-filter.js +80 -72
- package/dist/filters/field-values-filter.js.map +1 -1
- package/dist/filters/index.js +1 -0
- package/dist/filters/index.js.map +1 -1
- package/dist/filters/multiselect-filter/multiselect-filter.js +77 -73
- package/dist/filters/multiselect-filter/multiselect-filter.js.map +1 -1
- package/dist/filters/numeric-filter-extended/numeric-extended-operators.js +10 -3
- package/dist/filters/numeric-filter-extended/numeric-extended-operators.js.map +1 -1
- package/dist/filters/numeric-filter-extended/numeric-filter-extended.js +39 -16
- package/dist/filters/numeric-filter-extended/numeric-filter-extended.js.map +1 -1
- package/dist/filters/range-filter/range-filter.js +76 -72
- package/dist/filters/range-filter/range-filter.js.map +1 -1
- package/dist/filters/select-filter/object-search.js +4 -3
- package/dist/filters/select-filter/object-search.js.map +1 -1
- package/dist/filters/select-filter/operators.js +6 -5
- package/dist/filters/select-filter/operators.js.map +1 -1
- package/dist/filters/select-filter/select-filter.js +180 -145
- package/dist/filters/select-filter/select-filter.js.map +1 -1
- package/dist/filters/select-filter/value-getter.js +2 -1
- package/dist/filters/select-filter/value-getter.js.map +1 -1
- package/dist/filters/single-select/single-select-filter.js +29 -15
- package/dist/filters/single-select/single-select-filter.js.map +1 -1
- package/dist/filters/standard-filter-with-multiselect/filter-cell-ext.js +114 -67
- package/dist/filters/standard-filter-with-multiselect/filter-cell-ext.js.map +1 -1
- package/dist/filters/standard-filter-with-multiselect/filter-cell-ext.module.css.d.ts +7 -0
- package/dist/filters/standard-filter-with-multiselect/multiselect-operators.js +10 -3
- package/dist/filters/standard-filter-with-multiselect/multiselect-operators.js.map +1 -1
- package/dist/filters/standard-filter-with-multiselect/standard-filter-with-multiselect.js +77 -55
- package/dist/filters/standard-filter-with-multiselect/standard-filter-with-multiselect.js.map +1 -1
- package/dist/filters/standard-filter-with-multiselect/table-column-menu-filter-ext.js +23 -10
- package/dist/filters/standard-filter-with-multiselect/table-column-menu-filter-ext.js.map +1 -1
- package/dist/filters/time-filter/time-filter.js +63 -49
- package/dist/filters/time-filter/time-filter.js.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/select-cell/index.js +1 -0
- package/dist/select-cell/index.js.map +1 -1
- package/dist/select-cell/select-cell.js +36 -11
- package/dist/select-cell/select-cell.js.map +1 -1
- package/dist/select-cell/select-cell.module.css.d.ts +3 -0
- package/dist/table-state.js +479 -660
- package/dist/table-state.js.map +1 -1
- package/dist/table.js +235 -250
- package/dist/table.js.map +1 -1
- package/dist/table.module.css.d.ts +5 -0
- package/dist/use-observing-table-state/demo/components/use-observing-table-state-demo.js +97 -5
- package/dist/use-observing-table-state/demo/components/use-observing-table-state-demo.js.map +1 -1
- package/dist/use-observing-table-state/demo/stores/use-observing-table-state-demo.store.js +71 -97
- package/dist/use-observing-table-state/demo/stores/use-observing-table-state-demo.store.js.map +1 -1
- package/dist/use-observing-table-state/index.js +1 -0
- package/dist/use-observing-table-state/index.js.map +1 -1
- package/dist/use-observing-table-state/use-observing-table-state.js +26 -20
- package/dist/use-observing-table-state/use-observing-table-state.js.map +1 -1
- package/dist/utils/filters.js +14 -9
- package/dist/utils/filters.js.map +1 -1
- package/dist/utils/use-td-props.js +3 -2
- package/dist/utils/use-td-props.js.map +1 -1
- package/package.json +13 -13
- package/dist/filters/async-select/async-select-filter.stories.js +0 -7
- package/dist/filters/async-select/async-select-filter.stories.js.map +0 -1
- package/dist/filters/multiselect-filter/multiselect-filter.stories.js +0 -7
- package/dist/filters/multiselect-filter/multiselect-filter.stories.js.map +0 -1
- package/dist/filters/range-filter/range-filter.stories.js +0 -9
- package/dist/filters/range-filter/range-filter.stories.js.map +0 -1
- package/dist/filters/select-filter/__tests__/object-search.test.js +0 -28
- package/dist/filters/select-filter/__tests__/object-search.test.js.map +0 -1
- package/dist/filters/select-filter/select-filter.stories.js +0 -8
- package/dist/filters/select-filter/select-filter.stories.js.map +0 -1
- package/dist/filters/single-select/single-select-filter.stories.js +0 -8
- package/dist/filters/single-select/single-select-filter.stories.js.map +0 -1
- package/dist/table.stories.js +0 -12
- package/dist/table.stories.js.map +0 -1
- package/dist/use-observing-table-state/use-observing-table-state.stories.js +0 -11
- package/dist/use-observing-table-state/use-observing-table-state.stories.js.map +0 -1
- package/dist/utils/__tests__/filters.test.js +0 -24
- package/dist/utils/__tests__/filters.test.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/demo/column-hiding/index.ts"],"sourcesContent":["export * from './table';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}
|
@@ -1,16 +1,17 @@
|
|
1
|
-
export var UserRole
|
2
|
-
(function (UserRole) {
|
1
|
+
export var UserRole = /*#__PURE__*/ function(UserRole) {
|
3
2
|
UserRole[UserRole["Unspecified"] = 0] = "Unspecified";
|
4
3
|
UserRole[UserRole["Technician"] = 1] = "Technician";
|
5
4
|
UserRole[UserRole["GeneralOffice"] = 2] = "GeneralOffice";
|
6
5
|
UserRole[UserRole["Admin"] = 3] = "Admin";
|
7
6
|
UserRole[UserRole["Owner"] = 4] = "Owner";
|
8
|
-
|
9
|
-
|
10
|
-
|
7
|
+
return UserRole;
|
8
|
+
}({});
|
9
|
+
export var Supplier = /*#__PURE__*/ function(Supplier) {
|
11
10
|
Supplier[Supplier["Dan"] = 1] = "Dan";
|
12
11
|
Supplier[Supplier["Adam"] = 2] = "Adam";
|
13
12
|
Supplier[Supplier["Charlie"] = 3] = "Charlie";
|
14
13
|
Supplier[Supplier["Benjamin"] = 4] = "Benjamin";
|
15
|
-
|
14
|
+
return Supplier;
|
15
|
+
}({});
|
16
|
+
|
16
17
|
//# sourceMappingURL=product.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/demo/column-hiding/product.ts"],"sourcesContent":["export enum UserRole {\n Unspecified,\n Technician,\n GeneralOffice,\n Admin,\n Owner,\n}\n\nexport enum Supplier {\n Dan = 1,\n Adam,\n Charlie,\n Benjamin,\n}\n\nexport interface Product {\n ProductID: number;\n ProductName: string;\n Supplier: Supplier;\n CategoryID: number;\n MadeIn: string;\n QuantityPerUnit: string;\n UnitPrice: number;\n UnitsInStock: number;\n UnitsOnOrder: Date;\n Discontinued: boolean;\n AvailableFor?: UserRole;\n}\n"],"names":["UserRole","Supplier"],"mappings":"AAAA,OAAO,IAAA,AAAKA,kCAAAA;;;;;;WAAAA;MAMX;AAED,OAAO,IAAA,AAAKC,kCAAAA;;;;;WAAAA;MAKX"}
|
@@ -11,7 +11,7 @@ export const products = [
|
|
11
11
|
UnitsInStock: 39,
|
12
12
|
UnitsOnOrder: new Date('1/11/2019'),
|
13
13
|
Discontinued: false,
|
14
|
-
AvailableFor: UserRole.Admin
|
14
|
+
AvailableFor: UserRole.Admin
|
15
15
|
},
|
16
16
|
{
|
17
17
|
ProductID: 102,
|
@@ -23,7 +23,7 @@ export const products = [
|
|
23
23
|
UnitPrice: 19.0,
|
24
24
|
UnitsInStock: 17,
|
25
25
|
UnitsOnOrder: new Date('2/11/2019'),
|
26
|
-
Discontinued: false
|
26
|
+
Discontinued: false
|
27
27
|
},
|
28
28
|
{
|
29
29
|
ProductID: 103,
|
@@ -36,7 +36,7 @@ export const products = [
|
|
36
36
|
UnitsInStock: 13,
|
37
37
|
UnitsOnOrder: new Date('3/11/2019'),
|
38
38
|
Discontinued: false,
|
39
|
-
AvailableFor: UserRole.Owner
|
39
|
+
AvailableFor: UserRole.Owner
|
40
40
|
},
|
41
41
|
{
|
42
42
|
ProductID: 104,
|
@@ -48,7 +48,7 @@ export const products = [
|
|
48
48
|
UnitPrice: 22.0,
|
49
49
|
UnitsInStock: 53,
|
50
50
|
UnitsOnOrder: new Date('4/11/2019'),
|
51
|
-
Discontinued: false
|
51
|
+
Discontinued: false
|
52
52
|
},
|
53
53
|
{
|
54
54
|
ProductID: 105,
|
@@ -61,7 +61,7 @@ export const products = [
|
|
61
61
|
UnitsInStock: 0,
|
62
62
|
UnitsOnOrder: new Date('5/11/2019'),
|
63
63
|
Discontinued: true,
|
64
|
-
AvailableFor: UserRole.GeneralOffice
|
64
|
+
AvailableFor: UserRole.GeneralOffice
|
65
65
|
},
|
66
66
|
{
|
67
67
|
ProductID: 106,
|
@@ -73,7 +73,7 @@ export const products = [
|
|
73
73
|
UnitPrice: 25.0,
|
74
74
|
UnitsInStock: 120,
|
75
75
|
UnitsOnOrder: new Date('6/11/2019'),
|
76
|
-
Discontinued: false
|
76
|
+
Discontinued: false
|
77
77
|
},
|
78
78
|
{
|
79
79
|
ProductID: 107,
|
@@ -85,7 +85,7 @@ export const products = [
|
|
85
85
|
UnitPrice: 30.0,
|
86
86
|
UnitsInStock: 15,
|
87
87
|
UnitsOnOrder: new Date('7/11/2019'),
|
88
|
-
Discontinued: false
|
88
|
+
Discontinued: false
|
89
89
|
},
|
90
90
|
{
|
91
91
|
ProductID: 108,
|
@@ -97,7 +97,7 @@ export const products = [
|
|
97
97
|
UnitPrice: 40.0,
|
98
98
|
UnitsInStock: 6,
|
99
99
|
UnitsOnOrder: new Date('8/11/2019'),
|
100
|
-
Discontinued: false
|
100
|
+
Discontinued: false
|
101
101
|
},
|
102
102
|
{
|
103
103
|
ProductID: 109,
|
@@ -109,7 +109,7 @@ export const products = [
|
|
109
109
|
UnitPrice: 97.0,
|
110
110
|
UnitsInStock: 29,
|
111
111
|
UnitsOnOrder: new Date('9/11/2019'),
|
112
|
-
Discontinued: true
|
112
|
+
Discontinued: true
|
113
113
|
},
|
114
114
|
{
|
115
115
|
ProductID: 110,
|
@@ -121,7 +121,8 @@ export const products = [
|
|
121
121
|
UnitPrice: 31.0,
|
122
122
|
UnitsInStock: 31,
|
123
123
|
UnitsOnOrder: new Date('10/11/2019'),
|
124
|
-
Discontinued: false
|
125
|
-
}
|
124
|
+
Discontinued: false
|
125
|
+
}
|
126
126
|
];
|
127
|
+
|
127
128
|
//# sourceMappingURL=products.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/demo/column-hiding/products.ts"],"sourcesContent":["import { Product, UserRole, Supplier } from './product';\n\nexport const products: Product[] = [\n {\n ProductID: 101,\n ProductName: 'Chai',\n Supplier: Supplier.Dan,\n CategoryID: 1,\n MadeIn: 'China',\n QuantityPerUnit: '10 boxes x 20 bags',\n UnitPrice: 18.0,\n UnitsInStock: 39,\n UnitsOnOrder: new Date('1/11/2019'),\n Discontinued: false,\n AvailableFor: UserRole.Admin,\n },\n {\n ProductID: 102,\n ProductName: 'Chang',\n Supplier: Supplier.Dan,\n CategoryID: 1,\n MadeIn: 'Thailand',\n QuantityPerUnit: '24 - 12 oz bottles',\n UnitPrice: 19.0,\n UnitsInStock: 17,\n UnitsOnOrder: new Date('2/11/2019'),\n Discontinued: false,\n },\n {\n ProductID: 103,\n ProductName: 'Aniseed Syrup',\n Supplier: Supplier.Dan,\n CategoryID: 2,\n MadeIn: 'France',\n QuantityPerUnit: '12 - 550 ml bottles',\n UnitPrice: 10.0,\n UnitsInStock: 13,\n UnitsOnOrder: new Date('3/11/2019'),\n Discontinued: false,\n AvailableFor: UserRole.Owner,\n },\n {\n ProductID: 104,\n ProductName: \"Chef Anton's Cajun Seasoning\",\n Supplier: Supplier.Adam,\n CategoryID: 2,\n MadeIn: 'USA',\n QuantityPerUnit: '48 - 6 oz jars',\n UnitPrice: 22.0,\n UnitsInStock: 53,\n UnitsOnOrder: new Date('4/11/2019'),\n Discontinued: false,\n },\n {\n ProductID: 105,\n ProductName: \"Chef Anton's Gumbo Mix\",\n Supplier: Supplier.Adam,\n CategoryID: 2,\n MadeIn: 'USA',\n QuantityPerUnit: '36 boxes',\n UnitPrice: 21.35,\n UnitsInStock: 0,\n UnitsOnOrder: new Date('5/11/2019'),\n Discontinued: true,\n AvailableFor: UserRole.GeneralOffice,\n },\n {\n ProductID: 106,\n ProductName: \"Grandma's Boysenberry Spread\",\n Supplier: Supplier.Charlie,\n CategoryID: 2,\n MadeIn: 'Norway',\n QuantityPerUnit: '12 - 8 oz jars',\n UnitPrice: 25.0,\n UnitsInStock: 120,\n UnitsOnOrder: new Date('6/11/2019'),\n Discontinued: false,\n },\n {\n ProductID: 107,\n ProductName: \"Uncle Bob's Organic Dried Pears\",\n Supplier: Supplier.Charlie,\n CategoryID: 7,\n MadeIn: 'USA',\n QuantityPerUnit: '12 - 1 lb pkgs.',\n UnitPrice: 30.0,\n UnitsInStock: 15,\n UnitsOnOrder: new Date('7/11/2019'),\n Discontinued: false,\n },\n {\n ProductID: 108,\n ProductName: 'Northwoods Cranberry Sauce',\n Supplier: Supplier.Charlie,\n CategoryID: 2,\n MadeIn: 'Norway',\n QuantityPerUnit: '12 - 12 oz jars',\n UnitPrice: 40.0,\n UnitsInStock: 6,\n UnitsOnOrder: new Date('8/11/2019'),\n Discontinued: false,\n },\n {\n ProductID: 109,\n ProductName: 'Mishi Kobe Niku',\n Supplier: Supplier.Benjamin,\n CategoryID: 6,\n MadeIn: 'Japan',\n QuantityPerUnit: '18 - 500 g pkgs.',\n UnitPrice: 97.0,\n UnitsInStock: 29,\n UnitsOnOrder: new Date('9/11/2019'),\n Discontinued: true,\n },\n {\n ProductID: 110,\n ProductName: 'Ikura',\n Supplier: Supplier.Benjamin,\n CategoryID: 8,\n MadeIn: 'Japan',\n QuantityPerUnit: '12 - 200 ml jars',\n UnitPrice: 31.0,\n UnitsInStock: 31,\n UnitsOnOrder: new Date('10/11/2019'),\n Discontinued: false,\n },\n];\n"],"names":["UserRole","Supplier","products","ProductID","ProductName","Dan","CategoryID","MadeIn","QuantityPerUnit","UnitPrice","UnitsInStock","UnitsOnOrder","Date","Discontinued","AvailableFor","Admin","Owner","Adam","GeneralOffice","Charlie","Benjamin"],"mappings":"AAAA,SAAkBA,QAAQ,EAAEC,QAAQ,QAAQ,YAAY;AAExD,OAAO,MAAMC,WAAsB;IAC/B;QACIC,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASI,GAAG;QACtBC,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;QACdC,cAAcd,SAASe,KAAK;IAChC;IACA;QACIZ,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASI,GAAG;QACtBC,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;IAClB;IACA;QACIV,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASI,GAAG;QACtBC,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;QACdC,cAAcd,SAASgB,KAAK;IAChC;IACA;QACIb,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASgB,IAAI;QACvBX,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;IAClB;IACA;QACIV,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASgB,IAAI;QACvBX,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;QACdC,cAAcd,SAASkB,aAAa;IACxC;IACA;QACIf,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASkB,OAAO;QAC1Bb,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;IAClB;IACA;QACIV,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASkB,OAAO;QAC1Bb,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;IAClB;IACA;QACIV,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASkB,OAAO;QAC1Bb,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;IAClB;IACA;QACIV,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASmB,QAAQ;QAC3Bd,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;IAClB;IACA;QACIV,WAAW;QACXC,aAAa;QACbH,UAAUA,SAASmB,QAAQ;QAC3Bd,YAAY;QACZC,QAAQ;QACRC,iBAAiB;QACjBC,WAAW;QACXC,cAAc;QACdC,cAAc,IAAIC,KAAK;QACvBC,cAAc;IAClB;CACH,CAAC"}
|
@@ -6,55 +6,149 @@ import { Table, TableColumn } from '../..';
|
|
6
6
|
import { TableStore } from './table.store';
|
7
7
|
import { Supplier } from './product';
|
8
8
|
import { TableCell } from '@servicetitan/design-system';
|
9
|
-
const SupplierCell = ({ field, dataItem, tdProps })
|
9
|
+
const SupplierCell = ({ field, dataItem, tdProps })=>/*#__PURE__*/ _jsx("td", {
|
10
|
+
...tdProps,
|
11
|
+
children: Supplier[dataItem[field]]
|
12
|
+
});
|
10
13
|
const columns = [
|
11
|
-
{
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
{
|
17
|
-
|
18
|
-
|
19
|
-
|
14
|
+
{
|
15
|
+
field: 'ProductID',
|
16
|
+
title: 'ID',
|
17
|
+
minWidth: 50
|
18
|
+
},
|
19
|
+
{
|
20
|
+
field: 'ProductName',
|
21
|
+
title: 'Name',
|
22
|
+
minWidth: 200
|
23
|
+
},
|
24
|
+
{
|
25
|
+
field: 'Supplier',
|
26
|
+
title: 'Supplier',
|
27
|
+
minWidth: 200
|
28
|
+
},
|
29
|
+
{
|
30
|
+
field: 'MadeIn',
|
31
|
+
title: 'Made In',
|
32
|
+
minWidth: 200
|
33
|
+
},
|
34
|
+
{
|
35
|
+
field: 'QuantityPerUnit',
|
36
|
+
title: 'Quantity Per Unit',
|
37
|
+
minWidth: 200
|
38
|
+
},
|
39
|
+
{
|
40
|
+
field: 'UnitPrice',
|
41
|
+
title: 'Price',
|
42
|
+
minWidth: 100
|
43
|
+
},
|
44
|
+
{
|
45
|
+
field: 'UnitsInStock',
|
46
|
+
title: 'In stock',
|
47
|
+
minWidth: 100
|
48
|
+
},
|
49
|
+
{
|
50
|
+
field: 'UnitsOnOrder',
|
51
|
+
title: 'On Order',
|
52
|
+
minWidth: 100
|
53
|
+
},
|
54
|
+
{
|
55
|
+
field: 'Discontinued',
|
56
|
+
title: 'Discontinued',
|
57
|
+
minWidth: 100
|
58
|
+
}
|
20
59
|
];
|
21
|
-
const CheckboxRow = memo(({ field, label, checked, onChange })
|
22
|
-
const handleChange = useCallback((event)
|
60
|
+
const CheckboxRow = /*#__PURE__*/ memo(({ field, label, checked, onChange })=>{
|
61
|
+
const handleChange = useCallback((event)=>{
|
23
62
|
onChange(field, event.target.checked);
|
24
|
-
}, [
|
25
|
-
|
63
|
+
}, [
|
64
|
+
field,
|
65
|
+
onChange
|
66
|
+
]);
|
67
|
+
return /*#__PURE__*/ _jsx("div", {
|
68
|
+
children: /*#__PURE__*/ _jsxs("label", {
|
69
|
+
children: [
|
70
|
+
/*#__PURE__*/ _jsx("input", {
|
71
|
+
type: "checkbox",
|
72
|
+
checked: checked,
|
73
|
+
onChange: handleChange
|
74
|
+
}),
|
75
|
+
" ",
|
76
|
+
label
|
77
|
+
]
|
78
|
+
})
|
79
|
+
});
|
26
80
|
});
|
27
|
-
const HiddenColumns = ({ onChange, checkedColumns })
|
28
|
-
const handleChange = useCallback((field, checked)
|
81
|
+
const HiddenColumns = ({ onChange, checkedColumns })=>{
|
82
|
+
const handleChange = useCallback((field, checked)=>{
|
29
83
|
const newState = new Set(Array.from(checkedColumns));
|
30
84
|
if (checked) {
|
31
85
|
newState.add(field);
|
32
|
-
}
|
33
|
-
else {
|
86
|
+
} else {
|
34
87
|
newState.delete(field);
|
35
88
|
}
|
36
89
|
onChange(newState);
|
37
|
-
}, [
|
38
|
-
|
90
|
+
}, [
|
91
|
+
checkedColumns,
|
92
|
+
onChange
|
93
|
+
]);
|
94
|
+
return /*#__PURE__*/ _jsxs("div", {
|
95
|
+
children: [
|
96
|
+
/*#__PURE__*/ _jsx("span", {
|
97
|
+
children: "Select columns to hide"
|
98
|
+
}),
|
99
|
+
/*#__PURE__*/ _jsx("div", {
|
100
|
+
children: columns.map((col)=>/*#__PURE__*/ _jsx(CheckboxRow, {
|
101
|
+
field: col.field,
|
102
|
+
label: col.title,
|
103
|
+
onChange: handleChange,
|
104
|
+
checked: checkedColumns.has(col.field)
|
105
|
+
}, col.field))
|
106
|
+
})
|
107
|
+
]
|
108
|
+
});
|
39
109
|
};
|
40
|
-
const CellProvider = (props)
|
110
|
+
const CellProvider = (props)=>{
|
41
111
|
if (props.field === 'Supplier') {
|
42
|
-
return _jsx(SupplierCell, {
|
112
|
+
return /*#__PURE__*/ _jsx(SupplierCell, {
|
113
|
+
...props
|
114
|
+
});
|
43
115
|
}
|
44
|
-
return _jsx(TableCell, {
|
116
|
+
return /*#__PURE__*/ _jsx(TableCell, {
|
117
|
+
...props
|
118
|
+
});
|
45
119
|
};
|
46
120
|
export const TableColumnHidingExample = provide({
|
47
|
-
singletons: [
|
48
|
-
|
121
|
+
singletons: [
|
122
|
+
TableStore
|
123
|
+
]
|
124
|
+
})(observer(()=>{
|
49
125
|
const [{ tableState }] = useDependencies(TableStore);
|
50
126
|
const [hiddenColumns, setHiddenColumns] = useState(new Set());
|
51
|
-
const handleHiddenColumnsChange = useCallback((columns)
|
52
|
-
setHiddenColumns(new Set([
|
127
|
+
const handleHiddenColumnsChange = useCallback((columns)=>{
|
128
|
+
setHiddenColumns(new Set([
|
129
|
+
...columns
|
130
|
+
]));
|
53
131
|
}, []);
|
54
|
-
return
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
132
|
+
return /*#__PURE__*/ _jsxs(Fragment, {
|
133
|
+
children: [
|
134
|
+
/*#__PURE__*/ _jsx(HiddenColumns, {
|
135
|
+
checkedColumns: hiddenColumns,
|
136
|
+
onChange: handleHiddenColumnsChange
|
137
|
+
}),
|
138
|
+
/*#__PURE__*/ _jsx(Table, {
|
139
|
+
tableState: tableState,
|
140
|
+
striped: false,
|
141
|
+
children: columns.filter((col)=>!hiddenColumns.has(col.field)).map((column)=>{
|
142
|
+
return /*#__PURE__*/ _jsx(TableColumn, {
|
143
|
+
field: column.field,
|
144
|
+
title: column.title,
|
145
|
+
id: column.field,
|
146
|
+
cell: CellProvider
|
147
|
+
}, column.field);
|
148
|
+
})
|
149
|
+
})
|
150
|
+
]
|
151
|
+
});
|
59
152
|
}));
|
153
|
+
|
60
154
|
//# sourceMappingURL=table.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/demo/column-hiding/table.tsx"],"sourcesContent":["import { Fragment, FC, memo, useCallback, useState, ChangeEvent } from 'react';\nimport { provide, useDependencies } from '@servicetitan/react-ioc';\nimport { observer } from 'mobx-react';\n\nimport { Table, TableColumn, TableCellProps } from '../..';\nimport { TableStore } from './table.store';\nimport { Supplier } from './product';\nimport { TableCell } from '@servicetitan/design-system';\n\nconst SupplierCell: FC<TableCellProps> = ({ field, dataItem, tdProps }) => (\n <td {...tdProps}>{Supplier[dataItem[field!]]}</td>\n);\n\nconst columns = [\n { field: 'ProductID', title: 'ID', minWidth: 50 },\n { field: 'ProductName', title: 'Name', minWidth: 200 },\n { field: 'Supplier', title: 'Supplier', minWidth: 200 },\n { field: 'MadeIn', title: 'Made In', minWidth: 200 },\n { field: 'QuantityPerUnit', title: 'Quantity Per Unit', minWidth: 200 },\n { field: 'UnitPrice', title: 'Price', minWidth: 100 },\n { field: 'UnitsInStock', title: 'In stock', minWidth: 100 },\n { field: 'UnitsOnOrder', title: 'On Order', minWidth: 100 },\n { field: 'Discontinued', title: 'Discontinued', minWidth: 100 },\n];\n\ninterface CheckboxRowProps {\n field: string;\n label: string;\n checked: boolean;\n onChange: (field: string, checked: boolean) => void;\n}\n\nconst CheckboxRow = memo(({ field, label, checked, onChange }: CheckboxRowProps) => {\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n onChange(field, event.target.checked);\n },\n [field, onChange]\n );\n\n return (\n <div>\n <label>\n <input type=\"checkbox\" checked={checked} onChange={handleChange} /> {label}\n </label>\n </div>\n );\n});\n\ninterface HiddenColumnsProps {\n onChange: (columns: Set<string>) => void;\n checkedColumns: Set<string>;\n}\n\nconst HiddenColumns = ({ onChange, checkedColumns }: HiddenColumnsProps) => {\n const handleChange = useCallback(\n (field: string, checked: boolean) => {\n const newState = new Set(Array.from(checkedColumns));\n if (checked) {\n newState.add(field);\n } else {\n newState.delete(field);\n }\n onChange(newState);\n },\n [checkedColumns, onChange]\n );\n return (\n <div>\n <span>Select columns to hide</span>\n <div>\n {columns.map(col => (\n <CheckboxRow\n key={col.field}\n field={col.field}\n label={col.title}\n onChange={handleChange}\n checked={checkedColumns.has(col.field)}\n />\n ))}\n </div>\n </div>\n );\n};\n\nconst CellProvider = (props: TableCellProps) => {\n if (props.field === 'Supplier') {\n return <SupplierCell {...props} />;\n }\n return <TableCell {...props} />;\n};\n\nexport const TableColumnHidingExample: FC = provide({\n singletons: [TableStore],\n})(\n observer(() => {\n const [{ tableState }] = useDependencies(TableStore);\n const [hiddenColumns, setHiddenColumns] = useState(new Set<string>());\n\n const handleHiddenColumnsChange = useCallback((columns: Set<string>) => {\n setHiddenColumns(new Set([...columns]));\n }, []);\n\n return (\n <Fragment>\n <HiddenColumns\n checkedColumns={hiddenColumns}\n onChange={handleHiddenColumnsChange}\n />\n <Table tableState={tableState} striped={false}>\n {columns\n .filter(col => !hiddenColumns.has(col.field))\n .map(column => {\n return (\n <TableColumn\n field={column.field}\n title={column.title}\n key={column.field}\n id={column.field}\n cell={CellProvider}\n />\n );\n })}\n </Table>\n </Fragment>\n );\n })\n);\n"],"names":["Fragment","memo","useCallback","useState","provide","useDependencies","observer","Table","TableColumn","TableStore","Supplier","TableCell","SupplierCell","field","dataItem","tdProps","td","columns","title","minWidth","CheckboxRow","label","checked","onChange","handleChange","event","target","div","input","type","HiddenColumns","checkedColumns","newState","Set","Array","from","add","delete","span","map","col","has","CellProvider","props","TableColumnHidingExample","singletons","tableState","hiddenColumns","setHiddenColumns","handleHiddenColumnsChange","striped","filter","column","id","cell"],"mappings":"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"}
|
@@ -1,44 +1,47 @@
|
|
1
|
-
|
1
|
+
function _define_property(obj, key, value) {
|
2
|
+
if (key in obj) {
|
3
|
+
Object.defineProperty(obj, key, {
|
4
|
+
value: value,
|
5
|
+
enumerable: true,
|
6
|
+
configurable: true,
|
7
|
+
writable: true
|
8
|
+
});
|
9
|
+
} else {
|
10
|
+
obj[key] = value;
|
11
|
+
}
|
12
|
+
return obj;
|
13
|
+
}
|
14
|
+
function _ts_decorate(decorators, target, key, desc) {
|
2
15
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
3
16
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
4
|
-
else for
|
17
|
+
else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
5
18
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
6
|
-
}
|
19
|
+
}
|
7
20
|
import { injectable } from '@servicetitan/react-ioc';
|
8
21
|
import { InMemoryDataSource, TableState } from '../..';
|
9
22
|
import { UserRole, Supplier } from './product';
|
10
23
|
import { products } from './products';
|
11
|
-
|
12
|
-
constructor() {
|
13
|
-
Object.defineProperty(this, "rowIdKey", {
|
14
|
-
enumerable: true,
|
15
|
-
configurable: true,
|
16
|
-
writable: true,
|
17
|
-
value: 'ProductID'
|
18
|
-
});
|
19
|
-
Object.defineProperty(this, "tableState", {
|
20
|
-
enumerable: true,
|
21
|
-
configurable: true,
|
22
|
-
writable: true,
|
23
|
-
value: new TableState({
|
24
|
-
dataSource: this.getDataSource(),
|
25
|
-
pageSize: 5,
|
26
|
-
rowIdKey: this.rowIdKey,
|
27
|
-
})
|
28
|
-
});
|
29
|
-
}
|
24
|
+
export class TableStore {
|
30
25
|
getDataSource() {
|
31
26
|
return new InMemoryDataSource(products, this.idSelector, {
|
32
|
-
Supplier: (value)
|
33
|
-
AvailableFor: (value)
|
27
|
+
Supplier: (value)=>Supplier[value],
|
28
|
+
AvailableFor: (value)=>value && UserRole[value]
|
34
29
|
});
|
35
30
|
}
|
36
31
|
idSelector(row) {
|
37
32
|
return row[this.rowIdKey];
|
38
33
|
}
|
39
|
-
|
40
|
-
|
34
|
+
constructor(){
|
35
|
+
_define_property(this, "rowIdKey", 'ProductID');
|
36
|
+
_define_property(this, "tableState", new TableState({
|
37
|
+
dataSource: this.getDataSource(),
|
38
|
+
pageSize: 5,
|
39
|
+
rowIdKey: this.rowIdKey
|
40
|
+
}));
|
41
|
+
}
|
42
|
+
}
|
43
|
+
TableStore = _ts_decorate([
|
41
44
|
injectable()
|
42
45
|
], TableStore);
|
43
|
-
|
46
|
+
|
44
47
|
//# sourceMappingURL=table.store.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/demo/column-hiding/table.store.ts"],"sourcesContent":["import { injectable } from '@servicetitan/react-ioc';\nimport { IdType, InMemoryDataSource, TableState } from '../..';\nimport { Product, UserRole, Supplier } from './product';\nimport { products } from './products';\n\n@injectable()\nexport class TableStore {\n rowIdKey: keyof Product = 'ProductID';\n\n tableState = new TableState({\n dataSource: this.getDataSource(),\n pageSize: 5,\n rowIdKey: this.rowIdKey,\n });\n\n private getDataSource() {\n return new InMemoryDataSource(products, this.idSelector, {\n Supplier: (value: Supplier) => Supplier[value],\n AvailableFor: (value: UserRole | undefined) => value && UserRole[value],\n });\n }\n\n private idSelector(row: Product) {\n return row[this.rowIdKey] as IdType;\n }\n}\n"],"names":["injectable","InMemoryDataSource","TableState","UserRole","Supplier","products","TableStore","getDataSource","idSelector","value","AvailableFor","row","rowIdKey","tableState","dataSource","pageSize"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAASA,UAAU,QAAQ,0BAA0B;AACrD,SAAiBC,kBAAkB,EAAEC,UAAU,QAAQ,QAAQ;AAC/D,SAAkBC,QAAQ,EAAEC,QAAQ,QAAQ,YAAY;AACxD,SAASC,QAAQ,QAAQ,aAAa;AAGtC,OAAO,MAAMC;IASDC,gBAAgB;QACpB,OAAO,IAAIN,mBAAmBI,UAAU,IAAI,CAACG,UAAU,EAAE;YACrDJ,UAAU,CAACK,QAAoBL,QAAQ,CAACK,MAAM;YAC9CC,cAAc,CAACD,QAAgCA,SAASN,QAAQ,CAACM,MAAM;QAC3E;IACJ;IAEQD,WAAWG,GAAY,EAAE;QAC7B,OAAOA,GAAG,CAAC,IAAI,CAACC,QAAQ,CAAC;IAC7B;;QAjBAA,uBAAAA,YAA0B;QAE1BC,uBAAAA,cAAa,IAAIX,WAAW;YACxBY,YAAY,IAAI,CAACP,aAAa;YAC9BQ,UAAU;YACVH,UAAU,IAAI,CAACA,QAAQ;QAC3B;;AAYJ"}
|
@@ -7,18 +7,65 @@ import { TableStore } from './table.store';
|
|
7
7
|
import { CategoryCell } from './categories';
|
8
8
|
import { Banner } from '@servicetitan/design-system';
|
9
9
|
export const AsyncSelectDefaultExample = provide({
|
10
|
-
singletons: [
|
11
|
-
|
10
|
+
singletons: [
|
11
|
+
TableStore
|
12
|
+
]
|
13
|
+
})(observer(()=>{
|
12
14
|
const [{ categoryFetcher, madeInFetcher, tableState }] = useDependencies(TableStore);
|
13
|
-
const madeInColumnMenu = useMemo(()
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
15
|
+
const madeInColumnMenu = useMemo(()=>asyncSelectColumnMenuFilter({
|
16
|
+
dataFetcher: madeInFetcher,
|
17
|
+
placeholder: 'Search for made-ins'
|
18
|
+
}), [
|
19
|
+
madeInFetcher
|
20
|
+
]);
|
21
|
+
const categoryColumnMenu = useMemo(()=>asyncSelectColumnMenuFilter({
|
22
|
+
dataFetcher: categoryFetcher,
|
23
|
+
multiple: true,
|
24
|
+
contentMaxHeight: '250px'
|
25
|
+
}), [
|
26
|
+
categoryFetcher
|
27
|
+
]);
|
28
|
+
return /*#__PURE__*/ _jsxs(Fragment, {
|
29
|
+
children: [
|
30
|
+
/*#__PURE__*/ _jsxs(Banner, {
|
31
|
+
title: "Default filter with async select",
|
32
|
+
className: "m-b-2",
|
33
|
+
children: [
|
34
|
+
"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.",
|
35
|
+
/*#__PURE__*/ _jsx("br", {}),
|
36
|
+
"Use it when there can be greater than 20 possible options"
|
37
|
+
]
|
38
|
+
}),
|
39
|
+
/*#__PURE__*/ _jsxs(Table, {
|
40
|
+
tableState: tableState,
|
41
|
+
striped: false,
|
42
|
+
children: [
|
43
|
+
/*#__PURE__*/ _jsx(TableColumn, {
|
44
|
+
field: "ProductID",
|
45
|
+
title: "ID",
|
46
|
+
editable: false,
|
47
|
+
width: "100px"
|
48
|
+
}),
|
49
|
+
/*#__PURE__*/ _jsx(TableColumn, {
|
50
|
+
field: "ProductName",
|
51
|
+
title: "Product Name",
|
52
|
+
width: "240px"
|
53
|
+
}),
|
54
|
+
/*#__PURE__*/ _jsx(TableColumn, {
|
55
|
+
field: "MadeIn",
|
56
|
+
title: "Made In (async single-select filter)",
|
57
|
+
columnMenu: madeInColumnMenu
|
58
|
+
}),
|
59
|
+
/*#__PURE__*/ _jsx(TableColumn, {
|
60
|
+
field: "CategoryID",
|
61
|
+
title: "Category (async multi-select filter)",
|
62
|
+
columnMenu: categoryColumnMenu,
|
63
|
+
cell: CategoryCell
|
64
|
+
})
|
65
|
+
]
|
66
|
+
})
|
67
|
+
]
|
68
|
+
});
|
23
69
|
}));
|
70
|
+
|
24
71
|
//# sourceMappingURL=async-select-filter.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../src/demo/filters/async-select-filter.tsx"],"sourcesContent":["import { useMemo, FC, Fragment } from 'react';\nimport { observer } from 'mobx-react';\nimport { provide, useDependencies } from '@servicetitan/react-ioc';\n\nimport { Table, TableColumn, asyncSelectColumnMenuFilter } from '../..';\n\nimport { TableStore } from './table.store';\nimport { CategoryCell } from './categories';\nimport { Banner } from '@servicetitan/design-system';\n\nexport const AsyncSelectDefaultExample: FC = provide({\n singletons: [TableStore],\n})(\n observer(() => {\n const [{ categoryFetcher, madeInFetcher, tableState }] = useDependencies(TableStore);\n\n const madeInColumnMenu = useMemo(\n () =>\n asyncSelectColumnMenuFilter({\n dataFetcher: madeInFetcher,\n placeholder: 'Search for made-ins',\n }),\n [madeInFetcher]\n );\n\n const categoryColumnMenu = useMemo(\n () =>\n asyncSelectColumnMenuFilter({\n dataFetcher: categoryFetcher,\n multiple: true,\n contentMaxHeight: '250px',\n }),\n [categoryFetcher]\n );\n\n return (\n <Fragment>\n <Banner title=\"Default filter with async select\" className=\"m-b-2\">\n Async select filter allows to choose one or several option from the list that\n will be fetched from BE. The list size is not limited, so you can also use\n search to find desired option.\n <br />\n Use it when there can be greater than 20 possible options\n </Banner>\n <Table tableState={tableState} striped={false}>\n <TableColumn field=\"ProductID\" title=\"ID\" editable={false} width=\"100px\" />\n <TableColumn field=\"ProductName\" title=\"Product Name\" width=\"240px\" />\n <TableColumn\n field=\"MadeIn\"\n title=\"Made In (async single-select filter)\"\n columnMenu={madeInColumnMenu}\n />\n <TableColumn\n field=\"CategoryID\"\n title=\"Category (async multi-select filter)\"\n columnMenu={categoryColumnMenu}\n cell={CategoryCell}\n />\n </Table>\n </Fragment>\n );\n })\n);\n"],"names":["useMemo","Fragment","observer","provide","useDependencies","Table","TableColumn","asyncSelectColumnMenuFilter","TableStore","CategoryCell","Banner","AsyncSelectDefaultExample","singletons","categoryFetcher","madeInFetcher","tableState","madeInColumnMenu","dataFetcher","placeholder","categoryColumnMenu","multiple","contentMaxHeight","title","className","br","striped","field","editable","width","columnMenu","cell"],"mappings":";AAAA,SAASA,OAAO,EAAMC,QAAQ,QAAQ,QAAQ;AAC9C,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,OAAO,EAAEC,eAAe,QAAQ,0BAA0B;AAEnE,SAASC,KAAK,EAAEC,WAAW,EAAEC,2BAA2B,QAAQ,QAAQ;AAExE,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,YAAY,QAAQ,eAAe;AAC5C,SAASC,MAAM,QAAQ,8BAA8B;AAErD,OAAO,MAAMC,4BAAgCR,QAAQ;IACjDS,YAAY;QAACJ;KAAW;AAC5B,GACIN,SAAS;IACL,MAAM,CAAC,EAAEW,eAAe,EAAEC,aAAa,EAAEC,UAAU,EAAE,CAAC,GAAGX,gBAAgBI;IAEzE,MAAMQ,mBAAmBhB,QACrB,IACIO,4BAA4B;YACxBU,aAAaH;YACbI,aAAa;QACjB,IACJ;QAACJ;KAAc;IAGnB,MAAMK,qBAAqBnB,QACvB,IACIO,4BAA4B;YACxBU,aAAaJ;YACbO,UAAU;YACVC,kBAAkB;QACtB,IACJ;QAACR;KAAgB;IAGrB,qBACI,MAACZ;;0BACG,MAACS;gBAAOY,OAAM;gBAAmCC,WAAU;;oBAAQ;kCAI/D,KAACC;oBAAK;;;0BAGV,MAACnB;gBAAMU,YAAYA;gBAAYU,SAAS;;kCACpC,KAACnB;wBAAYoB,OAAM;wBAAYJ,OAAM;wBAAKK,UAAU;wBAAOC,OAAM;;kCACjE,KAACtB;wBAAYoB,OAAM;wBAAcJ,OAAM;wBAAeM,OAAM;;kCAC5D,KAACtB;wBACGoB,OAAM;wBACNJ,OAAM;wBACNO,YAAYb;;kCAEhB,KAACV;wBACGoB,OAAM;wBACNJ,OAAM;wBACNO,YAAYV;wBACZW,MAAMrB;;;;;;AAK1B,IACF"}
|