Use MUI TablePagination

[YishaiGr]

Instead of only using Pagination component from MUI, add the option to use TablePagination component as well.
Also adding custom pagination component could be a great solution

[KevinVandy]

MRT v2 already provides you with either the TablePagination or Pagination components from MUI with the paginationDisplayMode table option. Additionally, since MRT is built on TanStack Table, you can make your own pagination UI component and hook it up to the table instance APIs pretty easily.

I think this pretty common actually. So what you're asking for is already 100% supported.

[YishaiGr]

The MRT_TablePagination doesn't use MUI's TablePagination, its a custom component by MRT, which uses the MUI's Pagination component or a custom component that looks like the MUI TablePagination, but its a custom component with little options to control it. It is possible to create custom pagination component on my side that uses MUI's TablePagination, but I think it's a bummer that MRT_TablePagination doesn't really use the TablePagination from MUI but implements it in a custom way.

Im referring to this code in the MRT_TablePagination:

paginationDisplayMode === 'default' ? (
        <>
          <Typography
            align="center"
            component="span"
            sx={{ m: '0 4px', minWidth: '8ch' }}
            variant="body2"
          >{`${
            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
          }-${lastRowIndex.toLocaleString()} ${
            localization.of
          } ${totalRowCount.toLocaleString()}`}</Typography>
          <Box gap="xs">
            {showFirstButton && (
              <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
                <span>
                  <IconButton
                    aria-label={localization.goToFirstPage}
                    disabled={disableBack}
                    onClick={() => table.firstPage()}
                    size="small"
                  >
                    <FirstPageIcon {...flipIconStyles(theme)} />
                  </IconButton>
                </span>
              </Tooltip>
            )}
            <Tooltip {...tooltipProps} title={localization.goToPreviousPage}>
              <span>
                <IconButton
                  aria-label={localization.goToPreviousPage}
                  disabled={disableBack}
                  onClick={() => table.previousPage()}
                  size="small"
                >
                  <ChevronLeftIcon {...flipIconStyles(theme)} />
                </IconButton>
              </span>
            </Tooltip>
            <Tooltip {...tooltipProps} title={localization.goToNextPage}>
              <span>
                <IconButton
                  aria-label={localization.goToNextPage}
                  disabled={disableNext}
                  onClick={() => table.nextPage()}
                  size="small"
                >
                  <ChevronRightIcon {...flipIconStyles(theme)} />
                </IconButton>
              </span>
            </Tooltip>
            {showLastButton && (
              <Tooltip {...tooltipProps} title={localization.goToLastPage}>
                <span>
                  <IconButton
                    aria-label={localization.goToLastPage}
                    disabled={disableNext}
                    onClick={() => table.lastPage()}
                    size="small"
                  >
                    <LastPageIcon {...flipIconStyles(theme)} />
                  </IconButton>
                </span>
              </Tooltip>
            )}
          </Box>
        </>
      ) : null}

we can replace this code with something like:

<TablePagination {...restPaginationProps} />