material-react-table 2.12.0 → 2.12.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +20 -35
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +20 -35
- package/dist/index.js.map +1 -1
- package/locales/hr/index.d.ts +3 -0
- package/locales/hr/index.esm.d.ts +3 -0
- package/locales/hr/index.esm.js +95 -0
- package/locales/hr/index.js +99 -0
- package/locales/hr/package.json +6 -0
- package/package.json +23 -23
- package/src/components/inputs/MRT_FilterTextField.tsx +12 -25
- package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +1 -4
- package/src/components/toolbar/MRT_TablePagination.tsx +10 -12
- package/src/hooks/useMRT_ColumnVirtualizer.ts +6 -8
- package/src/locales/hr.ts +96 -0
- package/src/types.ts +0 -1
package/dist/index.d.ts
CHANGED
@@ -1146,7 +1146,6 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
|
|
1146
1146
|
renderTopToolbarCustomActions?: (props: {
|
1147
1147
|
table: MRT_TableInstance<TData>;
|
1148
1148
|
}) => ReactNode;
|
1149
|
-
rowCount?: number;
|
1150
1149
|
rowNumberDisplayMode?: 'original' | 'static';
|
1151
1150
|
rowPinningDisplayMode?: 'bottom' | 'select-bottom' | 'select-sticky' | 'select-top' | 'sticky' | 'top' | 'top-and-bottom';
|
1152
1151
|
rowVirtualizerInstanceRef?: MutableRefObject<MRT_RowVirtualizer | MRT_Virtualizer | null>;
|
package/dist/index.esm.js
CHANGED
@@ -1645,22 +1645,23 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
|
|
1645
1645
|
|
1646
1646
|
const useMRT_ColumnVirtualizer = (table) => {
|
1647
1647
|
var _a, _b, _c, _d;
|
1648
|
-
const {
|
1649
|
-
const { columnPinning, draggingColumn } = getState();
|
1648
|
+
const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
|
1649
|
+
const { columnPinning, columnVisibility, draggingColumn } = getState();
|
1650
1650
|
if (!enableColumnVirtualization)
|
1651
1651
|
return undefined;
|
1652
1652
|
const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
|
1653
1653
|
table,
|
1654
1654
|
});
|
1655
|
-
const visibleColumns = getVisibleLeafColumns();
|
1655
|
+
const visibleColumns = table.getVisibleLeafColumns();
|
1656
1656
|
const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnPinning
|
1657
1657
|
? [
|
1658
|
-
|
1659
|
-
|
1658
|
+
table.getLeftVisibleLeafColumns().map((c) => c.getPinnedIndex()),
|
1659
|
+
table
|
1660
|
+
.getRightVisibleLeafColumns()
|
1660
1661
|
.map((column) => visibleColumns.length - column.getPinnedIndex() - 1)
|
1661
1662
|
.sort((a, b) => a - b),
|
1662
1663
|
]
|
1663
|
-
: [[], []], [columnPinning, enableColumnPinning]);
|
1664
|
+
: [[], []], [columnPinning, columnVisibility, enableColumnPinning]);
|
1664
1665
|
const numPinnedLeft = leftPinnedIndexes.length;
|
1665
1666
|
const numPinnedRight = rightPinnedIndexes.length;
|
1666
1667
|
const draggingColumnIndex = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
|
@@ -2803,26 +2804,12 @@ const MRT_FilterTextField = (_a) => {
|
|
2803
2804
|
const { column } = header;
|
2804
2805
|
const { columnDef } = column;
|
2805
2806
|
const { filterVariant } = columnDef;
|
2806
|
-
const
|
2807
|
-
|
2808
|
-
|
2809
|
-
})),
|
2810
|
-
const
|
2811
|
-
|
2812
|
-
table,
|
2813
|
-
}));
|
2814
|
-
const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, {
|
2815
|
-
column,
|
2816
|
-
table,
|
2817
|
-
}));
|
2818
|
-
const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
|
2819
|
-
column,
|
2820
|
-
table,
|
2821
|
-
}));
|
2822
|
-
const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, {
|
2823
|
-
column,
|
2824
|
-
table,
|
2825
|
-
}));
|
2807
|
+
const args = { column, rangeFilterIndex, table };
|
2808
|
+
const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, args)), rest);
|
2809
|
+
const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, args)), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, args));
|
2810
|
+
const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, args));
|
2811
|
+
const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, args));
|
2812
|
+
const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, args));
|
2826
2813
|
const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
|
2827
2814
|
const dropdownOptions = useDropdownOptions({ header, table });
|
2828
2815
|
const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
|
@@ -3705,13 +3692,13 @@ const MRT_TablePagination = (_a) => {
|
|
3705
3692
|
var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
|
3706
3693
|
const theme = useTheme();
|
3707
3694
|
const isMobile = useMediaQuery('(max-width: 720px)');
|
3708
|
-
const {
|
3695
|
+
const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
|
3709
3696
|
const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
|
3710
3697
|
const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
|
3711
3698
|
table,
|
3712
3699
|
})), rest);
|
3713
|
-
const totalRowCount =
|
3714
|
-
const numberOfPages =
|
3700
|
+
const totalRowCount = table.getRowCount();
|
3701
|
+
const numberOfPages = table.getPageCount();
|
3715
3702
|
const showFirstLastPageButtons = numberOfPages > 2;
|
3716
3703
|
const firstRowIndex = pageIndex * pageSize;
|
3717
3704
|
const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
|
@@ -3741,17 +3728,17 @@ const MRT_TablePagination = (_a) => {
|
|
3741
3728
|
}, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
|
3742
3729
|
'aria-label': localization.rowsPerPage,
|
3743
3730
|
id: 'mrt-rows-per-page',
|
3744
|
-
}, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
|
3731
|
+
}, label: localization.rowsPerPage, onChange: (event) => table.setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
|
3745
3732
|
var _a;
|
3746
3733
|
const value = typeof option !== 'number' ? option.value : option;
|
3747
3734
|
const label = typeof option !== 'number' ? option.label : `${option}`;
|
3748
3735
|
return ((_a = SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.children) !== null && _a !== void 0 ? _a : ((SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) ? (jsx("option", { value: value, children: label }, value)) : (jsx(MenuItem, { sx: { m: 0 }, value: value, children: label }, value))));
|
3749
|
-
}) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
|
3736
|
+
}) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => table.setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
|
3750
3737
|
first: FirstPageIcon,
|
3751
3738
|
last: LastPageIcon,
|
3752
3739
|
next: ChevronRightIcon,
|
3753
3740
|
previous: ChevronLeftIcon,
|
3754
|
-
} }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () =>
|
3741
|
+
} }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
|
3755
3742
|
};
|
3756
3743
|
|
3757
3744
|
const MRT_ToolbarDropZone = (_a) => {
|
@@ -3829,9 +3816,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
3829
3816
|
const { columnOrder } = getState();
|
3830
3817
|
const { columnDef } = column;
|
3831
3818
|
const { columnDefType } = columnDef;
|
3832
|
-
const switchChecked =
|
3833
|
-
(columnDefType === 'group' &&
|
3834
|
-
column.getLeafColumns().some((col) => col.getIsVisible()));
|
3819
|
+
const switchChecked = column.getIsVisible();
|
3835
3820
|
const handleToggleColumnHidden = (column) => {
|
3836
3821
|
var _a, _b;
|
3837
3822
|
if (columnDefType === 'group') {
|