material-react-table 1.0.0-beta.17 → 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/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',
@@ -1114,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;
@@ -1124,10 +1130,13 @@ 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({ '& .MuiTablePagination-toolbar': {
+    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': {