diff --git a/docs/README.md b/docs/README.md index 6112dcd..07b8ad2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -21,6 +21,7 @@ * [headerClasses](#headerClasses) * [cellEdit](#cellEdit) * [selectRow](#selectRow) +* [expandRow](#expandRow) * [rowStyle](#rowStyle) * [rowClasses](#rowClasses) * [rowEvents](#rowEvents) @@ -123,6 +124,9 @@ Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for ### selectRow - [Object] Makes table rows selectable, please see [selectRow definition](./row-selection.md) for more detail. +### expandRow - [Object] +Makes table rows expandable, please see [expandRow definition](./row-expand.md) for more detail. + ### rowStyle = [Object | Function] Custom the style of table rows: diff --git a/docs/migration.md b/docs/migration.md index c369afd..a215952 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -114,7 +114,7 @@ Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/p No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown. ## Table Search -the usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself. +Ｔhe usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself. - [x] Custom search component and position - [x] Custom search value @@ -122,6 +122,15 @@ the usage of search functionality is a little bit different from legacy search. - [ ] Multiple search - [ ] Strict search +## Row Expand +- [x] Expand Row Events +- [x] Expand Row Indicator +- [x] Expand Row Management +- [x] Custom Expand Row Indicators +- [ ] Compatiable with Row Selection +- [ ] Expand Column position +- [ ] Expand Column Style/Class + ## Remote > It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html). @@ -130,9 +139,6 @@ the usage of search functionality is a little bit different from legacy search. ## Row insert/Delete Not support yet -## Expand row -Not support yet - ## Keyboard Navigation Not support yet diff --git a/docs/row-expand.md b/docs/row-expand.md new file mode 100644 index 0000000..1aa958a --- /dev/null +++ b/docs/row-expand.md @@ -0,0 +1,129 @@ + +# Row expand +`react-bootstrap-table2` supports the row expand feature. By passing prop `expandRow` to enable this functionality. + +> Default is click to expand/collapse a row. In addition, we don't support any way to chagne this mechanism! + +## Required +* [renderer (**required**)](#renderer) + +## Optional +* [expanded](#expanded) +* [nonExpandable](#nonExpandable) +* [onExpand](#onExpand) +* [onExpandAll](#onExpandAll) +* [showExpandColumn](#showExpandColumn) +* [expandColumnRenderer](#expandColumnRenderer) +* [expandHeaderColumnRenderer](#expandHeaderColumnRenderer) + +### expandRow.renderer - [Function] + +Specify the content of expand row, `react-bootstrap-table2` will pass a row object as argument and expect return a react element. + +#### values +* **row** + +#### examples + +```js +const expandRow = { + renderer: row => ( +
+

{ `This Expand row is belong to rowKey ${row.id}` }

+

You can render anything here, also you can add additional data on every row object

+

expandRow.renderer callback will pass the origin row object to you

+
+ ) +}; + + +``` + +### expandRow.expanded - [Array] +`expandRow.expanded` allow you have default row expandations on table. + +```js +const expandRow = { + renderer: (row) => ... + expanded: [1, 3] // should be a row keys array +}; +``` + +### expandRow.nonExpandable - [Array] +This prop allow you to restrict some rows which can not be expanded by user. `expandRow.nonExpandable` accept an rowkeys array. + +```js +const expandRow = { + renderer: (row) => ... + nonExpandable: [1, 3 ,5] +}; +``` + +### expandRow.onExpand - [Function] +This callback function will be called when a row is expand/collapse and pass following four arguments: +`row`, `isExpand`, `rowIndex` and `e`. + +```js +const expandRow = { + renderer: (row) => ... + onExpand: (row, isExpand, rowIndex, e) => { + // ... + } +}; +``` + +### expandRow.onExpandAll - [Function] +This callback function will be called when expand/collapse all. It only work when you configure [`expandRow.showExpandColumn`](#showExpandColumn) as `true`. + +```js +const expandRow = { + renderer: (row) => ... + onExpandAll: (isExpandAll, results, e) => { + // ... + } +}; +``` + +### expandRow.expandColumnRenderer - [Function] +Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain one property `expanded` which indicate if current row is expanded + + +```js +const expandRow = { + renderer: (row) => ... + expandColumnRenderer: ({ expanded }) => ( + // .... + ) +}; +``` + +> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer. + +### expandRow.expandHeaderColumnRenderer - [Function] +Provide a callback function which allow you to custom the expand indicator in the expand header column. This callback only have one argument which is an object and contain one property `isAnyExpands` which indicate if there's any rows are expanded: + +```js +const expandRow = { + renderer: (row) => ... + expandHeaderColumnRenderer: ({ isAnyExpands }) => ( + // .... + ) +}; +``` + +> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer. + +### expandRow.showExpandColumn - [Bool] +Default is `false`, if you want to have a expand indicator, give this prop as `true` + +```js +const expandRow = { + renderer: (row) => ... + showExpandColumn: true +}; +```