row data lost class function

[vmia159]

If we pass in a class array as data, the function cannot be used in columns render.

Let say if we have a class like this. We cannot use testFunction in render

class Test {
   constructor(){
    this.field = 'field'
  }

  testFunction() {
   console.log('testing')
  }
}

This is because the current implementation on data-manager.js setData use spread operator to add tableData to the rowData https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals

const newRow = {
        ...row,
        tableData
}

To fix this, use Object.assign instead

const cloned = Object.assign(Object.create(Object.getPrototypeOf(row)), row)
const newRow = Object.assign(cloned , {tableData})

I am not going to give a pr because @material-table/core are refactoring and removing data-manger.js To work around this without updating @material-table/core

class Test {
   constructor(){
    this.field = 'field'
    this.testFunction = this.testFunction; // add this property so it we get copied by spread operator
  }

  testFunction() {
   console.log('testing')
  }
}

[Domino987]

Can I ask a more general question first, why would you use classes for data storage?

[vmia159]

You can implement function in class for complex display logic. And in case server make changes to the property names, you can just correct the constructor instead of find out every places you have used the data.

[stale[bot]]

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.