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

Client Row Adding

Learn how to add rows to an existing dataset using LyteNyte Grid's client data source. Insert rows at any position.

The useClientDataSource hook returns a row source that can add new rows by calling the rowAdd method. When you provide the source to the grid, the rowAdd method becomes part of the grid’s API.

You can use the rowAdd method to create new rows and add them to your existing data. You can add rows to the top, bottom, or between other rows. Provide the useClientDataSource hook with a callback for the onRowsAdded parameter to handle row additions.

Info

This guide explains how to add new rows to the client data source. If you’re adding rows as part of editing, see the Cell Editing guide.

Adding Rows

In the demo below, click Add Top Row to insert a new row at the top of the grid, or Add Bottom Row to add a new row at the bottom.

Adding Client Rows

Fork code on stack blitzFork code on code sandbox

Handling new row additions is straightforward. Store the existing row data in React state, then update the state via the onRowsAdded callback, as shown below.

const ds = useClientDataSource<GridSpec>({
  data: data,
  onRowsAdded: (params) => {
    setData((prev) => {
      if (params.placement === "start") return [...params.newData, ...prev];
      if (params.placement === "end") return [...prev, ...params.newData];


      const index = Math.min(Math.max(0, params.placement), prev.length);


      // Handle arbitrary indices
      const next = [...prev];
      next.splice(index, 0, ...params.newData);


      return next;
    });
  },
});

Tip

The useClientDataSource hook returns a row source that extends the RowSource interface with additional properties. When you use TypeScript, you can type the additional properties using the RowSourceClient type.

The RowSourceClient type is a generic type that expects the GridSpec type, which creates a circular type definition. TypeScript can handle this pattern, but the feature to solve this is not well known. Use the this keyword in the type, as shown below:

export interface GridSpec {
  readonly data: OrderData;
  readonly source: RowSourceClient<this>;
}

Next Steps