material-table How to do selectable and editable table?

Question

i want to do this one(some actions for selected and some actions for each row). Help please, thanks!

I use material-table with ReactJS. Now I have actions on each row without selectable, if add selection prop these actions disappear. I don't know how to combine each row actions with multiple actions..

score 14 · Answer 1 · answered Apr 07 '20 at 09:45

You can add the position: 'row' prop to actions. There are 4 options available for the position prop: auto', toolbar, toolbarOnSelect, row

This minimal code snippet should work

   <MaterialTable
          actions={[
            {
              icon: 'save',
              tooltip: 'Save User',
              position: 'row',
              onClick: (event, rowData) => alert('You saved ' + rowData.name)
            },
            {
              icon: 'delete',
              tooltip: 'Delete User',
              position: 'row',
              onClick: (event, rowData) =>
                alert('You want to delete ' + rowData.name)
            }
          ]}
          columns={[
            { title: 'Name', field: 'name' },
            { title: 'Surname', field: 'surname' },
            { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
            {
              title: 'Birth Place',
              field: 'birthCity',
              lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }
            }
          ]}
          data={[
            {
              name: 'Mehmet',
              surname: 'Baran',
              birthYear: 1987,
              birthCity: 63
            },
            {
              name: 'Zerya Betül',
              surname: 'Baran',
              birthYear: 2017,
              birthCity: 34
            }
          ]}
          options={{
            selection: true,
            actionsColumnIndex: -1
          }}
          title="Positioning Actions Column Preview"
        />

This works! It is not in the documentation on material-table's website, but it definitely works. — Sefton419, Nov 06 '20 at 00:34
This also worked for me, I think this should be the selected answer @oHorbachov — nick, Aug 18 '21 at 16:03
It's not working in case of using action as function e.g (rowData) => ({ position: "row", onClick: ... }) ! — Az.Youness, Sep 29 '21 at 17:19
In case anyone else can't get a good icon to show up, you use e.g. icon:Save and be sure to import {Save} from "@material-ui/icons" — Moe Singh, Nov 24 '22 at 18:41

jayarjo · Accepted Answer · 2019-09-29T07:30:11.107

Here's the exact place in the source where it is decided whether to show actions column when selection property is set to true:

if (this.props.actions && this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection).length > 0) {
    // ... 
}

Another such place is in renderActions method:

const actions = this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection);

So it either has to be a isFreeAction or selection should be set to false. The only way you can customize this at the moment is to override a Row component - basically copy/paste it, modify those conditions, import the result as a new component and supply it in components property of the material-table config as an override for Row.

CodeSandbox: https://codesandbox.io/s/jovial-architecture-ggnrl

material-table How to do selectable and editable table?

2 Answers2