Add ability to inline edit on rows without having to click edit button

[jakeleventhal]

Is your feature request related to a problem? Please describe.
It is difficult and annoying sometimes to click the edit button on a row to edit its contents. Many users on our software have complained about this and would like to just be able to click to edit a row

Describe the solution you'd like
Cells should be clickable - bringing up the edit component
This is a good example of what we are looking for functionality-wise. It would of course have to fit the Material theme

[tharun968]

Hello, Is there any update on this feature ? Do we have insight on this way to implement the edit on rows w/o edit button. I'm trying to customize it but didn't get any way. Please confirm.

[itsmeganesh-cse-iiit]

Same issue here, planning to customize the package with required functionality, will update the repo soon.

[dharmesh-r-patel]

Something looking

[Dobata7]

up

[MichaelJC91]

I would love this feature!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[jakeleventhal]

not stale!

[iamsaurabhgupt]

@mbrn we would also love to have this feature.
Currently, edit is available only on row level. So, all selection options of a selector field are not visible. If this is editable on cell level, then the selector options changing and visibility would become drastically enhanced.

[mbrn]

I started to work on :)

[iamsaurabhgupt]

Awesome @mbrn . Would wait for this release.
You can have a look at Datatable Editor for building a similar functionality on React.
If this gets built, then you would have taken it to another level altogether.

[mbrn]

Hi,

You can use the feature with the version 1.67.1

To see an example: https://material-table.com/#/docs/features/editable

Note: We can develop it more. This is first release about cell editing.

[iamsaurabhgupt]

@mbrn It it possible to remove that underline?
It's spoiling the aesthetics.
Rest looks great.
Thanks a lot for the amazing work.

[mbrn]

@iamsaurabhgupt

Of course. I can do it configurable.

Also i will add a cellEditable.type (select, all)
select: Current style of editing. Users should select cell to edit.
all: All cells would be editable at the same time with a flag.

[iamsaurabhgupt]

@mbrn Yes, that seems wonderful.
Also, we tried to change the styling of selector like a chip.

But, the table was not accepting it.
Is that something that's currently possible or it needs a fresh issue to be created?

[mbrn]

@iamsaurabhgupt

You can override editComponent.

[iamsaurabhgupt]

@mbrn is there a documentation how to do it?
May be I am missing something.

[mbrn]

@iamsaurabhgupt

https://material-table.com/#/docs/features/editable

does 3rd example solve your needs?

[enisit]

Hi @mbrn awesome work on cell edit feature. However, editComponent does not override default input with the cell editing feature.
I used row editing before this release and editComponent was working fine but since I installed the latest version (1.68.0) and switched to cell editing it does not work anymore. Row editing still works fine with the latest release.

          { 
            title: 'Tags',
            field: 'tags',
            editComponent: (props) => {
              return (
                <ChipInput
                    value={props.value}
                    newChipKeyCodes={[188]}
                    newChipKeys={[',']}
                    placeholder="Enter comma separated values"
                    onAdd={tag => props.onChange([...props.value, tag])}
                    onDelete={(tag, index) => {
                      props.value.splice(index,1);
                      props.onChange([...props.value]);
                    }}
                />
              );
            },
            render: (rowData) => {
              return (
                <div>
                  {rowData.tags.map((tag) => {
                    return (
                      <Chip
                        key={tag}
                        label={tag}
                        className={classes.chip}
                      />
                    )
                  })}
                </div>
              );
            }
          }

[iamsaurabhgupt]

@mbrn Row editing allows disabling editing of selective fields.
But, cell edit is not allowing to disable editing on some fields. We are not able to utilise this feature due to this gap.

[pinkMoneyKing]

@mbrn is it possible to combine editComponent with cellEditable or does cellEditable override the editComponent? My use case is trying to create a custom dropdown whose values are fetched from an api and are dynamic depending on the the type of data in the row. So a row with type A will get type A options vs row type B will get type B options. The editComponent would allow me to abstract its logic out, take a prop and fetch the specific dropdown values associated with that prop. I haven't been able to combine editComponent and cellEditable and wasn't sure if this was even possible at this time or if i'm just not doing it correctly.

[atishwarchand]

@iamsaurabhgupt can you help me with this question.
#2628

[khunspoonzi]

@mbrn It it possible to remove that underline?
It's spoiling the aesthetics.
Rest looks great.
Thanks a lot for the amazing work.

Was there ever a resolution to this particular request? I too would like to remove the underline for a cleaner look.

[sh638073]

Is there a way to include dropdown part of the table column and populate the values for the drop down dynamically using an api response.? I see we can hardcode the dropdown values but i am not sure how to populated it dynamically. Please do help me on the same.