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

@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 @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.

@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

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 =/

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

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

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

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: 'info@nowhere.vpn']}

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 😃

@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!

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