fix RTL issue with MUI Pagination Back and Left Icons

[mm0hammadi]

material-react-table version

"material-react-table": "1.2.8"

Describe the bug and the steps to reproduce it

hi ,

When using the table in persian lang(RTL theme) , the arrow icons are displayed in reverse

Your Minimal, Reproducible Example - Sandbox (Recommended) or code snippets

fix icons in RTL mode

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No response

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[mm0hammadi]

[KevinVandy]

Did you follow the locale examples? https://www.material-react-table.com/docs/guides/localization

I personally have not tested RTL yet, but the pagination component comes directly from MUI, which should be correct as long as the Theme locale is set up correctly.

If there is still a problem, there might be a CSS class we can target to change the flex direction of these buttons.

[mm0hammadi]

yes , i did ,localization is okay .but i want to change Arrow Right Icon and Arrow Left Icon in pagination next and back page ?
How can do it ?

[KevinVandy]

@mm0hammadi Would you be interested in contributing your persian lang locale translations? I'd like to debug this, but also we can add Persian as a built-in language for this library.

[KevinVandy]

@mm0hammadi If you ever have time and see this, would you be able to tell me how a right to left table should look like?

On my docs site, it looks like this

But would you expect the columns to be in the opposite direction? Are the headers and their buttons supposed to be reversed?

I can eventually make all these fixes in the library.

[mm0hammadi]

thats okay but there are some style issue :

• The placeholder text must be center or right.
• generally, the texts should be from right to left, for example, the text of columns ,headers and rows and the text of filters.
• The actions column can be on the right side.
• I can change the of all icons except pagination icons.i could not do it .

thank you

[mm0hammadi]

[KevinVandy]

@mm0hammadi Did you add in your own styles to accomplish that? Or did the MaterialReactTable just work like that in your app?

[mm0hammadi]

yes, i added some style like this :

    muiTableContainerProps={{
          sx: {
            backgroundColor: background,
            borderRadius: '15px'
          }
        }}
        muiBottomToolbarProps={{
          sx: {
            height: '50px',
            backgroundColor: background,
            borderRadius: '15px'
          }
        }}

[KevinVandy]

@mm0hammadi I guess I meant to ask whether or not you were adding in flex-reverse on your own or not to make everything right to left like in your screenshots, or if that was happening automatically for you.

[mm0hammadi]

no ,it was happening automatically for me

[KevinVandy]

This is a solution:

<MaterialReactTable
    columns={columns}
    data={data}
    muiTablePaginationProps={{
      backIconButtonProps: {
        style: { transform: 'rotate(180deg)' },
      },
      nextIconButtonProps: {
        style: { transform: 'rotate(180deg)' },
      },
    }}
  />

It may get added to the library internally, though this seems more to be a bug with Mui's own TablePagination component.