react-bootstrap-table2/docs/basic-row-expand.md

id	title	sidebar_label
basic-row-expand	Expandable Row	Expandable Row

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(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

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.