Column Definitions

Column definitions are the primary drivers of the rendering output in Graphite Grid. They offer a declarative way to specify the content and configuration of columns within the Grid.

Each column definition must include a unique id property, which is essential for the Grid to identify and display columns internally.

Base Column Definition

The baseColumnDefinition is a foundational definition from which all columns derive their base properties. It illustrates the primary usage of column definitions in Graphite Grid.

export function BasicExample() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "company-name", field: 0 },
        { id: "founded", field: 1 },
        { id: "employee-count", field: 2 },
      ],
      baseColumnDefinition: {
        freeWidthRatio: 1,
      },
      // other props
    },
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={grid} />;
    </div>
  );
}CopyCopied!

Managing Column Definitions

Graphite Grid checks for several conditions when setting up column definitions:

• Each column must have a unique id value. The grid will throw an error if duplicate ids are found.
• The id for each column must be a non-empty string.
• The column definition's id should not start with the pivotId prefix to avoid conflicts with pivoting features (see Column Pivoting).
• Columns with pinned: "start" are automatically moved to the beginning of the column list.
• Columns with pinned: "end" are moved to the end of the column list.

To update column definitions after the initial setup, use the setColumnDefinitionsExn method from the grid's API. The Exn suffix indicates that this method might throw exceptions, highlighting its use in error-prone situations. Use setColumnDefinitionsExn when you need to replace all existing column definitions completely or make significant changes like adding or removing multiple columns.

To update individual column definitions without replacing the entire set, use updateColumnDefinitionExn. This method allows you to modify the properties of a specific column based on its id, ensuring precise and targeted changes.

To retrieve the current set of column definitions from the Grid state, use the getColumnDefinitions method. This function provides a snapshot of all column definitions currently active in the Grid, enabling you to inspect or iterate over them as needed.