Column Visibility

The Column Definition's hidden and hidable properties control a column's visibility. Both properties can be either a boolean value or a function that returns a boolean value.

hidden and hidable

In the interactive example below, the founded column is initially hidden, while the others are displayed. By clicking each button, you can toggle the visibility of the corresponding column.

You may have noticed that the employee-count column can still change its visibility even though hidable: false is set. The hidable property is a meta property and does not directly impact the visibility logic of the Grid. It is intended for use by external components to communicate what functionality a column should support.

export function HeaderVisibility() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "company-name", headerLabel: "Company Name", field: 0 },
        { id: "founded", headerLabel: "Founded", field: 1, hidden: true },
        {
          id: "employee-count",
          headerLabel: "No. Employee",
          field: 2,
          hidable: false,
        },
      ],
      // other grid properties
    },
  });
 
  const toggleColumn = grid.api.toggleColumn;
 
  return (
    <div>
      <div>
        <Button onClick={() => toggleColumn("company-name")}>Toggle Company Name</Button>
        <Button onClick={() => toggleColumn("founded")}>Toggle Founded</Button>
        <Button onClick={() => toggleColumn("employee-count")}>Toggle No. Employee</Button>
      </div>
      <div style={{ height: 200 }}>
        <GraphiteGridDom state={grid} />
      </div>
    </div>
  );
}CopyCopied!