How to put labels to current buttons on mui-datatables

Question

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.

My current options object:

const options = {
    resizableColumns: true,
    selectableRows: "none",
    responsive: "standard",
    print: false,
    download: false,
    viewColumns: false,
   ...
  };

Guilherme Hepfener · Accepted Answer · 2022-07-08 18:30:19Z

1

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",
    },
  },

answered Jul 8, 2022 at 18:30

Guilherme Hepfener

1661 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alejandro Over a year ago

Thanks, yeah I'm using tooltips and custom text labels, but its not what i require, what I need is to add text labels to those existing buttons.

Collectives™ on Stack Overflow

How to put labels to current buttons on mui-datatables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related