Material-table: Invalid prop `actions[0]` supplied to `MaterialTable` and fontSize='small'

[IraSkyx]

Describe the bug
Warning: Failed prop type: Invalid prop actions[0] supplied to MaterialTable.
Can't pass fontSize props when using string icon

To Reproduce
Steps to reproduce the behavior:

1. Add actions to Material Table component
   Example :
   actions={[ { icon: 'create', tooltip: 'Add', onClick: (event, rowData) => { //Do stuff } } ]
2. Instead of a string, pass an icon component directly as the icon props
   import Create from '@material-ui/icons/Create';
   Example :
   actions={[ { icon: Create, tooltip: 'Add', onClick: (event, rowData) => { //Do stuff } } ]
3. See error in console
4. Additionnaly, because of this in m-table-action.js
   {typeof action.icon === "string" ? ( <Icon {...action.iconProps} fontSize="small">{action.icon}</Icon> ) : ( <action.icon {...action.iconProps} disabled={action.disabled} /> ) }
   We can't change the fontSize props if the icon is a string, for example if I set
   iconProps: { fontSize: 'default' }
   My props will be overriden by the hardcoded one (fontSize="small").

Expected behavior
We shouldn't get this warning.
You should probably remove this fontSize props to let users customize the size.

Desktop (please complete the following information):

• Chrome (didn't test on other platforms)
• Version 1.39.0

[mbrn]

Hi @IraSkyx

Thanks for clear description. I will resolve this problem asap.

[oze4]

I am still having this issue - has there been a fix for it yet?

[IdkMan2]

I am experiencing this issue too. Waiting for fix.

[oze4]

@IdkMan2 @mbrn FYI--

I FINALLY FOUND A FIX!

I was previously supplying my actions as objects like this:

actions={[{
    icon: () => <LocationCityOutlined />,
    tooltip: <Typography>ABC</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "abc")
}, {
    icon: () => <Opacity />,
    tooltip: <Typography>XYZ</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "xyz")
}]}

_Changing each action to a function resolved this for me!!!_

THE FIX:

actions={[
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "abc")
    }), 
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <Opacity />,
        tooltip: <Typography>XYZ</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "xyz")
    })
]}

[IdkMan2]

@IdkMan2 @mbrn FYI--

I FINALLY FOUND A FIX!

I was previously supplying my actions as objects like this:

actions={[{
    icon: () => <LocationCityOutlined />,
    tooltip: <Typography>ABC</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "abc")
}, {
    icon: () => <Opacity />,
    tooltip: <Typography>XYZ</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "xyz")
}]}

_Changing each action to a function resolved this for me!!!_

THE FIX:

actions={[
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "abc")
    }), 
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <Opacity />,
        tooltip: <Typography>XYZ</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "xyz")
    })
]}

I can confirm that. It's working for me too, but it's still a temporary workaround. Waiting for fix from author.

[bableves]

@IdkMan2 @mbrn FYI--

I FINALLY FOUND A FIX!

I was previously supplying my actions as objects like this:

actions={[{
    icon: () => <LocationCityOutlined />,
    tooltip: <Typography>ABC</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "abc")
}, {
    icon: () => <Opacity />,
    tooltip: <Typography>XYZ</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "xyz")
}]}

_Changing each action to a function resolved this for me!!!_

THE FIX:

actions={[
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "abc")
    }), 
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <Opacity />,
        tooltip: <Typography>XYZ</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "xyz")
    })
]}

It clears the warning but it doesn't work with isFreeAction: true unfortunately.

[oze4]

@bableves

Nice find. Ultimately this is something that needs to be resolved within the code base. That solution I found could be considered to be hacky. Sorry it's not working for you =/

[carlosbarlv]

@IdkMan2 @mbrn FYI--

I FINALLY FOUND A FIX!

I was previously supplying my actions as objects like this:

actions={[{
    icon: () => <LocationCityOutlined />,
    tooltip: <Typography>ABC</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "abc")
}, {
    icon: () => <Opacity />,
    tooltip: <Typography>XYZ</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "xyz")
}]}

_Changing each action to a function resolved this for me!!!_

THE FIX:

actions={[
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "abc")
    }), 
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <Opacity />,
        tooltip: <Typography>XYZ</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "xyz")
    })
]}

Perfect! working for me!

[skitsanos]

Having an issue as well. Those actions 'rowData => ({})' works as per row actions just fine, but how to setup a free action?

If i do how it says in docs

actions = [{
            icon: Print,
            tooltip: 'Print',
            isFreeAction: true
          }]

It will render the toolbar icon, but in the same time will throw a warning: Warning: Failed prop type: Invalid prop actions[0] supplied to MaterialTable

Any way to fix it?

[skitsanos]

Update. it seems that it is obligatory to pass onClick: () =>{} handler to make it work... Solved.

[bableves]

Update. it seems that it is obligatory to pass onClick: () =>{} handler to make it work... Solved.

I'm passing the onClick to these actions yet it doesn't clear the warning.

[skitsanos]

With "material-table": "1.53.0", i have the following for my Material Table:

 components={{
          Toolbar: props => (
            <>
              <MTableToolbar {...props} />
            </>
          )
        }}

actions={[
          {
            icon: () => <Icon className="fas fa-filter" style={{ fontSize: '1rem' }}/>,
            tooltip: 'Filter',
            isFreeAction: true,
            onClick: () =>
            {
            }
          },
          () => ({
            size: 'small',
            tooltip: 'Edit',
            icon: Edit,
            onClick: (event, rowData) =>
            {
              console.log((rowData));
            }
          })
]

First action will be 'table wide' and second one is 'per row'.

You can try it on my sandbox: https://codesandbox.io/s/mui-button-bar-7qcmg

[oze4]

@skitsanos nice work! The root of this problem still needs to be resolved, though (not taking away from your out-of-the-box thinking, but supplying an empty function to "resolve" this feels so hacky)..

Cheers!

[skitsanos]

Thank you @oze4

I've done some tweaking to my DataTable wrapper.

Support for URL and array data sources:

data={[id: 1,user: 'demo', email: '[email protected]']}

or

data="http://192.168.1.3/api/users"

Support for two variants of search behavior:

searchVariant="string"

This one will render simple text field where you can type search criteria and look for this value in all fields.

searchVariant="tags"

Allows making search queries by simple or key/value pair tags, for example i can write my search query like this:

demo email:@nowhere.vpn

I've also added _EditorDrawer_, so when you click on the row, there is a drawer opens where you can deal with your row data:

 rowEditor={(row) =>
                 {
                   console.log(row);
                   return <div>row</div>;
                 }}

Export functionality was modified as well. It can handle custom rendered columns with deep hierarchy of cell data. There is also optional _exportAs_ property on columns that taken into consideration during the export:

columns={[ {
          title: 'Stealth',
          sorting: false,
          render: (row) =>
          {
            if (row.roles.length > 0)
            {
              return '';
            }
            return <span className="far fa-check-circle"/>;
          },
          exportAs: (row) =>
          {
            if (row.roles.length > 0)
            {
              return 'yes';
            }
            return 'no'; 
          }
        }
]}

In this particular case I take role array of my row and render a check icon if array is empty. But for exporting to CSV I render it as yes/no options.

Plus polished some CSS.

To make it work on Edge, add corejs polyfill from https://github.com/zloirock/core-js

import 'core-js/features/array/flat';

demo time

Updated sandbox is here:
https://codesandbox.io/s/mui-datatable-7qcmg

You are free to fork and give some love if you find it handy :)

[oze4]

@skitsanos that is awesome!! Excellent work, my friend. I love it :) looks really good, too!

[skitsanos]

Thank you for the feedback! I've made few more fixes, i will publish on a codesandbox once @mbrn releases new build.

[oze4]

@mbrn can this be closed?

[mbrn]

@mbrn can this be closed?

Sure.