Column Auto-sizing

Graphite Grid provides advanced auto-sizing functionality to ensure that columns only take as much space as necessary.

The api.autosizeColumns method can be used to request that the grid auto-size columns. api.autosizeColumns can be passed some options, such as includeHeader, which will make the Grid consider the column header in auto-size calculations.

const columns = [
  { id: "Ticker Symbol", field: 0 },
  { id: "Open Price", field: 1 },
  { id: "Close Price", field: 2 },
  { id: "Volume", field: 3 },
  { id: "Market Cap", field: 4 },
  { id: "PE Ratio", field: 5 },
  { id: "Dividend Yield", field: 6 },
  { id: "52 Week High", field: 7 },
];
 
export function ColumnAutosizing() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: columns,
      // other grid properties
    },
  });
 
  return (
    <div>
      <div>
        <Button onClick={() => grid.api.autosizeColumns()}>Auto-size</Button>
        <Button onClick={() => grid.api.autosizeColumns({ includeHeader: true })}>
          Auto-size Include Headers
        </Button>
        <Button onClick={() => grid.api.setColumnDefinitionsExn(columns)}>Reset</Button>
      </div>
      <div style={{ height: 300 }}>
        <GraphiteGridDom state={grid} />
      </div>
    </div>
  );
}CopyCopied!

Auto-sizing is performed for all columns unless otherwise specified in the autosizeColumns options. When auto-sizing columns, the grid will use the values of all the currently displayed rows in the viewport. If auto-size is called before the viewport is set, the Grid will consider the first 30 rows for auto-size calculations. Columns that are not visible are STILL auto-sized; hence, if you have many column definitions, the auto-size calculation can become expensive.

The Grid uses the grid theme properties when auto-sizing cells and headers. See Grid Theming to learn more about the theming options.

Custom Auto-size Calculators

The default Graphite Grid auto-sizing calculation works well for textual data that does not wrap. The calculation used by the grid for each column may be overridden using the autosizeCalc and autosizeHeaderCalc properties on the column definition.

The function passed to these properties must return a number, the width the column should take in px. It is important that the function passed is efficient and not costly to calculate, as the auto-size functionality is run on every visible cell in the Grid.

The example below illustrates the usage of custom auto-size functions, though it is a little contrived.

export function CustomAutosizeCalculations() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "Ticker Symbol",
          field: 0,
          autosizeCalc: ({ row }) => {
            return row.data.length * 12;
          },
          autosizeHeaderCalc: ({ column }) => {
            return column.id.length * 16;
          },
        },
        { id: "Open Price", field: 1 },
      ],
      // other grid properties
    },
  });
 
  // Additional logic or return if needed
}CopyCopied!