Material-table: When options={selection: true} is set the actions column does not appear for the table

[CalebCox]

Describe the bug
When options={selection: true} is set the actions column does not appear for the table.

To Reproduce
Steps to reproduce the behavior:

1. Create a standard MaterialTable component
2. Add props options={{selection: true}} and actions={[{ icon: 'account_circle', tooltip: 'test', onClick: (event, rowData) => { console.log(rowData);}}]}
3. View table in browser
4. Notice the checkbox column overwrites the Actions column. This also occurs if you try to change the actions column index.

Expected behavior
Actions column should be added after the checkbox column on index 1 (assuming 0 indexed table columns) and to the left of the table data.

Desktop (please complete the following information):

• OS: MacOS Mojave 10.14.2
• Browser Chrome
• Version 72.0.3626.121

[mbrn]

Hi @CalebCox ,

Thanks for very clear description. But this is not a bug. This is normal behaviour of table. Because actions are related with row. If you open selection this mean a action will work on multiple row. To see actions on the right top corner of table, select a few rows.

[CalebCox]

@mbrn Thank you for clarifying! I couldn't see anything in the docs that mentioned this behavior and since the Actions are listed in their own column in the examples, not seeing the actions on the rows was quite confusing!

Perhaps it would be a nice feature to allow the actions to display on the row itself if nothing is selected? Unfortunately I'm not sure of a good way to display that transition.

[mbrn]

It could be nice, but i would not prefer this type of actions. Because it will be frustrating for both developer and users. So if you have special case to show a action always on row although selection is open, you can use custom render feature to draw your own actions.

[stemarf50]

Hey @mbrn, I'm having a case where I want an EDIT action button for each row, and a common DELETE (free action) on the toolbar for selected rows (if any). Is it possible for you to add a prop/param for every action (maybe called bool multiple) that will let me choose the appropriate behaviour for each action button?

[mbrn]

isFreeAction property is not enough?

[stemarf50]

Thanks for the response, but that is not what I am looking for. I want a row-specific EDIT and a selection-specific DELETE. The current setup does not seem to allow that as selection boxes remove action buttons from individual rows.

[mbrn]

Yes. You can use custom render feature to render your own actions even if selection is true.

[jurcaua]

Hello! I also need a row-specific edit but a selection-specific delete.
How can I trigger something for a specific row for edit, if I were to create a custom render?

• Granted I do see the value of allowing actions and selection enabled at the same time, as some operations only make sure for a single row rather than batched.

[mbrn]

Hi @jurcaua

Just add a new column with render property. And render a button for row. Please look at doc for custom render feature.

[jurcaua]

Hey @mbrn, I got that part, but I am just confused on how to then trigger the edit UI for a specific row within this custom render. Any help would be greatly appreciated 😁

[mbrn]

Try this:

render: rowData =>

[jurcaua]

Sorry, there may be a small misunderstanding! I don't think I am explaining well.

When a promise is given to the onRowUpdate key in the editable props of MaterialTable, an edit button appears on each row of the table right?
On click of this button, a special UI is now rendered instead where the current row has all fields editable, and the other rows are greyed out.

My issue right now is that I do not know how to trigger this "editing mode UI" from another action. I had trouble finding which props I can set for MaterialTable that allows me to say "this is the row I am currently editing, please show the user this UI".

Furthermore, how dealing with the "Confirm" and "Cancel" button clicks once a user finishes editing. I assume providing a promise like before to onRowUpdate would work fine?

Does that make sense?

Thank you so much for your time!

[mbrn]

I got it. I will change behaviour of edit buttons asap. Currentlly there is no solution to this case.

[jurcaua]

Thank you!

Making them behave like the other action buttons, to keep everything with the same syntax, would be best design I imagine. I look forward to seeing how its done :) Thank you so much!

[neerajnarayanankp]

@jurcaua i also have the same usecase.
@mbrn Please update once the above mentioned change is introduced.
Thanks in advance !

[palakkapoor]

@mbrn I am facing a similar issue. I need to edit the current selected row with the default onRowUpdate functionality. Have you changed the behavior of Edit Button yet when selection: true?