4

I have a table with multiple rows and I want to be able to make them all editable at once. Using the editable tag I've been able to go into edit mode and make one row at a time editable, but if I tab from one row to the next it doesn't save changes. I need to stop and click on a button to save changes. I want to be able to make changes throughout the table before hitting a save button. Is there a way to do this with material-table?

class Editable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
        { 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 },
      ]
    }
  }

  render() {
    return (
      <MaterialTable
        title="Editable Preview"
        columns={this.state.columns}
        data={this.state.data}
        editable={{
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  const data = this.state.data;
                  const index = data.indexOf(oldData);
                  data[index] = newData;
                  this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            }),
        }}
      />
    )
  }
}
Lyric
  • 41
  • 1
  • 3
  • Please post your code. Also, I'm sure this would be possible, but it would probably entail updating all of your data on every change event if you want it to save automatically, which could cause slowdown on large datasets. Maybe there's a more efficient way though. – Chris B. Sep 30 '19 at 16:06
  • I've been playing around with the code in the examples on [https://material-table.com/#/docs/features/editable] to try and get it to work. If I can't figure it out I might just have an upload button for mass changes instead – Lyric Sep 30 '19 at 18:58
  • with all columns editable there should be update all at one click also when someone filter/search at that time that updated data should be stored so when cleared at that time we can see updated data that we have not stored in database. its hard but its give very good funcnality and very easy to use data that we need to change after every minute. – suresh pareek Oct 03 '19 at 07:29
  • Did you manage to get make-all-rows-editable? I'm running into the same issue at the moment – foreverAnIntern Jun 22 '20 at 15:57

1 Answers1

0

You always have an option to override EditRow component and for example add an ability to save the row when you tab out of it. I'm afraid there's no other way for incorporating such functionality at the moment.

jayarjo
  • 16,124
  • 24
  • 94
  • 138