Conditional Action Icons

[Jack-Development]

I'm always having to make a custom version of the action when I want to have a conditional icon, the last time it happened was when I was trying to display users and wanted a way to either elevate or decrease their permissions, and as such wanted an up arrow for when they didn't have it and down arrow for when they did.

It would allow for better feedback to the user as to what their action will cause, particularly with situations such as this.

Here is the implementation I was referring to earlier, and as you can see the arrows will point down when on an Admin and up when it's just a typical user.

I have wanted to do this in the past by the use of a ternary operator, such as data.isAdmin ? "arrow_upward" : "arrow_downward"

I feel like this would allow users to more easily be able to create responsive systems for users.

[Domino987]

You can do this with the community fork material table core and the actions: https://material-table-core.com/demos/actions/basic with the following code as an example:

function BasicActionsDemo() {
  return (
    <MaterialTable
      data={DEMO_DATA}
      columns={DEMO_COLS}
      icons={TABLE_ICONS}
      actions={[
        data => ({
          icon: () => data.id === 1 ? <SaveIcon /> : null,
          tooltip: "Save User",
          onClick: (event, rowData) => {
            const rowJson = JSON.stringify(rowData, null, 2);
            alert(`Do save operation : ${rowJson}`);
          },
        }),
      ]}
    />
  );
}

This could easily be adjusted for your use case

[TeodorGenov]

I've been having a similar problem, where this does indeed fix it. But the what is more is when I make it so selection: true then this action disappears. Is that intended?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.