Columns

Sizing columns

Columns can either have a fixed size or be flexible and stretch to accommodate more space - flexible columns use the flex property (inspired by the browser flex-box layout) to specify how the should be stretched in relation to other flexible column.

In addition, columns can have a minimum and/or a maximum width.

const columns = [
{ field: 'firstName', flex: 2, minWidth: 100 },
{ field: 'lastName', flex: 1 },
{ field: 'birthDate', width: 200 }
];

In the above example, the firstName column will take twice as much space as the lastName column.

Suppose the grid has 500px of available space - in this case:

  • the birthDate column will take 200px and we have a remaining of 300px, and a flex total sum of 3
  • flex: 1 means 100px
  • flex: 2 will size the column to 200px - but since we have minWidth: 100, it will make sure it will always be at least 100px in width, even when the available space is not enough

Controlled and uncontrolled sizing

The AdaptableGrid is implemented in React, so we have adopted the best-practices in the React community - therefore, for most of the grid properties and configurations, we provide both a controlled and uncontrolled version.

The same is applicable for column sizes - if you don't want to write a callback prop that updates the column sizes in response to the user interaction, use the uncontrolled props

  • defaultWidth - fixed width, but uncontrolled (for controlled version, use width)
  • defaultFlex - flexible size, but uncontrolled (for controlled version, use flex)