Material-Table: Change a specific action's colour on click / state change

Question

How can I style a particular MT action based on a different state?

Currently I'm doing something like this:

 actions={[
              rowData => {
                const active = rowData && selected && rowData.tableData.id === selected.tableData.id;
                return {
                  icon: 'bug_report',
                  iconProps: { color: active ? 'secondary' : 'primary' },
                  onClick: (event, info) => {
                    setSelected(info);
                  },
                };
              },
]}

However, instead of colouring the single selected element, it just stays as primary and does nothing. Why? Is it because the actions is rendered for action row and the next row !== selected?

Answer 1

So based on what I understood, I followed your code and ended up with this:

actions={[
      rowData => {
        let active =
          rowData &&
          clickedRow &&
          rowData.tableData.id === clickedRow.tableData.id;
        return {
          icon: "bug_report",
          tooltip: "Report bug",
          onClick: (event, rowData) => setClicked(rowData),
          iconProps: { color: active ? "primary" : "secondary" }
        };
      }
    ]}

Here is the sandbox.

I hope this is what you were looking for, if not, I believe that the examples at the official docs on Selection feature may help you with this kind of behaviour.

good luck!