Column Sizing

Graphite Grid provides properties to manage column width: width, minWidth, maxWidth, and freeWidthRatio in the column definition. width sets the column width, minWidth and maxWidth sets the minimum and maximum widths. freeWidthRatio specifies the ratio of free space a column should take when available. Columns may be resized by setting the resizable property to true.

Info

minWidth and maxWidth take precedence over other sizing options. Setting minWidth greater than maxWidth is undefined.

Column Width

The basic width properties are width, minWidth, and maxWidth. Graphite Grid uses default values if they're omitted from the definition.

export function ColumnWidth() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "company-name",
          headerLabel: "Company Name",
          field: 0,
          width: 200,
          minWidth: 40,
          maxWidth: 400,
        },
        {
          id: "founded",
          headerLabel: "Founded",
          field: 1,
          width: 250,
          minWidth: 40,
          maxWidth: 400,
        },
        { id: "employee-count", field: 2, width: 200 },
      ],
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Filling the Viewport Space

If the columns' total width is less than the viewport width, freeWidthRatio distributes the remaining space among columns. It works similarly to flex: 1 in CSS.

export function ColumnWidthFreeWidthRatio() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "company-name",
          headerLabel: "Company Name",
          field: 0,
          width: 200,
          freeWidthRatio: 1, // Distribute free space
        },
        {
          id: "founded",
          headerLabel: "Founded",
          field: 1,
          freeWidthRatio: 1,
        },
        { id: "employee-count", field: 2, width: 200 },
      ],
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Column Resizing

By default, columns can't be resized. To enable resizing, set resizable: true in the column definition. Resizable columns can be resized by dragging the column resize bar on the right edge (visible on hover). Resizing respects minWidth and maxWidth.

The resizable property only impacts whether a column can be resized via the grid viewport.

export function ColumnResizing() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "company-name",
          headerLabel: "Company Name",
          field: 0,
          width: 200,
          minWidth: 100,
          maxWidth: 250,
          resizable: true, // Enable column resizing
        },
        {
          id: "founded",
          headerLabel: "Founded",
          field: 1,
          width: 150,
          minWidth: 100,
          resizable: true,
        },
        { id: "employee-count", field: 2, width: 200 },
      ],
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Best practice

Column resizing mixed with freeWidthRatio can lead to unintuitive results. Users generally try to set a specific width when a column is resized.freeWidthRatio adjusts the column's width to take any available free space, which may undo the resize effect.

When setting freeWidthRatio, it's better not to make a column resizable.