Expandable Row · react-bootstrap-table2

Live Demo For Row Expand
API & Props Definition

Expand Mode

react-bootstrap-table2 allow support click to expand or collapse a row. When you enable row expandable functionality, you have to give expandRow.renderer to tell what kind of context you want to render in the expanding content, for example:

const expandRow = {
  renderer: row => (
    <div>....</div>
  )
};

// omit...

<BootstrapTable
  keyField='id'
  data={ products }
  columns={ columns }
  expandRow={ expandRow }
/>

Expand Management

Please check expandRow.expanded, it's used for default expanding usually but also can be used as a external expandation control.

This is an example for manage on expands

Customization

Style/Class

expandRow.renderer allow you to render everything in the content of expanding row. You can custom the style or class by yourself. However, a expand row is wrapped by a HTML tr element(Parent row). Currently, we support following way to custom the class/style on parent row element:

For the class of parent row: expandRow.parentClassName
For the style of parent row: N/A

In addition, the way to custom the class/style on expanding row element:

For the class of expanding row: expandRow.className
For the style of expanding row: N/A

Expand Column

react-bootstrap-table2 default doesn't render a additional indicator column, just like row selection. But if you want it, you can enable it via expandRow.showExpandColumn

In addition, we allow you to custom the expand columns in following ways:

For header cell: expandRow.expandHeaderColumnRenderer
For normal cell: expandRow.expandColumnRenderer

You can render expand column at the right side of table via expandRow.expandColumnPosition.

Event Listening

expandRow.onExpand allow you to listen a row is expand or collapse.
expandRow.onExpandAll for listening the expand/collapse all event.