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..

Answer 1

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"
        />

Answer 2

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