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 control the style or class by yourself. However, a expand row is wrapped by a HTML tr element. Currently, we don't support any ways to custom the style or class on the expanding tr elemnt.

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:

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

Event Listening

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