Pivot Pills

The PivotPills component provides a draggable list of pills representing either the rowPivotModel or pivotColumnModel of the Grid. An example is shown below:

import { PivotPills } from "@1771technologies/graphite-grid-react";
 
export function PivotPillsDemo() {
  const grid = useGraphiteGrid({
    // props
  });
 
  return (
    <div>
      <PivotPills state={grid} pivotModelToChange="row" />
    </div>
  );
}CopyCopied!

The PivotPills component must be provided with the Graphite Grid state and a value for the pivotModelToChange, which may be a "row" or "column". The PivotPills component can then manage the grid's row or column pivots. Two separate PivotPills components may be used to manage both row and column pivots.

The PivotPills component does not allow adding to the rowPivotModel or columnPivotModel. Instead, a different custom component should be used. The custom component may call the api.setRowPivotModel or api.setPivotColumnModel to change the current models used. The PivotPills component will automatically update to reflect the latest state.

Customizing the PivotPills

The PivotPills component opens up a world of possibilities for customization. It provides a wide range of properties that can be used to customize the look and feel of the PivotPills. See the PivotPillsProps API Reference for a description of each property.