Search code examples
reactjsmaterial-uimaterial-table

material-table How to do selectable and editable table?

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

enter image description here

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

Solution

  • 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