Material-table: Custom Action Appearing In Header

Created on 17 Sep 2019  路  3Comments  路  Source: mbrn/material-table

Describe the bug
I'm trainng to use custom action like this:

 components={{
                    Container: props => <Paper {...props} elevation={0} />,
                    Actions: ({ data }) => <button>hello world</button>
                }}

and this action is appearing in the head of the compoment

image

To Reproduce
Steps to reproduce the behavior:

 <MaterialTable
                title={'Certificados'}
                columns={columns}
                components={{
                    Container: props => <Paper {...props} elevation={0} />,
                    Actions: ({ data }) => <button>hello world</button>
                }}
                actions={[
                    {
                        icon: 'reativar',
                        tooltip: 'Reativar',
                        onClick: (event, rowData) => alert(rowData)
                    },
                ]}
                options={{
                    debounceInterval: 200,
                    exportAllData: true,
                    exportButton: true,
                    draggable: false,
                    sorting: true,
                    actionsColumnIndex: -1,
                }}
                data={query =>
                    new Promise((resolve, reject) => {
                        const url = `?searchString=${query.search}&page=${query.page + 1}&limit=${
                            query.pageSize
                        }`
                        api.get(url).then(response => {
                            const { data, headers } = response
                            resolve({
                                data: data.payload,
                                page: query.page,
                                totalCount: data.count,
                            })
                        })
                    })
                }
                localization={localizationOptions}
            />
 "dependencies": {
        "@material-ui/core": "^4.4.2",
        "@material-ui/icons": "^4.4.1",
        "material-table": "^1.50.0",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
    },

Screenshots
If applicable, add screenshots to help explain your problem.

  • chrome
has a solution question

Most helpful comment

Change Actions to Action in components

All 3 comments

Change Actions to Action in components

Thank you!

@ronaiza-cardoso I encourage you to ask material-table related questions on StackOverflow, so that others could benefit from them as well.

Was this page helpful?
0 / 5 - 0 ratings