LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Cell Editing

Bulk Cell Editing

Use the LyteNyte Grid API to perform bulk cell updates. Provide updated data for targeted rows, and the grid will update the corresponding cells as if they were edited directly.

Note

Bulk updates require familiarity with cell editing. See the Cell Editing guide for more details.

Edit Update Method

You can edit cells in bulk using the editUpdateRows method on the grid’s API. The editUpdateRows method requires a map of rows to update. The update map can use two key types:

  • number: Represents the row index of the row that should be updated.
  • string: Represents the row ID of the row that should be updated.

When you provide a number key, LyteNyte Grid resolves the row index to its row ID. Avoid setting both the row index and row ID for the same row in the map.

The demo below uses the editUpdateRows method to update the Price column in bulk.

Bulk Cell Editing

Fork code on stack blitzFork code on code sandbox

The code for increasing the price is shown below. Notice that the code creates a new update map, then calls editUpdateRows to update the rows through LyteNyte Grid’s edit functionality.

<button
  onClick={() => {
    const update = new Map(
      data.map((x, i) => {
        return [i, { ...x, price: x.price + 10 }];
      }),
    );


    apiRef.current?.editUpdate(update);
  }}
>
  Increase Price (+10)
  <ArrowUpIcon />
</button>

Bulk Update vs. Direct Row Update

At first glance, the editUpdateRows method appears to do the same thing as updating the rows in the grid directly. However, there is a distinction. When you update rows through editUpdateRows, LyteNyte Grid runs the same validations as if the user edited the cell directly.

All rows must pass validation for LyteNyte Grid to apply the bulk update. The editUpdateRows method returns the row validation result, which you can use to provide feedback if the update fails.

Bulk Editing Cells

You can use the editUpdateCells method to bulk update a set of cells in the grid, rather than updating entire rows. The editUpdateCells method is a convenience wrapper that uses editUpdateRows internally. LyteNyte Grid converts the provided cell updates into row updates and then calls editUpdateRows.

The demo below demonstrates editUpdateCells by implementing standard clipboard functionality, including copy, cut, and paste. See the Clipboard guide for more details.

Click and drag to select a range of cells. Press Ctrl C to copy, Ctrl X to cut, and Ctrl V to paste. The demo does not validate pasted values. For validation, see the Cell Editing Validation guide.

Clipboard Bulk Editing

Fork code on stack blitzFork code on code sandbox

Note

The clipboard demo uses cell range selection, which is a Tag indicating the feature is only available for LyteNyte PRO feature. However, the editUpdateCells method is available in the Core edition of LyteNyte Grid.

Next Steps