vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-10-04 17:16:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix #104

Browse Source 
* implement row seleciton style and class

* add testing for row selection style and class

* refine select row test

* add stories for row selection style and class

* add docs for row selection style and class

* patch for wrong docs
This commit is contained in:
Allen
2017-10-20 00:44:25 -05:00
committed by GitHub
parent cb6410bbe4
commit 10f06dca10
12 changed files with 424 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js
Vendored
+90
View File
@@ -0,0 +1,90 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator();
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const selectRow1 = {
mode: 'checkbox',
classes: 'selection-row'
};
const selectRow2 = {
mode: 'checkbox',
classes: (row, rowIndex) =>
(rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101')
};
const sourceCode1 = `\
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const selectRow = {
mode: 'checkbox',
classes: 'selection-row'
};
<BootstrapTable
keyField='id'
data={ products }
columns={ columns }
selectRow={ selectRow }
/>
`;
const sourceCode2 = `\
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const selectRow = {
mode: 'checkbox',
classes: (row, rowIndex) =>
(rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101')
};
<BootstrapTable
keyField='id'
data={ products }
columns={ columns }
selectRow={ selectRow }
/>
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
<Code>{ sourceCode1 }</Code>
<BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
<Code>{ sourceCode2 }</Code>
</div>
);
packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js
Vendored
+94
View File
@@ -0,0 +1,94 @@
/* eslint no-unused-vars: 0 */
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator();
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const selectRow1 = {
mode: 'checkbox',
style: { backgroundColor: '#c8e6c9' }
};
const selectRow2 = {
mode: 'checkbox',
style: (row, rowIndex) => {
const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF';
return { backgroundColor };
}
};
const sourceCode1 = `\
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const selectRow = {
mode: 'checkbox',
style: { backgroundColor: '#c8e6c9' }
};
<BootstrapTable
keyField='id'
data={ products }
columns={ columns }
selectRow={ selectRow }
/>
`;
const sourceCode2 = `\
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const selectRow = {
mode: 'checkbox',
style: (row, rowIndex) => {
const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF';
return { backgroundColor };
}
};
<BootstrapTable
keyField='id'
data={ products }
columns={ columns }
selectRow={ selectRow }
/>
`;
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
<Code>{ sourceCode1 }</Code>
<BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
<Code>{ sourceCode2 }</Code>
</div>
);