Row Pivoting

Row Pivoting (row grouping) can aggregate row data and reduce the noise inherent in sparse data sets.

The rowPivotModel property on the grid state determines how rows should be pivoted. The row pivot model is a string array, where each item is the id of a column that has a rowPivotKey defined. Hence, row pivoting in Graphite Grid is a two-step process:

1. Define a column with a rowPivotKey property.
2. Add the id of that column to the rowPivotModel property.

An example is shown below:

const financeColums = [
  { id: "exchange", rowPivotKey: "exchange" },
  { id: "symbol", rowPivotKey: "symbol" },
  { id: "currency", rowPivotKey: "currency" },
  { id: "sector", rowPivotKey: "sector" },
  { id: "industry" },
  { id: "price", aggregation: "sum", measure: "sum" },
  { id: "volume", aggregation: "avg", measure: "sum" },
];
 
export function RowPivotingExample() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: financeColumns,
      rowPivotModel: ["exchange", "sector"],
      rowBranchExpansions: new Set(["NASDAQ"]),
      // other properties
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

In this example, the row pivot model is set to ["exchange", "sector"]. Graphite Grid displays the pivot column, which represents the grouping. Despite being used as pivots, the exchange and sector columns can still be displayed (as in this example). Using a column for a row pivot does not prevent it from being used in other models (such as a sort or column pivot model).

rowPivotKey on Columns

The rowPivotKey property on the column definition determines the pivot value of cells for a given column. This is the value that rows are grouped on for a particular column. Like the field property, it can be a number representing an index of an array, a string representing a property on an object, or a custom function returning the pivot value. The result of rowPivotKey for a cell will always be converted into a string.

Row Pivot Group Column Definition

When using row pivots, Graphite Grid adds a group column. The grid manages the group column but allows some level of configuration. The rowPivotGroupDefinition can be used to override some of the definition properties. In particular, providing a custom theme or renderer for the group column is possible. For example:

export function RowPivotingExampleCustomDefinition() {
  const grid = useGraphiteGrid({
    initial: {
      rowPivotGroupDefinition: {
        cellTheme: { horizontalPadding: 0 },
        cellRenderer: ({ row, api }) => {
          const text = row.kind === "branch" ? row.pivotKey : "";
 
          let depth = 0;
          let current = row.parent;
          while (current) {
            depth++;
            current = current.parent;
          }
 
          return (
            <button
              onClick={() => api.toggleRowBranchExpansion(row.id)}
              className="w-full h-full flex items-center hover:bg-green-200 dark:hover:bg-green-800 transition-colors"
              style={{ paddingInlineStart: depth * 24 + 12 }}
            >
              {text}
            </button>
          );
        },
      },
      // other props
    },
  });
  // ...
}CopyCopied!

In the example above, the cell of the group cell is replaced with a button that, when clicked, toggles the branch expansion of the row pivot. Using the rowPivotGroupDefinition property, other column behaviors, such as group sorting, may also be changed.

Autosizing on Group Expansion and Collapse

When row pivots are used, the autosizeOnGroupExpansion property can be provided to auto-size columns as row pivots are expanded or collapsed. This allows columns in the grid to resize as the view changes. In the example below, try expanding and collapsing the pivots. Notice how columns will resize to the space required for their content.

export function RowPivotingExampleResize() {
  const grid = useGraphiteGrid({
    initial: {
      autosizeOnGroupExpansion: true,
      // other properties
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

const grid = useGraphiteGrid({
  initial: {
    autosizeOnGroupExpansion: {
      columnIds: ["price", "volume"],
      includeHeader: true,
    },
    // other properties
  },
});CopyCopied!