diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js b/packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js new file mode 100644 index 0000000..c6e977d --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js @@ -0,0 +1,106 @@ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import Code from 'components/common/code-block'; +import { productsExpandRowsGenerator } from 'utils/common'; + +const products = productsExpandRowsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const expandRow1 = { + className: 'expanding-foo', + 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

+
+ ) +}; + +const expandRow2 = { + className: (isExpanded, row, rowIndex) => { + if (rowIndex > 2) return 'expanding-foo'; + return 'expanding-bar'; + }, + 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

+
+ ) +}; + + +const sourceCode1 = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = // omit... + +const expandRow = { + className: 'expanding-foo', + renderer: row => ( +
.....
+ ) +}; + + +`; + +const sourceCode2 = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = // omit... + +const expandRow = { + className: (isExpanded, row, rowIndex) => { + if (rowIndex > 2) return 'expanding-foo'; + return 'expanding-bar'; + }, + renderer: row => ( +
...
+ ) +}; + + +`; + +export default () => ( +
+ + { sourceCode1 } + + { sourceCode2 } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index e9012a5..283278c 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -167,6 +167,7 @@ import CustomExpandColumn from 'examples/row-expand/custom-expand-column'; import ExpandColumnPosition from 'examples/row-expand/expand-column-position'; import ExpandHooks from 'examples/row-expand/expand-hooks'; import ParentRowClassName from 'examples/row-expand/parent-row-classname'; +import ExpandingRowClassName from 'examples/row-expand/expanding-row-classname'; // pagination import PaginationTable from 'examples/pagination'; @@ -420,7 +421,8 @@ storiesOf('Row Expand', module) .add('Custom Expand Indicator', () => ) .add('Expand Column Position', () => ) .add('Expand Hooks', () => ) - .add('Custom Parent Row ClassName', () => ); + .add('Custom Parent Row ClassName', () => ) + .add('Custom Expanding Row ClassName', () => ); storiesOf('Pagination', module) .addDecorator(bootstrapStyle()) diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss index 0693da3..a5a5f2f 100644 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss +++ b/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss @@ -1,7 +1,7 @@ -.parent-expand-foo { +.expanding-foo, .parent-expand-foo { background-color: coral; } -.parent-expand-bar { +.expanding-bar, .parent-expand-bar { background-color: aqua; } \ No newline at end of file