Learning › ui › components › Property Grid
Edit this page

PropertyGrid

The PropertyGrid category in the @itwin/components-react package includes classes and components for working with a PropertyGrid control.

Components

The following React components comprise the PropertyGrid control.

There are a number of IPropertyValueRenderer components for different types that can be found in the Properties category. Those components are managed by the PropertyValueRendererManager.

Data Provider

The properties data provider is defined by the IPropertyDataProvider interface. The getData method provides data to the VirtualizedPropertyGridWithDataProvider component via the PropertyData interface. The onDataChanged event should be emitted when property data changes.

In the PropertyData interface, the categories member provides an array of PropertyCategory and the records member provides a map of PropertyRecord associated with each category.

The SimplePropertyDataProvider class is an implementation of IPropertyDataProvider that uses an associative array. Developers may develop their own implementation of the interface.

Sample with SimplePropertyDataProvider

The following sample uses SimplePropertyDataProvider to feed the data into VirtualizedPropertyGridWithDataProvider component.

function MyPropertiesComponent() {
  // the component gets completely re-rendered, losing all its internal state, when data provider changes,
  // so we have to make it doesn't change unnecessarily
  const [dataProvider] = React.useState<IPropertyDataProvider>(() => {
    const provider = new SimplePropertyDataProvider();
    provider.addCategory({
      name: "my-category",
      label: "My Category",
      expand: true,
    });
    provider.addProperty(
      PropertyRecord.fromString("123", "My Property"),
      0
    );
    return provider;
  });

  // width and height should generally we computed using ResizeObserver API or one of its derivatives
  const [width] = React.useState(400);
  const [height] = React.useState(600);

  return (
    <VirtualizedPropertyGridWithDataProvider
      dataProvider={dataProvider}
      width={width}
      height={height}
    />
  );
}

API Reference

Last Updated: 18 August, 2023