material-react-table 1.0.0-beta.15 → 1.0.0-beta.18

package/dist/cjs/toolbar/MRT_TablePagination.d.ts

@@ -1,7 +1,7 @@
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
-    table: MRT_TableInstance<TData>;
     position: 'top' | 'bottom';
+    table: MRT_TableInstance<TData>;
 }
 export declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ table, position, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/MaterialReactTable.d.ts

@@ -47,6 +47,10 @@ export interface MRT_Localization {
     filterStartsWith: string;
     filterWeakEquals: string;
     filteringByColumn: string;
+    goToFirstPage: string;
+    goToLastPage: string;
+    goToNextPage: string;
+    goToPreviousPage: string;
     grab: string;
     groupByColumn: string;
     groupedBy: string;
@@ -57,6 +61,7 @@ export interface MRT_Localization {
     move: string;
     noRecordsToDisplay: string;
     noResultsFound: string;
+    of: string;
     or: string;
     pinToLeft: string;
     pinToRight: string;
@@ -65,6 +70,7 @@ export interface MRT_Localization {
     rowActions: string;
     rowNumber: string;
     rowNumbers: string;
+    rowsPerPage: string;
     save: string;
     search: string;
     select: string;

package/dist/esm/_locales/pt-BR.d.ts

@@ -0,0 +1,2 @@
+import { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_PT_BR: MRT_Localization;

package/dist/esm/material-react-table.esm.js

@@ -192,6 +192,10 @@ const MRT_Localization_EN = {
     filterStartsWith: 'Starts With',
     filterWeakEquals: 'Equals',
     filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+    goToFirstPage: 'Go to first page',
+    goToLastPage: 'Go to last page',
+    goToNextPage: 'Go to next page',
+    goToPreviousPage: 'Go to previous page',
     grab: 'Grab',
     groupByColumn: 'Group by {column}',
     groupedBy: 'Grouped by ',
@@ -202,6 +206,7 @@ const MRT_Localization_EN = {
     move: 'Move',
     noRecordsToDisplay: 'No records to display',
     noResultsFound: 'No results found',
+    of: 'of',
     or: 'or',
     pinToLeft: 'Pin to left',
     pinToRight: 'Pin to right',
@@ -210,6 +215,7 @@ const MRT_Localization_EN = {
     rowActions: 'Row Actions',
     rowNumber: '#',
     rowNumbers: 'Row Numbers',
+    rowsPerPage: 'Rows per page',
     save: 'Save',
     search: 'Search',
     selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
@@ -1023,7 +1029,16 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
     return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow) },
-        React.createElement(Checkbox, Object.assign({ checked: selectAll ? table.getIsAllRowsSelected() : row === null || row === void 0 ? void 0 : row.getIsSelected(), indeterminate: selectAll ? table.getIsSomeRowsSelected() : row === null || row === void 0 ? void 0 : row.getIsSomeSelected(), inputProps: {
+        React.createElement(Checkbox, Object.assign({ checked: selectAll
+                ? selectAllMode === 'page'
+                    ? table.getIsAllPageRowsSelected()
+                    : table.getIsAllRowsSelected()
+                : row === null || row === void 0 ? void 0 : row.getIsSelected(), indeterminate: selectAll
+                ? table.getIsSomeRowsSelected() &&
+                    !(selectAllMode === 'page'
+                        ? table.getIsAllPageRowsSelected()
+                        : table.getIsAllRowsSelected())
+                : row === null || row === void 0 ? void 0 : row.getIsSomeSelected(), inputProps: {
                 'aria-label': selectAll
                     ? localization.toggleSelectAll
                     : localization.toggleSelectRow,
@@ -1105,7 +1120,7 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
 };
 
 const MRT_TablePagination = ({ table, position, }) => {
-    const { getPrePaginationRowModel, getState, setPageIndex, setPageSize, options: { muiTablePaginationProps, enableToolbarInternalActions, rowCount, }, } = table;
+    const { getPrePaginationRowModel, getState, setPageIndex, setPageSize, options: { muiTablePaginationProps, enableToolbarInternalActions, localization, rowCount, }, } = table;
     const { pagination: { pageSize = 10, pageIndex = 0 }, showGlobalFilter, } = getState();
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const showFirstLastPageButtons = totalRowCount / pageSize > 2;
@@ -1115,10 +1130,26 @@ const MRT_TablePagination = ({ table, position, }) => {
     const handleChangeRowsPerPage = (event) => {
         setPageSize(+event.target.value);
     };
-    return (React.createElement(TablePagination, Object.assign({ SelectProps: {
-            sx: { m: '0 1rem 0 1ch' },
-            MenuProps: { MenuListProps: { disablePadding: true } },
-        }, component: "div", count: totalRowCount, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { sx: (theme) => (Object.assign({ mt: position === 'top' &&
+    return (React.createElement(TablePagination, Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
+            ? localization.goToFirstPage
+            : type === 'last'
+                ? localization.goToLastPage
+                : type === 'next'
+                    ? localization.goToNextPage
+                    : localization.goToPreviousPage, labelDisplayedRows: ({ from, to, count }) => `${from}-${to} ${localization.of} ${count}`, labelRowsPerPage: localization.rowsPerPage, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { SelectProps: Object.assign({ sx: { m: '0 1rem 0 1ch' }, MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } } }, tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.SelectProps), sx: (theme) => (Object.assign({ '& .MuiTablePagination-toolbar': {
+                display: 'flex',
+                alignItems: 'center',
+            }, '& .MuiTablePagination-selectLabel': {
+                m: '0 -1px',
+            }, '&. MuiInputBase-root': {
+                m: '0 1px',
+            }, '& . MuiTablePagination-select': {
+                m: '0 1px',
+            }, '& .MuiTablePagination-displayedRows': {
+                m: '0 1px',
+            }, '& .MuiTablePagination-actions': {
+                m: '0 1px',
+            }, mt: position === 'top' &&
                 enableToolbarInternalActions &&
                 !showGlobalFilter
                 ? '3.5rem'
@@ -1129,7 +1160,7 @@ const MRT_TablePagination = ({ table, position, }) => {
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
     var _a, _b;
-    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerProps, muiToolbarAlertBannerChipProps, positionToolbarAlertBanner, }, } = table;
+    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerProps, muiToolbarAlertBannerChipProps, positionToolbarAlertBanner, rowCount, }, } = table;
     const { grouping, showAlertBanner } = getState();
     const alertProps = muiToolbarAlertBannerProps instanceof Function
         ? muiToolbarAlertBannerProps({ table })
@@ -1138,7 +1169,7 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
         ? muiToolbarAlertBannerChipProps({ table })
         : muiToolbarAlertBannerChipProps;
     const selectMessage = getSelectedRowModel().rows.length > 0
-        ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', getPrePaginationRowModel().rows.length.toString())
+        ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
         : null;
     const groupedByMessage = grouping.length > 0 ? (React.createElement("span", null,
         localization.groupedBy,
@@ -2625,7 +2656,7 @@ const MRT_TableRoot = (props) => {
 };
 
 var MaterialReactTable = (_a) => {
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
     return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, defaultDisplayColumn: Object.assign({ columnDefType: 'display', enableClickToCopy: false, enableColumnActions: false, enableColumnDragging: false, enableColumnFilter: false, enableColumnOrdering: false, enableEditing: false, enableGlobalFilter: false, enableGrouping: false, enableHiding: false, enableResizing: false, enableSorting: false }, defaultDisplayColumn), editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_Localization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
 };