[TablePaginationActions]: Add ability to add a component between the left navigation and right navigation in TablePaginationActions.

[nainshinayan]

Summary

The default ActionsComponent for TablePagination is TablePaginationActions which renders the page navigation buttons. If TablePaginationActions can accept a custom component as a prop to render between the left navigation and right navigation, TablePaginationActions can be used to create a custom Action Component.

Examples

Motivation

We have a design to add a TextField between the Left Navigation and Right Navigation to enter the page number.
Currently, there is no way to add this TextField component in TablePaginationActions. We have to fork the TablePaginationActions component and add the TextField.
If MUI can provide a prop to add a component between the left navigation and right navigation in TablePaginationActions, we can avoid the fork.

Search keywords: TablePaginationActions

[siriwatknp]

Thanks for reporting the issue! we will try to improve it in v7.

One idea that I can think of is accepting a children prop:

<TablePaginationActions>
  <TextField />
</TablePaginationActions>

[nainshinayan]

Thanks for the response siriwatknp this looks like a good solution but the solution is specific to my use case. If the user wants to place the TextField before the FirstButton, this solution will not work.

Suggestion: MUI can export the FirstButtonSlot, PreviousButtonSlot, NextButtonSlot, and LastButtonSlot and user can import these to use as per their requirement.

The below example is a possible use case where the user would want to position the navigation buttons differently.

import {FirstButtonSlot, PreviousButtonSlot, NextButtonSlot, LastButtonSlot } from '@mui/material/TablePagination';
import {Box} from '@mui/material/Box';
import {TextField} from '@mui/material/TextField';
import {Typography} from '@mui/material/Typography';



const CustomActionsComponent = ({showFirstButton, showLastButton, ...rest})=>{
     /**
      * States, context, and other logic will go here
      */

     return(
          <Box>
               <Typography>"Enter the page number"<Typography/>
               <TextField onChange={onChange} onKeyDown={onKeyDown} value={page} />
               <Typography>"Navigate to first and last page"<Typography/>
               <FirstButtonSlot {...rest}/>
               <LastButtonSlot {...rest}/>
               <Typography>"Navigate between pages"<Typography/>
               <PreviousButtonSlot {...rest}/>
               <NextButtonSlot {...rest}/>
          </Box>
     )
}

With this suggested solution to export the navigation buttons, if the user does not pass the custom ActionsComponent, MUI ActionComponents will be rendered. If the user wants a custom ActionsComponent, the user can import these navigation components and build their own and avoid all the forking.