@vendorflow/components 2.0.15 → 2.0.19

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.
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
8
8
  /** @jsx jsx */
9
9
  var react_1 = require("@emotion/react");
10
10
  var material_1 = require("@mui/material");
11
+ var SingleSelectFilter_1 = require("./FilterTool/Filters/SingleSelectFilter");
11
12
  var PADDING = 24;
12
13
  function AppliedFilters(_a) {
13
14
  var columnNameById = _a.columnNameById, filters = _a.filters, setFilter = _a.setFilter;
@@ -19,7 +20,7 @@ function AppliedFilters(_a) {
19
20
  return (Array.isArray(filter.value) && !!filter.value.length) ||
20
21
  (!Array.isArray(filter.value) && filter.value != null);
21
22
  })
22
- .map(function (filter) { return ((0, react_1.jsx)(material_1.Chip, { key: filter.id, label: columnNameById[filter.id] + ": " + filter.value, onDelete: function () { return setFilter(filter.id, null); } })); })));
23
+ .map(function (filter) { return ((0, react_1.jsx)(material_1.Chip, { key: filter.id, label: columnNameById[filter.id] + ": " + (filter.value === '' ? SingleSelectFilter_1.BLANK_VALUE_LABEL : filter.value), onDelete: function () { return setFilter(filter.id, null); } })); })));
23
24
  }
24
25
  exports.default = AppliedFilters;
25
26
  var templateObject_1;
@@ -22,7 +22,7 @@ exports.Columns = [
22
22
  Header: 'Full Name',
23
23
  columns: [
24
24
  __assign({ Header: 'First Name', accessor: 'firstName' }, (0, DataTable_1.getColumnFilterConfig)('text')),
25
- __assign({ Header: 'Last Name', accessor: 'lastName' }, (0, DataTable_1.getColumnFilterConfig)('multi-select')),
25
+ __assign({ Header: 'Last Name', accessor: 'lastName', filterName: 'Custom LN' }, (0, DataTable_1.getColumnFilterConfig)('multi-select')),
26
26
  ],
27
27
  },
28
28
  __assign({ Header: 'Age', accessor: 'age', sortType: 'number', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('range')),
@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
3
3
  export declare type Mode = 'single' | 'multi';
4
4
  export declare type CustomColumnConfigProps<D extends object> = {
5
5
  name?: string;
6
+ filterName?: string;
6
7
  columns?: EnhancedColumn<D>[];
7
8
  };
8
9
  export declare type EnhancedHeader<D extends object> = HeaderGroup<D> & UseFiltersColumnProps<D> & UseSortByColumnProps<D> & CustomColumnConfigProps<D>;
@@ -58,7 +59,13 @@ interface Props<D extends object> {
58
59
  }
59
60
  export default function DataTable<D extends object>({ title, labels, columns, data, instance, options, renderActions, renderRowSelectActions, }: Props<D>): JSX.Element;
60
61
  export declare function usePluginConfig<D extends object>(options: TableFeatureOptions<D>): PluginHook<D>[];
61
- export declare function useDefaultTableInstance<D extends object>(columns: EnhancedColumn<D>[], data: D[], options?: TableFeatureOptions<D>): EnhancedTableInstance<D>;
62
+ export interface UseDefaultTableInstanceProps<D extends object> {
63
+ columns: EnhancedColumn<D>[];
64
+ data: D[];
65
+ options?: TableFeatureOptions<D>;
66
+ initialState?: Partial<EnhancedTableState<D>>;
67
+ }
68
+ export declare function useDefaultTableInstance<D extends object>({ columns, data, options, initialState, }: UseDefaultTableInstanceProps<D>): EnhancedTableInstance<D>;
62
69
  export declare type FilterType = 'text' | 'select' | 'multi-select' | 'range';
63
70
  export declare function getColumnFilterConfig<D extends object>(filterType: FilterType): {
64
71
  filter: string;
@@ -85,7 +85,10 @@ function DataTable(_a) {
85
85
  cols.forEach(function (col) {
86
86
  var id = col.id != null ? col.id : typeof col.accessor === 'string' ? col.accessor : null;
87
87
  if (id) {
88
- if (typeof col.Header === 'string') {
88
+ if (col.filterName) {
89
+ result[id] = col.filterName;
90
+ }
91
+ else if (typeof col.Header === 'string') {
89
92
  result[id] = col.Header;
90
93
  }
91
94
  else if (!col.name) {
@@ -110,51 +113,54 @@ function DataTable(_a) {
110
113
  return { hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected };
111
114
  }, [selectedRowIds]), hasRowsSelected = _f.hasRowsSelected, numRowsSelected = _f.numRowsSelected;
112
115
  var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
113
- return ((0, react_1.jsx)(material_1.Paper, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n "], ["\n width: 100%;\n position: relative;\n "]))) },
114
- (0, react_1.jsx)("div", null,
115
- (0, react_1.jsx)(Toolbar_1.default, { title: title, allColumns: allColumns, columnNameById: columnNameById, globalFilter: globalFilter, enableFilters: filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled, enableGlobalSearch: globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.enabled, enableHideColumns: columnHidingConfig === null || columnHidingConfig === void 0 ? void 0 : columnHidingConfig.enabled, hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected, setAllFilters: setAllFilters, setGlobalFilter: (globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter) ? globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter : setGlobalFilter, renderActions: renderActions, renderRowSelectActions: renderRowSelectActions }),
116
- (filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter }))),
117
- (0, react_1.jsx)(material_1.TableContainer, null,
118
- (0, react_1.jsx)(material_1.Table, __assign({}, getTableProps(), { size: "small", "aria-label": "table" }),
119
- (0, react_1.jsx)(material_1.TableHead, null, headerGroups.map(function (headerGroup) {
120
- return (
121
- // @ts-ignore
122
- // eslint-disable-next-line react/jsx-key
123
- (0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
124
- var col = column;
125
- var _a = col.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? col.getSortByToggleProps() : undefined), key = _a.key, restOfProps = __rest(_a, ["key"]);
116
+ return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
117
+ var css = _a.css, cx = _a.cx;
118
+ return ((0, react_1.jsx)(material_1.Paper, { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n "], ["\n width: 100%;\n position: relative;\n "]))) },
119
+ (0, react_1.jsx)("div", null,
120
+ (0, react_1.jsx)(Toolbar_1.default, { title: title, allColumns: allColumns, columnNameById: columnNameById, globalFilter: globalFilter, enableFilters: filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled, enableGlobalSearch: globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.enabled, enableHideColumns: columnHidingConfig === null || columnHidingConfig === void 0 ? void 0 : columnHidingConfig.enabled, hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected, setAllFilters: setAllFilters, setGlobalFilter: (globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter) ? globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter : setGlobalFilter, renderActions: renderActions, renderRowSelectActions: renderRowSelectActions }),
121
+ (filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter }))),
122
+ (0, react_1.jsx)(material_1.TableContainer, null,
123
+ (0, react_1.jsx)(material_1.Table, __assign({}, getTableProps(), { size: "small", "aria-label": "table" }),
124
+ (0, react_1.jsx)(material_1.TableHead, null, headerGroups.map(function (headerGroup) {
126
125
  return (
127
126
  // @ts-ignore
128
- (0, react_1.jsx)(material_1.TableCell, __assign({ key: key }, restOfProps, { css: col.id === 'custom' && (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n width: ", ";\n "], ["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n width: ", ";\n "])), (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.enabled) && (rowSelectConfig === null || rowSelectConfig === void 0 ? void 0 : rowSelectConfig.enabled)
129
- ? (rowSelectConfig === null || rowSelectConfig === void 0 ? void 0 : rowSelectConfig.mode) === 'multi'
130
- ? '72px'
131
- : '104px'
132
- : '36px') }),
133
- (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n "], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n "])), col.columns != null ? 'center' : 'flex-start') },
134
- (0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n "], ["\n font-weight: 600;\n "]))) }, col.render('Header')),
135
- (0, react_1.jsx)(SortIndicator_1.default, { canSort: col.canSort, isSorted: col.isSorted, isSortedDesc: col.isSortedDesc }))));
136
- })));
137
- })),
138
- (0, react_1.jsx)(material_1.TableBody, null, tableRows.length > 0 ? (tableRows.map(function (row) {
139
- prepareRow(row);
140
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
141
- var _a = row.getRowProps(), style = _a.style, key = _a.key, restOfRowProps = __rest(_a, ["style", "key"]);
142
- var isExpanded = row.isExpanded;
143
- return ((0, react_1.jsx)(react_2.Fragment, { key: key },
144
- (0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps), row.cells.map(function (cell) {
145
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
146
- var _a = cell.getCellProps(), style = _a.style, key = _a.key, restOfCellProps = __rest(_a, ["style", "key"]);
147
- return ((0, react_1.jsx)(material_1.TableCell, __assign({ css: cell.column.id === 'custom' && (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n "], ["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n "]))), key: key }, restOfCellProps), cell.render('Cell')));
148
- })),
149
- isExpanded && ((0, react_1.jsx)(material_1.TableRow, null,
150
- (0, react_1.jsx)(material_1.TableCell, { colSpan: (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.colSpan) || visibleColumns.length },
151
- (0, react_1.jsx)(ExpandedComponent, { data: row.original }))))));
152
- })) : ((0, react_1.jsx)(material_1.TableRow, null,
153
- (0, react_1.jsx)(material_1.TableCell, { colSpan: noMatchColSpan || visibleColumns.length },
154
- (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
155
- (0, react_1.jsx)("span", null, noMatchLabel))),
156
- noMatchColSpan != null && noMatchColSpan > 0 && visibleColumns.length - noMatchColSpan > 0 && ((0, react_1.jsx)(material_1.TableCell, { colSpan: visibleColumns.length - noMatchColSpan }))))))),
157
- (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { component: "div", count: data.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize }))));
127
+ // eslint-disable-next-line react/jsx-key
128
+ (0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
129
+ var col = column;
130
+ var _a = col.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? col.getSortByToggleProps() : undefined), key = _a.key, restOfProps = __rest(_a, ["key"]);
131
+ return (
132
+ // @ts-ignore
133
+ (0, react_1.jsx)(material_1.TableCell, __assign({ key: key }, restOfProps, { css: col.id === 'custom' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n width: ", ";\n "], ["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n width: ", ";\n "])), (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.enabled) && (rowSelectConfig === null || rowSelectConfig === void 0 ? void 0 : rowSelectConfig.enabled)
134
+ ? (rowSelectConfig === null || rowSelectConfig === void 0 ? void 0 : rowSelectConfig.mode) === 'multi'
135
+ ? '72px'
136
+ : '104px'
137
+ : '36px'), className: "col-" + col.id }),
138
+ (0, react_1.jsx)("div", { css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n "], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n "])), col.columns != null ? 'center' : 'flex-start') },
139
+ (0, react_1.jsx)("span", { css: cx(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n "], ["\n font-weight: 600;\n "]))), col.minWidth !== undefined && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n min-width: ", ";\n "], ["\n min-width: ", ";\n "])), col.minWidth), col.maxWidth !== undefined && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n max-width: ", ";\n "], ["\n max-width: ", ";\n "])), col.maxWidth)) }, col.render('Header')),
140
+ (0, react_1.jsx)(SortIndicator_1.default, { canSort: col.canSort, isSorted: col.isSorted, isSortedDesc: col.isSortedDesc }))));
141
+ })));
142
+ })),
143
+ (0, react_1.jsx)(material_1.TableBody, null, tableRows.length > 0 ? (tableRows.map(function (row) {
144
+ prepareRow(row);
145
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
146
+ var _a = row.getRowProps(), style = _a.style, key = _a.key, restOfRowProps = __rest(_a, ["style", "key"]);
147
+ var isExpanded = row.isExpanded;
148
+ return ((0, react_1.jsx)(react_2.Fragment, { key: key },
149
+ (0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps), row.cells.map(function (cell) {
150
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
151
+ var _a = cell.getCellProps(), style = _a.style, key = _a.key, restOfCellProps = __rest(_a, ["style", "key"]);
152
+ return ((0, react_1.jsx)(material_1.TableCell, __assign({ css: cell.column.id === 'custom' && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n "], ["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n "]))), key: key }, restOfCellProps), cell.render('Cell')));
153
+ })),
154
+ isExpanded && ((0, react_1.jsx)(material_1.TableRow, null,
155
+ (0, react_1.jsx)(material_1.TableCell, { colSpan: (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.colSpan) || visibleColumns.length },
156
+ (0, react_1.jsx)(ExpandedComponent, { data: row.original }))))));
157
+ })) : ((0, react_1.jsx)(material_1.TableRow, null,
158
+ (0, react_1.jsx)(material_1.TableCell, { colSpan: noMatchColSpan || visibleColumns.length },
159
+ (0, react_1.jsx)("div", { css: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
160
+ (0, react_1.jsx)("span", null, noMatchLabel))),
161
+ noMatchColSpan != null && noMatchColSpan > 0 && visibleColumns.length - noMatchColSpan > 0 && ((0, react_1.jsx)(material_1.TableCell, { colSpan: visibleColumns.length - noMatchColSpan }))))))),
162
+ (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { component: "div", count: data.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize }))));
163
+ }));
158
164
  }
159
165
  exports.default = DataTable;
160
166
  function usePluginConfig(options) {
@@ -188,7 +194,7 @@ function usePluginConfig(options) {
188
194
  Header: function (props) {
189
195
  var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
190
196
  return ((0, react_1.jsx)(react_2.Fragment, null,
191
- (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 17px;\n "], ["\n padding: 17px;\n "]))) })),
197
+ (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 17px;\n "], ["\n padding: 17px;\n "]))) })),
192
198
  (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.mode) === 'multi' ? (
193
199
  // @ts-ignore
194
200
  (0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, ((pagination === null || pagination === void 0 ? void 0 : pagination.enabled) ? getToggleAllPageRowsSelectedProps() : getToggleAllRowsSelectedProps()), {
@@ -201,7 +207,7 @@ function usePluginConfig(options) {
201
207
  (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (
202
208
  // @ts-ignore
203
209
  (0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { size: "small" }),
204
- (0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n transform: rotate3d(0, 0, 1, ", ");\n transition: transform 0.25s;\n "], ["\n transform: rotate3d(0, 0, 1, ", ");\n transition: transform 0.25s;\n "])), isExpanded ? '90deg' : '0deg') }))),
210
+ (0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n transform: rotate3d(0, 0, 1, ", ");\n transition: transform 0.25s;\n "], ["\n transform: rotate3d(0, 0, 1, ", ");\n transition: transform 0.25s;\n "])), isExpanded ? '90deg' : '0deg') }))),
205
211
  (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && ((0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({ name: index.toString() }, getToggleRowSelectedProps(), {
206
212
  // @ts-ignore
207
213
  size: "small" })))));
@@ -214,7 +220,8 @@ function usePluginConfig(options) {
214
220
  }, [rowExpanding, rowSelect, columnHiding, sorting, filters, globalSearch, pagination]);
215
221
  }
216
222
  exports.usePluginConfig = usePluginConfig;
217
- function useDefaultTableInstance(columns, data, options) {
223
+ function useDefaultTableInstance(_a) {
224
+ var columns = _a.columns, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.initialState, initialState = _c === void 0 ? {} : _c;
218
225
  var filterTypes = (0, react_2.useMemo)(function () { return ({
219
226
  equalsOneOf: function (rows, ids, filterValue) {
220
227
  return rows.filter(function (row) {
@@ -254,12 +261,13 @@ function useDefaultTableInstance(columns, data, options) {
254
261
  }
255
262
  return newState;
256
263
  }
257
- var plugins = usePluginConfig(options || {});
264
+ var plugins = usePluginConfig(options);
258
265
  return react_table_1.useTable.apply(void 0, __spreadArray([{
259
266
  columns: columns,
260
267
  data: data,
261
268
  filterTypes: filterTypes,
262
269
  stateReducer: stateReducer,
270
+ initialState: initialState,
263
271
  }], __read(plugins), false));
264
272
  }
265
273
  exports.useDefaultTableInstance = useDefaultTableInstance;
@@ -277,4 +285,4 @@ function getColumnFilterConfig(filterType) {
277
285
  }
278
286
  }
279
287
  exports.getColumnFilterConfig = getColumnFilterConfig;
280
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
288
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
@@ -53,7 +53,7 @@ function DataTable() {
53
53
  enabled: true,
54
54
  },
55
55
  };
56
- var instance = (0, DataTable_1.useDefaultTableInstance)(columns, data, options);
56
+ var instance = (0, DataTable_1.useDefaultTableInstance)({ columns: columns, data: data, options: options });
57
57
  return (react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)() },
58
58
  react_1.default.createElement(DataTable_1.default, { title: "People", data: data, columns: columns, instance: instance, options: options, renderActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); }, renderRowSelectActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); } })));
59
59
  }
@@ -1,5 +1,6 @@
1
1
  import { FilterProps } from 'react-table';
2
2
  import { EnhancedHeader } from '../../DataTable';
3
+ export declare const BLANK_VALUE_LABEL = "<Blank>";
3
4
  interface Props<D extends object> extends FilterProps<D> {
4
5
  column: EnhancedHeader<D>;
5
6
  columns: EnhancedHeader<D>[];
@@ -47,17 +47,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
47
47
  return (mod && mod.__esModule) ? mod : { "default": mod };
48
48
  };
49
49
  Object.defineProperty(exports, "__esModule", { value: true });
50
+ exports.BLANK_VALUE_LABEL = void 0;
50
51
  var react_1 = __importStar(require("react"));
51
52
  var InputSearchDropdown_1 = __importDefault(require("../../../InputSearchDropdown"));
53
+ exports.BLANK_VALUE_LABEL = '<Blank>';
52
54
  function SingleSelectFilter(_a) {
53
55
  var column = _a.column, _b = _a.column, filterValue = _b.filterValue, preFilteredRows = _b.preFilteredRows, setFilter = _b.setFilter;
54
56
  var options = (0, react_1.useMemo)(function () {
55
57
  var options = new Set();
56
58
  preFilteredRows.forEach(function (row) {
57
- options.add(row.values[column.id]);
59
+ var value = row.values[column.id];
60
+ options.add(value === '' ? exports.BLANK_VALUE_LABEL : value);
58
61
  });
59
62
  return __spreadArray([], __read(options.values()), false);
60
63
  }, [column.id, preFilteredRows]);
61
- return (react_1.default.createElement(InputSearchDropdown_1.default, { label: "Filter Value", size: "small", fullWidth: true, value: filterValue || null, onChange: function (evt) { return setFilter(evt.target.value); }, getOptionLabel: function (option) { return option === null || option === void 0 ? void 0 : option.toString(); }, options: options }));
64
+ return (react_1.default.createElement(InputSearchDropdown_1.default, { label: "Filter Value", size: "small", fullWidth: true, value: filterValue || null, onChange: function (_a) {
65
+ var value = _a.target.value;
66
+ return setFilter(value === exports.BLANK_VALUE_LABEL ? '' : value);
67
+ }, getOptionLabel: function (option) { return option === null || option === void 0 ? void 0 : option.toString(); }, options: options }));
62
68
  }
63
69
  exports.default = SingleSelectFilter;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "2.0.15",
3
+ "version": "2.0.19",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",