How to make just 1 row editable in material-table?

Question

Currently I have a table of my employees using material-table. There are some employees with certain flags which make the background row red. This is what it looks like:

What I want to do is to be able to edit the rows with the red backgrounds and only these rows. I don't want to put the editable prop on the entire table because that would take up space with icons for every single row, but I only want to be able to edit the rows with these special flags.

Here is my React code. Note that forgotClockOut is the special flag that I have.

<MaterialTable
    icons={icons}
    title="Daily Report"
    columns={[
        { title: 'Name', field: 'name' },
        {
            title: 'Time In',
            field: 'started',
            render: ({ started }) =>
                started
                    ? moment(started).format('h:mm A')
                    : 'Not yet',
            cellStyle: (value, { started, clockedOut }) => {
                if (!started) {
                    return null;
                }

                if (clockedOut) {
                    return { color: 'red' };
                }

                return { color: '#06c92d' };
            },
        },
        { title: 'Time Out', field: 'clockedOut', render: ({clockedOut}) => clockedOut ? moment(clockedOut).format('h:mm A') : 'Not yet'},
        { title: 'Time Worked', field: 'minutesWorked', render: ({minutesWorked}) => `${Math.floor(minutesWorked / 60)}h ${minutesWorked % 60}m`},
    ]}
    options={{
        rowStyle: ({forgotClockOut}) => {
            if(forgotClockOut) {
                return { backgroundColor: '#ffaaaa' };
            }
        }
    }}
    onRowClick={(event, rowData) => {
        const {forgotClockOut} = rowData;
        // ?? What to do here ??
    }}
    data={employees}
/>

Is there any way to only edit certain rows in a table made using material-table?

Will you be able to share your code on how you display `employees`? — bertdida, Aug 10 '20 at 01:15

score 4 · Accepted Answer · answered Aug 10 '20 at 01:23

4

You can use the edit prop to define that:

<MaterialTable
    editable={{
        isEditable: rowData => rowData.name === 'a', // only name(a) rows would be editable
}}/>

You can see that in docs: https://material-table.com/#/docs/features/editable

answered Aug 10 '20 at 01:23

Josnei Luis Olszewski Junior

329
4
10

I am getting the error Warning: Unknown event handler property `onBulkEditRowChanged`. It will be ignored. Is there any way to fix that? – matthewcoding0 Aug 11 '20 at 02:24

score 0 · Answer 2 · answered Aug 10 '20 at 01:53

0

You can't hide those 2 icons even if using prop isEditable and isDeletable. If you want to completely hide them, try to use Conditionals Actions.

If you need a quick workaround this problem, you can create an Action that appears under condition with the hidden prop.

const actions={
  [
    rowData => ({
      icon: 'delete',
      isFreeAction: false,
      tooltip: 'Delete User',
      hidden: !rowData.deletable
      onClick:() => {...}
      })
  ]}

answered Aug 10 '20 at 01:53

Eric

1,279
1
11
8

Thank you for your answer! This is an alright solution, but I need to know how to trigger the row editing state when the button is clicked. – matthewcoding0 Aug 10 '20 at 18:35
To make table rows editable, you should set editable prop that has onRowAdd, onRowUpdate, onRowDelete functions to manipulate data. https://material-table.com/#/docs/features/editable – Eric Aug 10 '20 at 18:43

How to make just 1 row editable in material-table?

2 Answers2