Row Data Sources

To display row data in Graphite Grid, you must provide a row data source. A row data source determines the available row data, row count, and many other row capabilities, such as pivot expansions and selecting all rows.

Set the row data source by providing a value to the rowDataSource property of the grid. Graphite Grid supports two types of row data sources:

• RowDataSourceClient: Used when all the data is available on the client.
• RowDataSourceControlled: Allows for fine-grained control of row data, which is useful for lazily loading data on the server or client.

The row data source is responsible for providing Graphite Grid with a row count. Graphite Grid uses the provided row count to determine the number of rows to display and calculate the content height.

To learn more about each row data source, view:

• Client Data Source
• Controlled Data Source
• Server Data Source (Learn how to use a controlled data source to manage data loaded from the server)

Setting the Row Data Source

Set the row data source via the rowDataSource property on the grid state.

export function ClientSideDataSource() {
  const grid = useGraphiteGrid({
    initial: {
      rowDataSource: {
        kind: "client",
        data,
      },
      // other properties
    },
  });
 
  // ...
}CopyCopied!

After the initial setup, you can update the row data source using the setRowDataSource API method.

grid.api.setRowDataSource({
  kind: "client",
  data: newData,
});CopyCopied!