Column (component)

Component that defines the attributes of table column.

Props

align

The horizontal alignment of the table cell content.

type: enum('left'|'center'|'right')

fixed

Controls if the column is fixed when scrolling in the X axis.

type: bool defaultValue: false

fixedRight

Controls if the column is fixed to the right side of the table when scrolling in the X axis.

type: bool defaultValue: false

header

The header cell for this column. This can either be a string a React element, or a function that generates a React Element. Passing in a string will render a default header cell with that string. By default, the React element passed in can expect to receive the following props:

props: { columnKey: string // (of the column, if given) height: number // (supplied from the Table or rowHeightGetter) width: number // (supplied from the Column) }

Because you are passing in your own React element, you can feel free to pass in whatever props you may want or need.

If you pass in a function, you will receive the same props object as the first argument.

type: union(node|func)

cell

This is the body cell that will be cloned for this column. This can either be a string a React element, or a function that generates a React Element. Passing in a string will render a default header cell with that string. By default, the React element passed in can expect to receive the following props:

props: { rowIndex; number // (the row index of the cell) columnKey: string // (of the column, if given) height: number // (supplied from the Table or rowHeightGetter) width: number // (supplied from the Column) }

Because you are passing in your own React element, you can feel free to pass in whatever props you may want or need.

If you pass in a function, you will receive the same props object as the first argument.

type: union(node|func)

footer

This is the footer cell for this column. This can either be a string a React element, or a function that generates a React Element. Passing in a string will render a default header cell with that string. By default, the React element passed in can expect to receive the following props:

props: { columnKey: string // (of the column, if given) height: number // (supplied from the Table or rowHeightGetter) width: number // (supplied from the Column) }

Because you are passing in your own React element, you can feel free to pass in whatever props you may want or need.

If you pass in a function, you will receive the same props object as the first argument.

type: union(node|func)

columnKey

This is used to uniquely identify the column, and is not required unless you a resizing columns. This will be the key given in the onColumnResizeEndCallback on the Table.

type: union(string|number)

width (required)

The pixel width of the column.

type: number

minWidth

If this is a resizable column this is its minimum pixel width.

type: number

maxWidth

If this is a resizable column this is its maximum pixel width.

type: number

flexGrow

The grow factor relative to other columns. Same as the flex-grow API from http://www.w3.org/TR/css3-flexbox/. Basically, take any available extra width and distribute it proportionally according to all columns' flexGrow values. Defaults to zero (no-flexing).

type: number

isResizable

@deprecated This prop is deprecated in favor of the ResizeCell plugin component. Please refer to the "Resizable columns" example for usage.

Whether the column can be resized. Please note that if a column has a flex grow, once you resize the column, this will be set to 0.

This property only provides the UI for the column resizing. If this is set to true, you will need to set the onColumnResizeEndCallback table property and render your columns appropriately.

type: bool

isReorderable

@deprecated This prop is deprecated in favor of the ReorderCell plugin component. Please refer to the "Reorderable columns" example for usage.

Whether the column can be dragged to reorder.

This property only provides the UI for the column reordering. If this is set to true, you will need to set the onColumnReorderEndCallback table property and render your columns appropriately.

type: bool

allowCellsRecycling

Whether cells in this column can be removed from document when outside of viewport as a result of horizontal scrolling. Setting this property to true allows the table to not render cells in particular column that are outside of viewport for visible rows. This allows to create table with many columns and not have vertical scrolling performance drop. Setting the property to false will keep previous behaviour and keep cell rendered if the row it belongs to is visible.

type: bool defaultValue: false

pureRendering

Flag to enable performance check when rendering. Stops the component from rendering if none of it's passed in props have changed

type: bool

cellClassName

Additional classnames to be added to cells under this column.

type: string