Material-table: Action button rendered with function allways will appear in toolbar!

Created on 10 May 2020  路  2Comments  路  Source: mbrn/material-table

There is two problems when you use function for rendering action buttons:

  1. The action button rendered with function "Always" will appear in toolbar, but i have set the position with "row" value!
  2. When you render action button with function, the data prop that expected to be object of intended row is an array of objects.

But you will not have any of both problems while using normal button rendering (without rowData => {})

Also i have put a normal button too (commented) for test.

You can see problems here:
https://codesandbox.io/s/compassionate-water-ibvn7

has a solution question

Most helpful comment

Had the same problem. But looking into how actions are processed:https://github.com/mbrn/material-table/blob/3031eab70105df8d88c17984ca5cea878a9eae3f/src/material-table.js#L124-L137

I appears that you have to add position property to the function object itself...
In your case:

          (rowData =>
            ({
             position: "row",
              tooltip: "Unblock User",
              icon: "check_circle_outlined",
              onClick: (event, data) =>
                console.log("Action button clicked: ", event, data)
            }))({ position: "row" })

All 2 comments

Had the same problem. But looking into how actions are processed:https://github.com/mbrn/material-table/blob/3031eab70105df8d88c17984ca5cea878a9eae3f/src/material-table.js#L124-L137

I appears that you have to add position property to the function object itself...
In your case:

          (rowData =>
            ({
             position: "row",
              tooltip: "Unblock User",
              icon: "check_circle_outlined",
              onClick: (event, data) =>
                console.log("Action button clicked: ", event, data)
            }))({ position: "row" })

Closing this issue for now. Please reopen if needed.

Was this page helpful?
0 / 5 - 0 ratings