Column Sizing: Basic Sizing

In this video, we talk about basic column sizing.

We start by adding fixed widths to our columnDefs (simply adding width to each column definition).

Next, we update onGridReady to use sizeColumnsToFit:

// src/App.js
  onGridReady = params => {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
        this.gridApi.sizeColumnsToFit();
  };

We can also use ag-Grid to auto-size all of the columns to make this more readable instead:

// src/App.js
  onGridReady = params => {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
    var columnIds = [];
    this.columnApi.getAllColumns().forEach(column => {
      columnIds.push(column.colId);
    });
    this.columnApi.autoSizeColumns(columnIds);
  };

It's important to note that ag-Grid will only auto-size the columns that are rendered on the screen.

To see these in action, run npm start and navigate to localhost:3000.

In the next video, we'll learn about flex sizing.