Column Manager Component

The Graphite Grid package provides a Column Manager component for managing the grid's columns. This add-on component works alongside the grid but is not part of the core grid functionality.

The ColumnManager component can be used to:

• Reorder columns (if the column is moveable).
• Pin or unpin columns (if the column is pinnable).
• Show or hide columns (if the column is hidable).
• Change the aggregation of columns (if the column is aggregatable).

The example below shows the ColumnManager in action.

import { ColumnManager } from "@1771technologies/graphite-grid-react";
 
export function ColumnManagerA() {
  const grid = useGraphiteGrid({
    // grid properties
  });
 
  return (
    <div>
      <ColumnManager state={grid} />
      {/* /... */}
    </div>
  );
}CopyCopied!

Notice that the ColumnManager component is a standard React component that provides the Graphite Grid state object returned by useGraphiteGrid. The ColumnManager can be rendered anywhere within your application (e.g., hidden in a popover or a side panel next to the grid).

Customizing the ColumnManager

The main functionality of the column manager cannot be changed, but the visual style of the ColumnManager component can be adjusted to match the overall theme of your application. For details on the properties the ColumnManager accepts, please view the ColumnManagerProps API Reference.