Changing position of the pagination element

[p34m5]

Hi,

Thank you for the great library. I have a question about the position of the pagination component. Is there a way to move it from the bottom to the top of the table?

I went through the documentation but couldn't find any way to do that.

Thank you for your help!

[mbrn]

Hi @p34m5 ,

Thanks. Currently you can not. But i can add a option to paginationPosition (top|bottom|both) asap.

[adamsoffer]

I'm working with a design that has the pagination in the header. This would be a great addition 👍

[adamsoffer]

@mbrn - thank you for this awesome component! I was wondering - are there still plans to include this feature in a future release?

[baomastr]

I've customized pagination position with Pagination prop for components:

  <MaterialTable
    components={{
      Pagination: props => {
        return (
          <td>
            <table
              style={{
                position: 'fixed',
                bottom: 0,
                left: 0,
                width: '100%',
              }}
            >
              <tbody>
                <tr>
                  <TablePagination {...props} />
                </tr>
              </tbody>
            </table>
          </td>
        );
      },
    }}
  />

additional table wrapper is for valid DOM nesting

[damienld22]

Hello @mbrn,

First, thank you for your library, it is very useful for my projects !

I am very interested to have a property to set the position of the pagination. Is it possible to add the paginationPosition (top|bottom|both) property that you spoke ?

Thank you,

Damien

[shreya-shah]

Hey @mbrn,

Thanks for providing such a great library. It would be great if pagination component has a position property, which allows it to be placed either at the top or bottom of the table. Looking forward to this feature.

Thanks, Shreya

[jdavidferreira]

It would be even better if you could set pagination both at the top and bottom. As @damienld22 said.

[stasbamiza]

Hi!

I used DataTables for for old projects and I was wonder that I can change components positions. I tasted Material Table and it's nice lib. Unfortunately refused to use it. The main problem that I have design with different control position e.g. "Page Size selector" located over table in left side, "Pagination" with some changes located under table in right side, additionally have text "Show 10 records of 500" under table in left side.

Conclusion: Guys you made good job, especially I like dynamic data loading(Ajax) but now I want as user Control current page, Pagination, Search query term etc. via props. I think that it allow us to implement hard design and create own controls with own control across props.

Many thanks 😃

[iamsaurabhgupt]

@mbrn we would like to move it to bottom centre. This is a duplicate of my issue: https://github.com/mbrn/material-table/issues/2131

[macman2013]

Hi,

I contributed this feature and it has been included as part of release 1.67.0. To use it, set the new paginationPosition prop to top, bottom, or both. The default pagination position is bottom. I hope everyone enjoys using this new option. Thanks!

[iamsaurabhgupt]

@macman2013 how to move it to bottom center, as shown in my earlier comment?

[jpnuma]

As a workaround, this can be done by CSS

<MaterialTable style={{ display: 'flex', flexDirection: 'column', }}

Then on you css file:

div.MuiToolbar-root { order: 1 } div.MuiToolbar-root + div { order: 3 } table.MuiTable-root { order: 2 }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[atinyakov]

Hi,

I contributed this feature and it has been included as part of release 1.67.0. To use it, set the new paginationPosition prop to top, bottom, or both. The default pagination position is bottom. I hope everyone enjoys using this new option. Thanks!

Hi, can you please update documentation on material-table.com, since this prop is not mentioned.

[Mark-DSouza]

Hi @p34m5 ,

Thanks. Currently you can not. But i can add a option to paginationPosition (top|bottom|both) asap.

Could you update the docs to reflect this addition.

[KostasTur]

To center the TablePagination component using styled api:

const StyledTablePagination = styled(TablePagination)`
    .MuiTablePagination-toolbar {
      justify-content: center;
    }
    .MuiTablePagination-spacer {
      flex: none;
    }
  `

[alimajedha-home]

Hello, For the languages with a right-to-left layout, your component works great, except for the pagination layout. I have read the documentation about localization, but I couldn't figure out how to style the pagination (bottom toolbar) correctly. The problem is for rtl layout, the order of the next page should be this: (next page <) (prev page >).

The only styles I could make are: 1- (next page >) (prev page <): The position of the arrows is incorrect.

In the attached image, "صفحه بعد" means the next page, the position of the arrows is incorrect here, they should be swapped.

2- (prev page <) (next page >): the prev page and next page should be swapped.

In the attached image, "صفحه قبل" means the previous page, which should be swapped with the next page button (issue number 2).