Cell Editing
LyteNyte Grid enables you to edit cell values directly in the grid. The editing system works on a per-cell basis and requires a row data source that supports updating rows. The Client Row Data Source included with LyteNyte Grid fully supports cell editing.
The Core edition of LyteNyte Grid includes cell editing support through its built-in row data
source.
Enabling Cell Editing
Enable cell editing on a per-column basis by setting the cellEditPredicate property. You can
enable editing for all rows or use a function to enable it selectively for specific rows.
Control how users initiate editing by setting the cellEditPointerActivator property in grid state
to either single or double click.
Edit Provider
Specify the React component to use for editing each cell by setting the cellEditProvider property
on columns. This property accepts either a React component or a string that references a registered
edit provider. Register edit providers using the cellEditProviders property in grid state.
LyteNyte Grid includes built-in cell editors for numbers, text, and dates. You can reference
these with their string values without registering them first. Override any built-in provider by
registering your own provider with the same key.
Cell Edit Params
Configure edit providers with additional options by setting the cellEditParams property. The grid
passes these parameters to the edit provider as props.
The Cell Edit Pipeline
TODO
Parsing and Unparsing Cell Values
Use the cellEditParser property on a column to convert edit values into storable cell values (for
example, converting a Date object to an ISO string).
Use the cellEditUnparser property to convert stored cell values into editable values (for example,
converting a unix timestamp into a Date object).
The cellEditParser and cellEditUnparser work together as complementary operations: unparsing
prepares values for editing, and parsing stores edited values.
The example below demonstrates common parsing methods for different column types.
To remember the difference between parsing and unparsing, think of "un" as in un-packaging. You unparse a cell's value to prepare it for editing, then parse the edited value for storage.
Cell Edit Row Updater
When applying cell edits, LyteNyte Grid creates a new data object for the row and passes it to the
row data source. By default, the grid knows how to handle simple updates where the column field is
a string or number. For more complex data structures, use the cellEditRowUpdater property to
define how to update your row data.
Cell Edit Limitations
Cell editing requires a compatible row data source. For example, the Server Row Data Source does not support row editing.
Additionally, row data must be cloneable using the structuredClone function, which excludes
certain data types like functions. For more information, see the
MDN Structure Clone
documentation.