Apply transform (deserialization) to row, before cell renderer

[florianbepunkt]

I load a large JSON file with approx 1000 rows. I want to deserialize the rows. Since the number of rows is high, I would like to deserialize only the currently visible rows in my paginated table.

So far the only way I have found is to do in every cell renderer, which feels inefficient and repetitive, as I would like to apply my deserialization / transform to the entire row. I though maybe a custom row model might be a good fit, but I haven't found any examples.

What would be a good way to achieve my goal?

[amasen02]

Two approaches solve this cleanly without duplicating work in every cell renderer or deserializing all 1,000 rows upfront:

---

Approach 1: Custom Row Model Wrapping getPaginationRowModel (Recommended)

In TanStack Table, row models are factory functions with the signature (table: Table<TData>) => () => RowModel<TData>.

You can wrap getPaginationRowModel() so that deserialization only executes on the rows present on the active page, using a WeakMap to cache parsed results across re-renders:

import { Table, RowModel, getPaginationRowModel } from '@tanstack/react-table';

export function createLazyPaginationRowModel<TRaw extends object, TParsed>(
  deserialize: (raw: TRaw) => TParsed
) {
  const cache = new WeakMap<TRaw, TParsed>();

  return (table: Table<TRaw>) => {
    const paginatedModel = getPaginationRowModel<TRaw>()(table);

    return (): RowModel<TRaw> => {
      const base = paginatedModel();

      return {
        ...base,
        rows: base.rows.map((row) => {
          let parsed = cache.get(row.original);
          if (!parsed) {
            parsed = deserialize(row.original);
            cache.set(row.original, parsed);
          }

          return {
            ...row,
            original: parsed as any,
          };
        }),
      };
    };
  };
}

Usage in useReactTable:

const table = useReactTable({
  data: rawRows,
  columns,
  // Use the custom model instead of standard getPaginationRowModel()
  getPaginationRowModel: createLazyPaginationRowModel(deserializeRow),
  // ... other models
});

Because base.rows only holds the 10, 25, or 50 rows for the current page, only visible items are deserialized, and navigating pages automatically deserializes the new subset on demand.

---

Approach 2: Lazy Proxy on Data Objects

If you prefer keeping TanStack Table's standard row models untouched, wrap the raw items in a lightweight Proxy before passing them to the table. Deserialization will only trigger when a cell actually reads a property on that row:

import { useMemo } from 'react';

function useLazyDeserializedData<TRaw extends object, TParsed extends object>(
  rawData: TRaw[],
  deserialize: (raw: TRaw) => TParsed
): TParsed[] {
  return useMemo(() => {
    return rawData.map((rawItem) => {
      let cached: TParsed | null = null;

      return new Proxy(rawItem as any, {
        get(target, prop, receiver) {
          if (!cached) {
            cached = deserialize(target);
          }
          return Reflect.get(cached, prop, receiver);
        },
      });
    });
  }, [rawData, deserialize]);
}

Usage:

const data = useLazyDeserializedData(rawJson, parseHeavyRecord);

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
});

With either approach:

1. The 1,000 raw items load instantly without an initial freeze.
2. Only rows on the current page undergo deserialization.
3. Once deserialized, cells access the parsed properties with zero redundant computation.