Expandable Row

Live Demo For Row Expand
API & Props Definition

---

Expand Mode

react-bootstrap-table-ng 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-table-ng 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.