react js mui-datatables can't translate labelDisplayedRows text

Question

I'm using "mui-datatables": "^4.2.2", with react js 17 to handle datatable.

I created a liste of options :

const options = {
  filter: false,
  download: true,
  sort: false,
  selectableRows: true,
  print: true,
  viewColumns: false,
  searchOpen: false,
  // rowsPerPageOptions: {},
  labelDisplayedRows: ({ from, to, count }) => {
    return "Affichage de " + from + " à " + to + " sur " + count;
  },
  search: true,
  page: 0,
  pageSize: 10,
  // rowsPerPage: 10,
  rowsPerPageOptions: {},
};

I want to translate labelDisplayedRows :

 labelDisplayedRows: ({ from, to, count }) => {
    return "Affichage de " + from + " à " + to + " sur " + count;
  },

  <MUIDataTable
     title={"Accueil"}
     data={data}
     columns={columns}
     options={options}
   />

but it doesn't work.

how can i change the text correctly? thanks

Answer 1

You need to use customFooter for this not labelDisplayedRows

See this very basic example just for the proof of concept

And for a more complete example, check this demo which also includes MuiTablePagination in order to have the controls to navigate between pages.