@vendorflow/components 2.0.16 → 2.0.20
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.
|
@@ -59,7 +59,13 @@ interface Props<D extends object> {
|
|
|
59
59
|
}
|
|
60
60
|
export default function DataTable<D extends object>({ title, labels, columns, data, instance, options, renderActions, renderRowSelectActions, }: Props<D>): JSX.Element;
|
|
61
61
|
export declare function usePluginConfig<D extends object>(options: TableFeatureOptions<D>): PluginHook<D>[];
|
|
62
|
-
export
|
|
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>;
|
|
63
69
|
export declare type FilterType = 'text' | 'select' | 'multi-select' | 'range';
|
|
64
70
|
export declare function getColumnFilterConfig<D extends object>(filterType: FilterType): {
|
|
65
71
|
filter: string;
|
|
@@ -113,51 +113,54 @@ function DataTable(_a) {
|
|
|
113
113
|
return { hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected };
|
|
114
114
|
}, [selectedRowIds]), hasRowsSelected = _f.hasRowsSelected, numRowsSelected = _f.numRowsSelected;
|
|
115
115
|
var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
|
|
116
|
-
return ((0, react_1.jsx)(
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
(
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
// eslint-disable-next-line react/jsx-key
|
|
126
|
-
(0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
|
|
127
|
-
var col = column;
|
|
128
|
-
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) {
|
|
129
125
|
return (
|
|
130
126
|
// @ts-ignore
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
(0, react_1.jsx)(material_1.
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
(0, react_1.jsx)(
|
|
159
|
-
|
|
160
|
-
|
|
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: ", "px;\n "], ["\n min-width: ", "px;\n "])), col.minWidth), col.maxWidth !== undefined && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n max-width: ", "px;\n "], ["\n max-width: ", "px;\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
|
+
}));
|
|
161
164
|
}
|
|
162
165
|
exports.default = DataTable;
|
|
163
166
|
function usePluginConfig(options) {
|
|
@@ -191,7 +194,7 @@ function usePluginConfig(options) {
|
|
|
191
194
|
Header: function (props) {
|
|
192
195
|
var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
|
|
193
196
|
return ((0, react_1.jsx)(react_2.Fragment, null,
|
|
194
|
-
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(
|
|
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 "]))) })),
|
|
195
198
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.mode) === 'multi' ? (
|
|
196
199
|
// @ts-ignore
|
|
197
200
|
(0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, ((pagination === null || pagination === void 0 ? void 0 : pagination.enabled) ? getToggleAllPageRowsSelectedProps() : getToggleAllRowsSelectedProps()), {
|
|
@@ -204,7 +207,7 @@ function usePluginConfig(options) {
|
|
|
204
207
|
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (
|
|
205
208
|
// @ts-ignore
|
|
206
209
|
(0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { size: "small" }),
|
|
207
|
-
(0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(
|
|
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') }))),
|
|
208
211
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && ((0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({ name: index.toString() }, getToggleRowSelectedProps(), {
|
|
209
212
|
// @ts-ignore
|
|
210
213
|
size: "small" })))));
|
|
@@ -217,7 +220,8 @@ function usePluginConfig(options) {
|
|
|
217
220
|
}, [rowExpanding, rowSelect, columnHiding, sorting, filters, globalSearch, pagination]);
|
|
218
221
|
}
|
|
219
222
|
exports.usePluginConfig = usePluginConfig;
|
|
220
|
-
function useDefaultTableInstance(
|
|
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;
|
|
221
225
|
var filterTypes = (0, react_2.useMemo)(function () { return ({
|
|
222
226
|
equalsOneOf: function (rows, ids, filterValue) {
|
|
223
227
|
return rows.filter(function (row) {
|
|
@@ -257,12 +261,13 @@ function useDefaultTableInstance(columns, data, options) {
|
|
|
257
261
|
}
|
|
258
262
|
return newState;
|
|
259
263
|
}
|
|
260
|
-
var plugins = usePluginConfig(options
|
|
264
|
+
var plugins = usePluginConfig(options);
|
|
261
265
|
return react_table_1.useTable.apply(void 0, __spreadArray([{
|
|
262
266
|
columns: columns,
|
|
263
267
|
data: data,
|
|
264
268
|
filterTypes: filterTypes,
|
|
265
269
|
stateReducer: stateReducer,
|
|
270
|
+
initialState: initialState,
|
|
266
271
|
}], __read(plugins), false));
|
|
267
272
|
}
|
|
268
273
|
exports.useDefaultTableInstance = useDefaultTableInstance;
|
|
@@ -280,4 +285,4 @@ function getColumnFilterConfig(filterType) {
|
|
|
280
285
|
}
|
|
281
286
|
}
|
|
282
287
|
exports.getColumnFilterConfig = getColumnFilterConfig;
|
|
283
|
-
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
|
}
|