How to put labels to current buttons on mui-datatables

user_8189422 0
Viewed 87

I have a mui-datatables install on a React app, and its working fine, but I would like to put labels on the side of the sort and search buttons, how could I do that? thanks.screenshot

My current options object:

const options = {
    resizableColumns: true,
    selectableRows: "none",
    responsive: "standard",
    print: false,
    download: false,
    viewColumns: false,
   ...
  };
mui-datatable material-ui reactjs
1 Answers

I don't know how can add it specifically, but you can add a Tooltip instead of that. For example:

const options = {
    ...
    textLabels: {
        toolbar: {
          search: "Search",
        },
         
    },
};

Adding this code above, when the user passes the mouse over the Search Icon, the user will see the text "Search". It is not exactly the same as you asked, but I hope to help you!

Obs: with TextLabels you can personalize a lot of things on your table. For example:

textLabels: {
    body: {
      noMatch: "No match",
      toolTip: "Order by",
      columnHeaderTooltip: (column) => `Order by ${column.label}`,
    },
    pagination: {
      next: "Next page",
      previous: "Previous page",
      rowsPerPage: "Rows per page:",
      displayRows: "of",
    },
    toolbar: {
      search: "Search",
    },
    selectedRows: {
      text: "Row selected",
    },
    viewColumns: {
      title: "Show columns",
      titleAria: "Show/hide columns",
    },
  },
user_166598740
Related