Material-table: Warning: Failed prop type: Invalid prop `actions[0]` supplied to `MaterialTable`.

[halvardssm]

This error shows up in the console. I have tried to remove each singular line inside of the 'actions' but the error only goes away if I remove 'actions' itself or everything inside.

This is my 'actions' code:
actions={[
{
icon: Print,
tooltip: 'Print',
onClick: (event, rowData) => {
this.setState({ rowData })
this.handleClickOpen()
},
}
]}

[mbrn]

Hi @halvardssm ,

I could not reproduce case. Which version of material-table do you use?

[bohrsty]

I have that error too, first (but not sure) in version 1.6 and definitely in 1.7 and 1.8... my code hasn't changed since 1.6 (except localization and icons) and looks like this:

render() {
        // configure columns
        var columns = [
            {
                title: this.props.t('clubs.number'),
                field: 'number',
                type: 'numeric',
            },{
                title: this.props.t('clubs.name'),
                field: 'name',
            },{
                title: this.props.t('clubs.address'),
                field: 'address',
            },
        ];

        // configure actions
        var actions = [
            {
                icon: EditIcon,
                tooltip: t('clubs.edit'),
                onClick: this.handleClickEdit,
                iconProps: {
                    style: {
                        color: blue[400],
                    },
                },
            },{
                icon: CopyIcon,
                tooltip: t('clubs.copy'),
                onClick: this.handleClickCopy,
                iconProps: {
                    style: {
                        color: blue[400],
                    },
                },
            },{
                icon: DeleteIcon,
                tooltip: t('clubs.delete'),
                onClick: this.handleClickDelete,
                iconProps: {
                    style: {
                        color: red[500],
                    },
                },
            },
        ];

        // load data table locales
        var localization = localeMaterialTable[this.props.i18n.language](t);

        // data table config
        var options = {
            actionsColumnIndex: -1,
        };

        // configure icons
        var icons = {
            Check: Check,
            Export: SaveAlt,
            Filter: FilterList,
            FirstPage: FirstPage,
            LastPage: LastPage,
            NextPage: ChevronRight,
            PreviousPage: ChevronLeft,
            Search: Search,
            ThirdStateCheck: Remove,
            ViewColumn: ViewColumn,
        };

        return (
            <div className={classes.root}>
                <MaterialTable
                    title={t('clubs.clubs')}
                    data={this.state.clubs}
                    columns={columns}
                    options={options}
                    localization={localization}
                    actions={actions}
                    icons={icons}
                />
            </div>
        );
}

I've ignored this error until now, because everything is working afaik...

[halvardssm]

@mbrn Thanks for looking into this. I recently updated to 1.8 from 1.2, I am not completely sure but I don't think I had the error in 1.2.

[mbrn]

@bohrsty You should look at the new localization props. It has more details and your current localization may not handle new ones.

[halvardssm]

Here is my code in case it helps:

<MaterialTable
          icons={{
            FirstPage: FirstPage,
            LastPage: LastPage,
            NextPage: KeyboardArrowRight,
            PreviousPage: KeyboardArrowLeft,
            Search: Search,
          }}
          columns={[
            {
              title: 'Image', field: 'image', render: rowData => {
                return (
                  <img className="table-picture" src={rowData.image} alt=''></img>
                )
              }
            },
            { title: 'SKU', field: 'sku' },
            { title: 'Barcode', field: 'barcode' },
            { title: 'Name', field: 'productname' },
            { title: 'MSRP', field: 'msrp' },
            { title: 'Price', field: 'price' },
          ]}
          data={this.state.results.data}
          title={this.state.title}
          actions={[
            {
              icon: Print,
              tooltip: 'Print',
              onClick: (event, rowData) => {
                this.setState({ rowData })
                this.handleClickOpen()
              }
            }
          ]}
        />

[mbrn]

I understand it. It is related with PropTypes. You are right. This is a bug and i will resolve it in next release:

[halvardssm]

Thank you for your support! Let me know if you would like me to make a PR on it :)

[mbrn]

Why not @halvardssm:) You will just change line that i show on previous post.

Currently:
__icon: PropTypes.string.isRequired,__

Will change with:
__PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.string]).isRequired,__

[halvardssm]

Will do then 👍

[symnetry]

same issues happened
Warning: Failed prop type: Invalid prop action of type function supplied to MTableAction, expected object.
my version is 1.23.6
here my code

<MaterialTable
                columns={[
                    {title:"nickname",field:"nickname",sorting:false,
                        render:rowData=>{
                            let isControl=suspectsPhone.includes(rowData.phonenumber)
                            return <ControledMan isControl={isControl} text={rowData.nickname||'undo'}/>
                        }
                    },
                    {title:"gender",field:"gender",sorting:false,cellStyle:{whiteSpace:'nowrap'},render:rowData=>(rowData.gender||'未知')},
                    {title:"phonenumber号码",field:"phonenumber",sorting:false},
                    {title:"mainserver",field:"mainserver",sorting:false},
                ]}
                actions={[
                    rowData => {
                        let isControl=suspectsPhone.includes(rowData.phonenumber)
                        return {
                            icon: isControl?'lock':'lock_open',
                            tooltip: isControl?'cancel':'add',
                            onClick: (event, rowData) => isControl?this.unbind(rowData._id,rowData.phonenumber):this.bind(rowData)
                        }
                    }
                ]}
                data={query => {
                    let skip=query.page>0?query.page*query.pageSize:0
                    // let timesort = JSON.stringify({"updatedAt":-1})
                        console.log(query)
                        // if(orderBy)
                        return new Promise((resolve, reject) => {
                            redFetch(`users?$pagesize=1&$limit=${query.pageSize}&$offset=${skip}`)
                            .then(res=>{
                                console.log(res)
                                resolve({
                                    data:res.data,
                                    totalCount:res.count,
                                    page:query.page
                                })
                            })
                        })
                    }
                }
                title="member"
                /*rowStyle={{display:'flex'}}*/
                options={{...tableOptions}}
                localization={{...localization}}
            />

[mbrn]

@symnetry

Can you upgrade to 1.29.1 please?

[symnetry]

@mbrn
Great ,upgrade to 1.29.1 then resolve this problem,
Thank you for your reply!

[PiAlexay]

I have a package material-table: 1.39.0 and react: 16.8.6, app is work but I show mistake i console:
Warning: Failed prop type: Invalid prop actions[0] supplied to MaterialTable.

Problem in this code:
actions={[
{
icon: PersonAdd,
tooltip: 'Добавить',
isFreeAction: true,
onClick: (event) => alert("Вы хотите добавить нового пользователя!")
},
rowData => ({
icon: Edit,
tooltip: 'Редактировать',
onClick: (event, rowData) => alert("Вы хотите отредактировать пользователя " + rowData.id)
})
]}

Please help me.

[mbrn]

Try this

icon: () => <Edit/>

[PiAlexay]

icon: () =>

Thanks, this code is works!

[ahmedbrandver]

I am having same error in Material Table using this

actions={[
                  {
                    icon: "add",
                    isFreeAction: true,
                    onClick: undefined
                  }
                ]}
                components={{
                  Action: props => <NewBin refetch={this.requireRefetch} />
                }}

and this

actions={[
                  {
                    icon: () => <NewBin refetch={this.requireRefetch} />,
                    isFreeAction: true,
                    onClick: undefined
                  }
                ]}

Issued solved. If any one get this error you can try this

actions={[
                  {
                    icon: "add",
                    isFreeAction: true,
                    onClick: () => {}
                  }
                ]}
                components={{
                  Action: props => <NewBin refetch={this.requireRefetch} />
                }}