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

Grid Reactivity

LyteNyte Grid is a declarative grid. The state you apply determines what the grid displays. The design follows the philosophy that "view is a function of state."

Props as State

LyteNyte Grid accepts state via props passed to the Grid component. The grid view always reflects the props you provide. The code below shows a basic example of passing columns to the grid.

You should already be familiar with React, and passing props to components in this manner should be instinctive.

const columns: Column[] = [
  { id: "Company", widthFlex: 2 },
  { id: "Country", widthFlex: 2 },
  { id: "Founded", type: "number" },
  { id: "Employee Cnt", name: "Employees", type: "number", cellRenderer: NumberCell },
  { id: "Price", type: "number", cellRenderer: PriceCell },
];


function MyGrid() {
  return <Grid columns={columns} />;
}

If you use TypeScript, TypeScript will type check all props passed to the grid. Since some props use generic type parameters, you may need to provide a concrete type for the grid.

The example below shows one case. See our TypeScript guide for more details.

interface GridSpec {
  readonly data: number[];
}


const columns: Column<GridSpec>[] = [
  { id: "Company", widthFlex: 2 },
  { id: "Country", widthFlex: 2 },
  { id: "Founded", type: "number" },
  { id: "Employee Cnt", name: "Employees", type: "number", cellRenderer: NumberCell },
  { id: "Price", type: "number", cellRenderer: PriceCell },
];


function MyGrid() {
  // The type param is optional since TypeScript will infer
  // it to be GridSpec from the provided columns
  return <Grid<GridSpec> columns={columns} />;
}

Changing Prop Values

Since LyteNyte Grid accepts props for its state, updating the state of the grid is done by updating the prop values passed to the grid. For example, to configure the row height of the grid, pass different rowHeight values to the grid. You can store the rowHeight value in React state using the useState hook.

Change Row Height

Fork code on stack blitzFork code on code sandbox

Controlled State

Some operations in LyteNyte Grid can trigger a state update. LyteNyte Grid can manage these properties as either controlled or uncontrolled. These properties include:

  • rowDetailExpansions
  • columnGroupExpansions
  • rowGroupColumn

When one of these properties updates, the grid calls the corresponding change handler (if you provide one). For example, you can make row detail expansions controlled by providing both rowDetailExpansions and onRowDetailExpansionsChange props to the grid.

As demonstrated in the demo below:

Controlled Row Detail Expansions

Fork code on stack blitzFork code on code sandbox

Note

Most state properties become controlled when you provide a value for that property (providing a change handler is optional).

For example, providing rowDetailExpansions is enough to prevent the grid from changing row detail expansions internally. This behavior is similar to setting the value prop on an input element without a corresponding onChange handler: the value will never change based on user input.

<Grid
  rowDetailExpansions={rowDetailExpansions}
/>

One exception is the columns property, which is always controlled. If you want the grid to update columns, you must provide an onColumnsChange handler.

Memoizing State

Many properties you pass to LyteNyte Grid are objects, functions, or arrays. These properties should have stable references to prevent unnecessary re-renders. The easiest way to ensure stable references is to define the value outside the component. If you cannot do that, use React’s useMemo and useCallback hooks:

function MyGrid() {
  const columns = useMemo(() => {
    return [
      { id: "Company", widthFlex: 2 },
      { id: "Country", widthFlex: 2 },
      { id: "Founded", type: "number" },
      { id: "Employee Cnt", name: "Employees", type: "number", cellRenderer: NumberCell },
      { id: "Price", type: "number", cellRenderer: PriceCell },
    ];
  });


  return <Grid columns={columns} />;
}

Avoid creating and passing objects in the render path of a component. A common performance problem is defining the columnBase prop as a plain object:

// Don't do this, it results in unnecessary re-renders.
<Grid columnBase={{ width: 100 }} />

This practice is not specific to LyteNyte Grid. It is a core part of how React works. Read the useMemo guide in the React documentation for further guidance.

Tip

React’s new compiler can automatically memoize values, removing the mental overhead of remembering to memoize manually. See our React Compiler guide to learn how to use LyteNyte Grid with the new compiler.

Next Steps