How to size the columns so it fits the width of the header and/or content in AG-Grid?-CodePudding

I am looking through the

The headers say:

Something Long Start
Something Long Middle
Something Long End

But there are the ellipses there so you can't initially tell what it is unless you manually drag to resize the column (if that feature is enabled).

How can I do the following:

Make the column (and thus the column header) fit the column header content?
Alternatively, how can I make the column fit the column header content width, OR the row block content width, whichever is greater? (So if the values are large, it fits those values without ellipses too, but if the header is larger, then the column will be the size of the header).

I am using the React AGGrid.

CodePudding user response：

There's an example in the official docs

https://www.ag-grid.com/react-data-grid/column-sizing/#example-column-resizing

Basically it offers 3 options: size to fit, auto size (skipping headers) and auto size (regarding headers)

const onColumnResized = useCallback((params) => {
  console.log(params);
}, []);

const sizeToFit = useCallback(() => {
  gridRef.current.api.sizeColumnsToFit();
}, []);

const autoSizeAll = useCallback((skipHeader) => {
  const allColumnIds = [];
  gridRef.current.columnApi.getColumns().forEach((column) => {
    allColumnIds.push(column.getId());
  });
  gridRef.current.columnApi.autoSizeColumns(allColumnIds, skipHeader);
}, []);

Note: If you intend to call columnApi.autoSizeColumns() after creating the grid, in most cases it should be sufficient to wait for the firstDataRendered event before resizing.