Material-UI: How can I change TablePagination caption that tells how many rows shown?

Question

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:

Answer 1

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