Mui-datatables: Adding custom icon on table header beside Search icon

[PratyushaTN]

I have seen an issue has already been raised to check if any additional icons can be added along with other icons in the table header.
But I want to add an icon at the beginning of the table header icons

Expected Behavior

Need to know if I can add a new icon beside the Search Icon i.e. MyIcon should be the first icon and then followed by Search, Filter, Columns etc.

Current Behavior

I have seen an issue has been raised to add icon, but when I try to add it. The icon is added only to the extreme right.

| Tech | Version |
|--------------|---------|
| Material-UI | 0.20.2 |
| MUI-datatables | 2.0.0-beta.58 |
| React | 16.8.2

|
| browser | |
| etc | |

[gabrielliwerant]

I don't think there's an easy way to choose a custom arrangement of the toolbar icons, including when you add your own to the existing set of icons. I'd be open to PRs which would allow for specifying the ordering of the icons.

[rfermann]

You could use the order css property as shown below:

    const getMuiTheme = () =>
      createMuiTheme({
        overrides: {
          MUIDataTableToolbar: {
            actions: {
              display: "flex",
              flex: "initial",
              // move all icons to the right
              "& > span, & > button": {
                order: 99
              },
              // target the custom toolbar icon
              "& > span:last-child, & > button:last-child": {
                order: 1
              },
              // target any icon
              "& > span:nth-child(4), & > button:nth-child(4)": {
                order: 2
              }
            }
          }
        }
      });

A working example can be found here: https://codesandbox.io/s/muidatatables-custom-toolbar-hvpyy.

With this you can basically move around the icons in any order you want. Just provide the highest order number to all icons supposed to be on the right side and and target all icons you want to move to some other position separately.

I am not sure if that can be considered an easy solution or if there is still a need to specify the ordering within the customToolbar option, though.

[gabrielliwerant]

Thanks for working that out @rfermann! I'm a big fan of using any existing tools to create solutions rather than add ones, but I do think it would be nice to have an easier way, if anyone wants to talk about approaches and possibly taking it on.

[PratyushaTN]

You could use the order css property as shown below:

    const getMuiTheme = () =>
      createMuiTheme({
        overrides: {
          MUIDataTableToolbar: {
            actions: {
              display: "flex",
              flex: "initial",
              // move all icons to the right
              "& > span, & > button": {
                order: 99
              },
              // target the custom toolbar icon
              "& > span:last-child, & > button:last-child": {
                order: 1
              },
              // target any icon
              "& > span:nth-child(4), & > button:nth-child(4)": {
                order: 2
              }
            }
          }
        }
      });

A working example can be found here: https://codesandbox.io/s/muidatatables-custom-toolbar-hvpyy.

With this you can basically move around the icons in any order you want. Just provide the highest order number to all icons supposed to be on the right side and and target all icons you want to move to some other position separately.

I am not sure if that can be considered an easy solution or if there is still a need to specify the ordering within the customToolbar option, though.

Thank you..This worked!!!!

[rfermann]

What about enhancing the customToolbar option to either directly take a component (as it is today) or take an object containing the component and an optional object with the different icons as keys and the order as the value per key:

const customToolbar = {
  component: <MyIcon />,
  iconOrder: {
    search: 1,
    download: 3,
    print: 4,
    customComponent: 2
  }
}

In addition we create distinct classes for each icon and attach the order value passed via the customToolbar option to each class:

downloadIcon: props => ({
    order: props.iconOrder.download,
  }),

Instead of enhancing the existing customToolbar option, it would also be possible to create a new option for the icon sorting on the top level. But in my opinion it would be a cleaner solution to colocate the additional component(s) and sorting order under the same option, as they affect the same part of the table.

[iamkk11]

You could use the order css property as shown below:

    const getMuiTheme = () =>
      createMuiTheme({
        overrides: {
          MUIDataTableToolbar: {
            actions: {
              display: "flex",
              flex: "initial",
              // move all icons to the right
              "& > span, & > button": {
                order: 99
              },
              // target the custom toolbar icon
              "& > span:last-child, & > button:last-child": {
                order: 1
              },
              // target any icon
              "& > span:nth-child(4), & > button:nth-child(4)": {
                order: 2
              }
            }
          }
        }
      });

A working example can be found here: https://codesandbox.io/s/muidatatables-custom-toolbar-hvpyy.

With this you can basically move around the icons in any order you want. Just provide the highest order number to all icons supposed to be on the right side and and target all icons you want to move to some other position separately.

I am not sure if that can be considered an easy solution or if there is still a need to specify the ordering within the customToolbar option, though.

This worked for me. Many thanks.