Inventory Allocation Table

1.Formulas are derived on read, never stored

A row only holds raw inputs — batches, open order quantity, demand, lead time, safety stock. Available, reorder point, days of cover, and the suggested PO are all recomputed by deriveMetrics() from those inputs on every render. That's what makes editing safe: change one batch allocation and every dependent number (the SKU's status, its reorder quantity, the footer total) is correct on the next render, because there's no cached value anywhere to forget to update.

const reorderPoint = row.dailyDemand * row.leadTimeDays + row.safetyStock
const position = available - unallocated
const shortfall = Math.max(0, reorderPoint - position)
const reorderQty = Math.ceil(shortfall / row.casePack) * row.casePack

2.Computed columns sort by the formula, not by what's on screen

Each formula column uses accessorFn to hand TanStack the derived number, so sorting by Reorder point or Suggested PO works with no custom sortingFn. Status sorts by a severity rank (Short → Reorder → Healthy) rather than alphabetically, so the default sort puts the SKUs that need attention first.

{
  id: 'status',
  accessorFn: (row) => statusRank[deriveMetrics(row).status],
  cell: ({ row }) => <Badge>{deriveMetrics(row.original).status}</Badge>,
}

3.Edits go through table meta, so columns stay static

The Editable Table builds its columns inside useMemo because each cell closes over component state. Here the write-back functions are passed as the table's meta instead, and cells reach them with table.options.meta. The columns array is a plain module-level constant — it never gets rebuilt on each keystroke or save, and it can be read top to bottom like any other example's columns.tsx.

cell: ({ row, table }) => (
  <EditableNumberCell
    value={row.original[field]}
    onCommit={(n) => getMeta(table).updateSku(row.original.sku, field, n)}
  />
)

4.Expansion survives edits because it's keyed by SKU

Unlike the Master-Detail Table's Set of ids, this uses TanStack's own expanded state with getRowCanExpand — batches are custom markup, not subRows. Two options make it survive editing: getRowId keys rows by SKU so an open panel follows its row when a re-sort moves it, and autoResetExpanded: false stops TanStack from collapsing every row whenever a save produces a new data array.

getRowId: (row) => row.sku,
getRowCanExpand: () => true,
autoResetExpanded: false,

5.Validation uses the whole row, not just the cell

A batch's allocation is limited by two things: what that batch has on hand, and what's left of the SKU's open order after the other batches' allocations. The validator closes over the parent row to check both. An invalid value keeps the input open with the message beneath it instead of silently reverting, so the picker can fix the number in place.

const allocatedElsewhere = allocated - batch.allocated

validate={(n) => {
  if (n > batch.onHand) return `Only ${batch.onHand} on hand`
  if (allocatedElsewhere + n > row.orderedQty) return `Max ${row.orderedQty - allocatedElsewhere}`
  return null
}}

6.FEFO auto-allocation is just another formula

First-expired, first-out picks from the batch that expires soonest and skips expired stock. allocateFefo() takes a row and returns new batches, so the Auto-allocate button is a single updateRow call — and because nothing derived is stored, the status, reorder quantity, and totals all follow automatically.

let remaining = row.orderedQty
for (const id of batchesByExpiry) {
  const take = Math.min(batch.onHand, remaining)
  allocations.set(id, take)
  remaining -= take
}