How to extend the core row model?

[SpringsTea]

I wanted to add some extra functionality to the row model, to be able to store some metadata and functions to interact with that data.
I had thought I got it right, but i've created some incorrect behavior doing this.

Here is my custom row model:

import {
  getCoreRowModel,
} from '@tanstack/react-table';

const customRowModelFunction = (table) => {
  let model = getCoreRowModel()

  let newmodel = model(table)();

  // Iterate over rows and add custom functions or metadata
  for (const row of newmodel.rows) {

    row.meta = {
      saved: false
    };

    //set the saved state for 2 seconds
    row.rowSaved = () => {
      row.meta.saved = true
      setTimeout(() => {
        row.meta.saved = false
      }, 2000)
    }
    row.getIsSaved = () => row.meta.saved
  }

  return () => newmodel;
};

export default customRowModelFunction;

I've simply added some functionality so that I can style a row when it's data has been saved.
I then add it to my table like this:

import customRowModel from 'Utils/react-table/customRowModel';
const table = useReactTable({
    ...
    getCoreRowModel: customRowModel
})

This appeared to work for a time, but I realized after some hair pulling that my custom model was causing my rows to not update.
Specifially the values returned by table.getRowModel() that I use to itterate through and create my rows. Even though the table data was being updated, the rows from this function never changed from their original state.

Can someone point my in the direction I need to correctly extend the row model? There's not really any documentation on this.

[ocdejong]

Have you found a solution to this problem? I'm facing the same issue..

// Simply copied the ExpandedRowModel from Github. Modified only the "expandRows" functions
export function getExpandedWithTotalsRowModel<TData extends RowData>(): (table: Table<TData>) => () => RowModel<TData> {
  return table =>
    memo(
      () => [table.getState().expanded, table.getPreExpandedRowModel(), table.options.paginateExpandedRows],
      (expanded, rowModel, paginateExpandedRows) => {
        if (!rowModel.rows.length || (expanded !== true && !Object.keys(expanded ?? {}).length)) {
          return rowModel
        }

        if (!paginateExpandedRows) {
          // Only expand rows at this point if they are being paginated
          return rowModel
        }

        return expandRows(rowModel)
      },
      getMemoOptions(table.options, 'debugTable', 'getExpandedRowModel'),
    )
}

// Modified to add a Total Row when the original row has children and is expanded
export function expandRows<TData extends RowData>(rowModel: RowModel<TData>) {
  const expandedWithTotalsRows: Row<TData>[] = []
  const flatRowsWithTotals: Row<TData>[] = []
  const rowsByIdWithTotals: Record<string, Row<TData>> = {}

  const handleRow = (row: Row<TData>) => {
    const oldRow = { ...row, _isTotal: false }
    expandedWithTotalsRows.push(oldRow)
    flatRowsWithTotals.push(oldRow)
    rowsByIdWithTotals[row.id] = oldRow

    if (row.subRows?.length && row.getIsExpanded()) {
      row.subRows.forEach(handleRow)

      // While the console.log below shows this works as expected, using it in the getIsTotal() function above, or in the columnDefs won't work. The total rows will be visible, but will have their original id and no _isTotal attribute.
      const totalsRow: Row<TData> = { ...row, id: `${row.id}-total`, _isTotal: true }

      expandedWithTotalsRows.push(totalsRow)
      flatRowsWithTotals.push(totalsRow)
      rowsByIdWithTotals[totalsRow.id] = totalsRow
    }
  }

  rowModel.rows.forEach(handleRow)

  console.log({ expandedWithTotalsRows, flatRowsWithTotals, rowsByIdWithTotals })

  return {
    rows: expandedWithTotalsRows,
    flatRows: flatRowsWithTotals,
    rowsById: rowsByIdWithTotals,
  }
}

[SpringsTea]

Nope never did

[ocdejong]

I'm sorry to hear that! I did find a solution to my issue, that i'll post here:

My mistake was to manually create and insert a new row:

const totalsRow: Row<TData> = { ...row, id: `${row.id}-total`, _isTotal: true }
expandedWithTotalsRows.push(totalsRow)

The issue here is that the row itself might get updated, but other row properties, including the rows cells will keep their reference to the original row. My id-total was not found, because I fetched the id like so: totalsRow.getVisibleCells()[0].row.id, thus, getting the id of the original, non-updated row.

To fix this, I used the libraries function "createRow":

const { id, original, subRows, depth, parentId } = row
const totalsRow = createRow(table, `${id}-total`, original, subRows.length, depth, [], parentId)
expandedWithTotalsRows.push(totalsRow)