Controlled Data Source

The controlled data source provides fine-grained control over the rows displayed in Graphite Grid. Graphite Grid can be modeled using the controlled data source to match your row data exactly.

To use a controlled data source, set the rowDataSource property on the grid state to an object of the form:

const source = {
    kind: "controlled",
    getRowCount: () =>  10;
    getRowNode: (p) => {
        // return a row node
    }
    getRowById: (rowId) => {
        // return a row node or null
    }
}CopyCopied!

The above form is the minimum required setup to create a controlled data source. The full functionality of the controlled data is explained below. However, see the Server Data Source guide for specific functionality related to server-side data loading.

Row Nodes

The controlled data source provided to the grid creates the row nodes provided to Graphite Grid. A RowNode is a description of the row to display in the grid. There are two types of RowNodes:

• RowNodeLeaf: used for rows that do not have a parent; these are the row nodes used when rows are not pivoted.
• RowNodeBranch: used for rows that may have children rows. The children may be either a RowNodeLeaf or RowNodeBranch.

Row Node Leaf

The leaf node has the following type:

export interface RowNodeLeaf<T = unknown> {
  readonly kind: "leaf";
 
  readonly id: string;
  readonly rowIndex: number | null;
  readonly isLoading: boolean;
  readonly hasError: boolean;
  readonly context?: { [key: string]: unknown };
 
  readonly data: T;
  readonly parent: RowNodeBranch<T> | null;
  readonly rowPin: RowPinType;
  readonly editIndex: number | null;
}CopyCopied!

import { createRowNodeLeaf } from "@1771technologies/graphite-grid-react"
 
const node = createRowNodeLeaf({ id: "<row-id>", data: ... })CopyCopied!

Row Node Branch

The branch node has the following type:

export interface RowNodeBranch<T = unknown> {
  readonly kind: "branch";
 
  readonly id: string;
  readonly rowIndex: number | null;
  readonly isLoading: boolean;
  readonly hasError: boolean;
  readonly context?: { [key: string]: unknown };
 
  readonly pivotKey: string;
  readonly data: Record<string, unknown>;
  readonly parent: RowNodeBranch<T> | null;
}CopyCopied!

Basic Usage

An example of a controlled data source is shown below:

class ControlledSource implements RowDataSourceControlled<number[]> {
  kind = "controlled" as const;
 
  nodes: RowNodeLeaf<number[]>[];
  lookup: Record<string, RowNodeLeaf<number[]>>;
 
  constructor(data: number[][]) {
    const nodes = data.map((d, i) =>
      createRowNodeLeaf({
        id: `${i}`,
        data: d,
        editIndex: i,
        rowIndex: i,
      }),
    );
 
    this.lookup = Object.fromEntries(nodes.map((node) => [node.id, node]));
    this.nodes = nodes;
  }
 
  getRowCount = () => this.nodes.length;
  getRowById = (id: string) => this.lookup[id] ?? null;
  getRowNode = ({ rowIndex }: GetRowNodeParams<number[]>) => this.nodes[rowIndex];
}
 
export function ControlledDataSource() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "Alpha", field: 0 },
        { id: "Beta", field: 1 },
        { id: "Stock Price", field: 2 },
        { id: "Gamma", field: 3 },
      ],
      rowDataSource: new ControlledSource(data),
    },
  });
 
  return (
    <div style={{ height: 300 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

A class has been used in the example above, but a plain JavaScript object may also be used. The controlled data source above is limited and does not support all the grid functionality (such as pivots, sorting, or filtering). See the Server Data Source guide for a fully featured controlled data source.

Row Data Source Controlled Properties

The controlled data source has the following interface:

export interface RowDataSourceControlled<T = unknown> {
  readonly kind: "controlled";
 
  readonly init?: (api: GraphiteGridApi<T>) => void;
  readonly getRowCount: () => number;
  readonly getRowTopCount?: () => number;
  readonly getRowBottomCount?: () => number;
  readonly getRowNode: (params: GetRowNodeParams<T>) => RowNode<T>;
  readonly getRowById: (rowId: string) => RowNode<T> | null;
  readonly getAllRowIds?: () => Set<string>;
  readonly getAllChildrenIdsForRow?: (rowId: string) => string[];
  readonly getAllBranchIds?: (p: { api: GraphiteGridApi<T> }) => string[] | Promise<string[]>;
  readonly getAllBranchIdsAtDepth?: (
    params: GetAllBranchIdsAtDepth<T>,
  ) => string[] | Promise<string[]>;
  readonly refresh?: (params: { api: GraphiteGridApi }) => void;
}CopyCopied!

A full description of each of the controlled row data source properties is provided below: