React
Using ag-Grid with React: Columns

Column Sizing: Shift Resizing

Outline

We've got one more column sizing feature to look at. It's called shift resizing.

If you hold "shift" while dragging the resize handle, a column will take space away from the column adjacent to it. This means the total width for all columns will be constant.

We can also set this behavior to be the default by adding a property called colResizeDefault with a value of shift to our state and passing it as a prop to our grid:

// src/App.js
<AgGridReact
    onGridReady={this.onGridReady}
    columnDefs={this.state.columnDefs}
    rowData={this.state.rowData}
    colResizeDefault={this.state.colResizeDefault}
    defaultColDef={this.state.defaultColDef}
    ></AgGridReact>

In the next video, we'll learn about changing the height of the header.

 

I finished! On to the next chapter