Skip to content

Bug: onDataUpdate truncates data when search/filters are active #265

@agwax

Description

@agwax

Description

In the useDataGrid hook, the onDataUpdate function sizes newData from rows.length (via table.getRowModel().rows), but when search or column filters are active, that row count is smaller than currentData.length. This causes data beyond the filtered slice to be silently dropped when onDataChange is called.

Steps to Reproduce

  1. Create a data grid with 50+ rows
  2. Enable search (enableSearch: true)
  3. Search for a term that filters down to ~5 rows
  4. Edit a cell in one of the filtered rows
  5. Observe that onDataChange receives an array of only 5 items instead of 50

Root Cause

In use-data-grid.ts, the onDataUpdate callback:

const tableRowCount = rows?.length ?? currentData.length;
const newData: TData[] = new Array(tableRowCount);

rows comes from table.getRowModel().rows which returns filtered/sorted rows. When filters are active, rows.length < currentData.length, so the new array is undersized. The loop then only iterates up to the filtered count, dropping all rows beyond that index.

Meanwhile, the rowUpdatesMap correctly maps updates to original data indices (via currentData.indexOf(originalData)), but those indices may exceed the truncated array size and are never visited.

Suggested Fix

Replace:

const tableRowCount = rows?.length ?? currentData.length;

With:

const tableRowCount = currentData.length;

This ensures the full dataset is always preserved, and updates are applied at their correct original indices regardless of active filters.

Environment

  • @diceui/data-grid installed via npx shadcn@3.8.4 add "@diceui/data-grid"
  • Next.js 16, React 19

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions