vue js large array to table performance advice

Question

I am building an internal app that displays data in an HTML table. The API returns me an array of up to 20K objects which are stored in data() and the table is populated by each cell calling a method to find the correct object. The object is located via a 3-part key (2 for the row and 1 for the column). Initial rendering performance on my laptop (i7 7thGen and 8GB ram) is acceptable [about 1 minute] for initial render (excel app it is replacing takes almost 3), however an update to a single cell (object in the array) triggers the change detection and an update takes another minute. Sometimes the user will want to update a single cell, sometimes a row and sometimes propagate a change on all rows(or some selected rows) for a single column. Is there a recommended strategy for performance enhancement. I was thinking of restructuring the data that comes back into an object per row (2-part key) with a collection of objects for the column (1-part key). This would mean that the method call will only have to iterate over 2500 'row' objects and then over 8 'column' objects which feels logically like it should be faster but will now consume more memory. I need to be able to identify which objects have changed at a table cell level as I need to write the changes back to the database. Should I discard the original API results and re-hydrate on save or would an option be to use Object.freeze to prevent reactivity on the original array and write changes to a separate array which then takes precedence if a record exists.

[
  {
     key1:value,
     key2:value,
     key3:valueA,
     displayValue:value
  },
  {
     key1:value,
     key2:value,
     key3:valueB,
     displayValue:value2
  },
  {
     key1:value,
     key2:value,
     key3:valueC,
     displayValue:value3
  }...
  {
     key1:value2,
     key2:value2,
     key3:valueA,
     displayValue:value
  },
  {
     key1:value2,
     key2:value2,
     key3:valueB,
     displayValue:value2
  },
  {
     key1:value2,
     key2:value2,
     key3:valueC,
     displayValue:value3
  }...
]

becomes

[
 {
   key1:value,
   key2:value,
   key3collection:[
     {key3:valueA, displayvalue:value},
     {key3:valueB, displayvalue:value2},
     {key3:valueC, displayvalue:value3}
   ]
 },
 {
   key1:value2,
   key2:value2,
   key3collection:[
     {key3:valueA, displayvalue:value},
     {key3:valueB, displayvalue:value2},
     {key3:valueC, displayvalue:value3}
   ]
 },
]

Answer 1

What I would do is to convert API response (directly on server if you control API or on the client) to something like this:

{
  columns: ['ValueA', 'ValueB', 'ValueC']  // same for every row, right ?
  rows: [
    {
      key1:value,
      key2:value,
      values:[ 'value', 'value2', 'value3' ]
    }, {
      key1:value2,
      key2:value2,
      values:[ 'value', 'value2', 'value3' ]
    }, ....
]

I'm working with an assumption that every row has same set of columns so why to keep duplicity in the data.

That way you can render the table by following template (pseudo code) without any additional data lookups:

<table>
  <thead>
    <tr>
      <th v-for="column in data.columns">{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, rowIndex) in data.rows">
      <td v-for="(rowItem, columnIndex) in row.values">{{ rowItem }}</td>
    </tr>
  </tbody>
</table>

For change tracking (so you can later send it back to API) just add simple array alongside values like isDirty: [ fasle, false, false ] and change it to true every time you update some cell. When posting just iterate over data structure and recreate updated objects in the format your API expects it....