Usage

This page will walk you through the basic usage of the library and assumes you have already installed the required dependencies. If not, please refer to the installation guide first.

Basic Example

Below are the steps for creating a basic AG Grid component dynamically using JSOC Grid.

Add imports

First, we need to import some essential utilities as below:

useGridStore - Hook that creates a store for managing dynamic configurations.
useGridStoreSelector - Hook that lets you react to store state changes.
AG Grid component - UI component that renders the grid.


import { useGridStoreSelector } from "@jsoc/react-grid";
import { useGridStore } from "@jsoc/react-grid-ag";
import { AgGridReact } from "ag-grid-react";

Create the grid store

Next, initialize the grid store. The store manages all the data and configuration for your grid.

Call useGridStore with your data to create the store instance. Then, use useGridStoreSelector to reactively read the active schema (contains dynamic configurations):


const gridStore = useGridStore(data);
const activeSchema = useGridStoreSelector(gridStore, (gridStore) =>
  gridStore.getActiveSchema(),
);

Render the grid

Finally, pass the configuration and state from your store into the grid component to render it on the screen:


<AgGridReact key={activeSchema.id} {...activeSchema.config} />

Preview and Source Code

Here is a working preview of this basic example. Click on the </> Code button to see the code.

Next Steps

That was all for the basic example. To learn more about the available features, please refer to the following: