4

I want to change the string of the word "of" to another word, I tried to do so through node_modules but it didn't work.

Here is my code:

<TableFooter>
  <TableRow>
    <TablePagination
      rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
      count={props.generalIndicatorDataItem.length}
      rowsPerPage={rowsPerPage}
      page={page}
      labelRowsPerPage="عدد السلع فى الصفحة"
      onChangePage={handleChangePage}
      onChangeRowsPerPage={handleChangeRowsPerPage}
      ActionsComponent={TablePaginationActions}
    />
  </TableRow>
</TableFooter>

And here is a screenshot of what I have:

enter image description here

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
mostafa elbanna
  • 195
  • 2
  • 3
  • 9

1 Answers1

2

labelDisplayedRows props is a callback with the following signature:

({ from, to, count }) => string

This is how you use it correctly:

labelDisplayedRows={({ from, to, count }) =>
  `${from}-${to} OF ${count !== -1 ? count : `MORE THAN ${to}`}`}

Live Demo

Edit 67297785/material-ui-how-can-i-change-tablepagination-caption-that-tells-how-many-rows-s

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
  • i tried it but it didn't effect the text , i already used this props as the code above {labelRowsPerPage="عدد السلع فى الصفحة"} – mostafa elbanna Apr 28 '21 at 10:58
  • @mostafaelbanna You are assigning `labelRowsPerPage` to a string `"عدد السلع فى الصفحة"` while the `labelRowsPerPage` only accepts callback. Did you copy the example in the my code snippet to make sure it works? – NearHuscarl Apr 28 '21 at 11:03
  • yes, i already tried to comment my value and copied the code above `${from}-${to} من ${count !== -1 ? count : `أكثر من ${to}`}` } // labelRowsPerPage="عدد السلع فى الصفحة" /> – mostafa elbanna Apr 28 '21 at 11:27
  • @mostafaelbanna Sorry, my bad. It's `labelDisplayedRows`, not `labelRowsPerPage` – NearHuscarl Apr 28 '21 at 11:39
  • oh, finally its working... Thanks for your efforts – mostafa elbanna Apr 28 '21 at 11:45