Skip to content

Commit 79e3247

Browse files
AllenFangAllenFang
authored
Merge pull request #1070 from react-bootstrap-table/develop
20190825 release
2 parents 110744f + c251921 commit 79e3247

File tree

16 files changed

+467
-35
lines changed

16 files changed

+467
-35
lines changed

‎docs/columns.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ Available properties in a column object:
4949
* [editorRenderer](#editorRenderer)
5050
* [filter](#filter)
5151
* [filterValue](#filterValue)
52+
* [searchable](#searchable)
5253
* [csvType](#csvType)
5354
* [csvFormatter](#csvFormatter)
5455
* [csvText](#csvText)
@@ -917,6 +918,9 @@ A final `String` value you want to be filtered.
917918
}
918919
```
919920

921+
## <a name='searchable'>column.searchable - [Boolean]</a>
922+
Default the column is searchable. Give `false` to disable search functionality on specified column.
923+
920924
## <a name='csvType'>column.csvType - [Object]</a>
921925
Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
922926

‎docs/row-expand.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
* [expandColumnPosition](#expandColumnPosition)
1919
* [expandColumnRenderer](#expandColumnRenderer)
2020
* [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
21+
* [className](#className)
2122
* [parentClassName](#parentClassName)
2223

2324
### <a name="renderer">expandRow.renderer - [Function]</a>
@@ -168,6 +169,27 @@ const expandRow = {
168169
};
169170
```
170171

172+
### <a name='className'>expandRow.className - [String | Function]</a>
173+
Apply the custom class name on the expanding row. For example:
174+
175+
```js
176+
const expandRow = {
177+
renderer: (row) => ...,
178+
className: 'foo'
179+
};
180+
```
181+
following usage is more flexible way for customing the class name:
182+
183+
```js
184+
const expandRow = {
185+
renderer: (row) => ...,
186+
className: (isExpanded, row, rowIndex) => {
187+
if (rowIndex > 2) return 'foo';
188+
return 'bar';
189+
}
190+
};
191+
```
192+
171193
### <a name='parentClassName'>expandRow.parentClassName - [String | Function]</a>
172194
Apply the custom class name on parent row of expanded row. For example:
173195

‎packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React from 'react';
2+
import BootstrapTable from 'react-bootstrap-table-next';
3+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
4+
import Code from 'components/common/code-block';
5+
import { productsQualityGenerator } from 'utils/common';
6+
7+
const products = productsQualityGenerator(6);
8+
9+
const selectOptions = {
10+
0: 'good',
11+
1: 'Bad',
12+
2: 'unknown'
13+
};
14+
15+
const selectOptionsArr = [{
16+
value: 0,
17+
label: 'good'
18+
}, {
19+
value: 1,
20+
label: 'Bad'
21+
}, {
22+
value: 2,
23+
label: 'unknown'
24+
}];
25+
26+
const columns1 = [{
27+
dataField: 'id',
28+
text: 'Product ID'
29+
}, {
30+
dataField: 'name',
31+
text: 'Product Name'
32+
}, {
33+
dataField: 'quality',
34+
text: 'Product Quailty',
35+
formatter: cell => selectOptions[cell],
36+
filter: selectFilter({
37+
options: selectOptions
38+
})
39+
}];
40+
41+
const columns2 = [{
42+
dataField: 'id',
43+
text: 'Product ID'
44+
}, {
45+
dataField: 'name',
46+
text: 'Product Name'
47+
}, {
48+
dataField: 'quality',
49+
text: 'Product Quailty',
50+
formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
51+
filter: selectFilter({
52+
options: selectOptionsArr
53+
})
54+
}];
55+
56+
const columns3 = [{
57+
dataField: 'id',
58+
text: 'Product ID'
59+
}, {
60+
dataField: 'name',
61+
text: 'Product Name'
62+
}, {
63+
dataField: 'quality',
64+
text: 'Product Quailty',
65+
formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
66+
filter: selectFilter({
67+
options: () => selectOptionsArr
68+
})
69+
}];
70+
71+
const sourceCode = `\
72+
import BootstrapTable from 'react-bootstrap-table-next';
73+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
74+
75+
// Object map options
76+
const selectOptions = {
77+
0: 'good',
78+
1: 'Bad',
79+
2: 'unknown'
80+
};
81+
82+
// Array options
83+
const selectOptionsArr = [{
84+
value: 0,
85+
label: 'good'
86+
}, {
87+
value: 1,
88+
label: 'Bad'
89+
}, {
90+
value: 2,
91+
label: 'unknown'
92+
}];
93+
94+
const columns1 = [..., {
95+
dataField: 'quality',
96+
text: 'Product Quailty',
97+
formatter: cell => selectOptions[cell],
98+
filter: selectFilter({
99+
options: selectOptions
100+
})
101+
}];
102+
<BootstrapTable keyField='id' data={ products } columns={ columns1 } filter={ filterFactory() } />
103+
104+
const columns2 = [..., {
105+
dataField: 'quality',
106+
text: 'Product Quailty',
107+
formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
108+
filter: selectFilter({
109+
options: selectOptionsArr
110+
})
111+
}];
112+
<BootstrapTable keyField='id' data={ products } columns={ columns2 } filter={ filterFactory() } />
113+
114+
const columns3 = [..., {
115+
dataField: 'quality',
116+
text: 'Product Quailty',
117+
formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
118+
filter: selectFilter({
119+
options: () => selectOptionsArr
120+
})
121+
}];
122+
<BootstrapTable keyField='id' data={ products } columns={ columns3 } filter={ filterFactory() } />
123+
`;
124+
125+
export default () => (
126+
<div>
127+
<h2>Options as an object</h2>
128+
<BootstrapTable
129+
keyField="id"
130+
data={ products }
131+
columns={ columns1 }
132+
filter={ filterFactory() }
133+
/>
134+
<h2>Options as an array</h2>
135+
<BootstrapTable
136+
keyField="id"
137+
data={ products }
138+
columns={ columns2 }
139+
filter={ filterFactory() }
140+
/>
141+
<h2>Options as a function which return an array</h2>
142+
<BootstrapTable
143+
keyField="id"
144+
data={ products }
145+
columns={ columns3 }
146+
filter={ filterFactory() }
147+
/>
148+
<Code>{ sourceCode }</Code>
149+
</div>
150+
);

‎packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React from 'react';
2+
3+
import BootstrapTable from 'react-bootstrap-table-next';
4+
import Code from 'components/common/code-block';
5+
import { productsExpandRowsGenerator } from 'utils/common';
6+
7+
const products = productsExpandRowsGenerator();
8+
9+
const columns = [{
10+
dataField: 'id',
11+
text: 'Product ID'
12+
}, {
13+
dataField: 'name',
14+
text: 'Product Name'
15+
}, {
16+
dataField: 'price',
17+
text: 'Product Price'
18+
}];
19+
20+
const expandRow1 = {
21+
className: 'expanding-foo',
22+
renderer: row => (
23+
<div>
24+
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
25+
<p>You can render anything here, also you can add additional data on every row object</p>
26+
<p>expandRow.renderer callback will pass the origin row object to you</p>
27+
</div>
28+
)
29+
};
30+
31+
const expandRow2 = {
32+
className: (isExpanded, row, rowIndex) => {
33+
if (rowIndex > 2) return 'expanding-foo';
34+
return 'expanding-bar';
35+
},
36+
renderer: row => (
37+
<div>
38+
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
39+
<p>You can render anything here, also you can add additional data on every row object</p>
40+
<p>expandRow.renderer callback will pass the origin row object to you</p>
41+
</div>
42+
)
43+
};
44+
45+
46+
const sourceCode1 = `\
47+
import BootstrapTable from 'react-bootstrap-table-next';
48+
49+
const columns = // omit...
50+
51+
const expandRow = {
52+
className: 'expanding-foo',
53+
renderer: row => (
54+
<div>.....</div>
55+
)
56+
};
57+
58+
<BootstrapTable
59+
keyField='id'
60+
data={ products }
61+
columns={ columns }
62+
expandRow={ expandRow }
63+
/>
64+
`;
65+
66+
const sourceCode2 = `\
67+
import BootstrapTable from 'react-bootstrap-table-next';
68+
69+
const columns = // omit...
70+
71+
const expandRow = {
72+
className: (isExpanded, row, rowIndex) => {
73+
if (rowIndex > 2) return 'expanding-foo';
74+
return 'expanding-bar';
75+
},
76+
renderer: row => (
77+
<div>...</div>
78+
)
79+
};
80+
81+
<BootstrapTable
82+
keyField='id'
83+
data={ products }
84+
columns={ columns }
85+
expandRow={ expandRow }
86+
/>
87+
`;
88+
89+
export default () => (
90+
<div>
91+
<BootstrapTable
92+
keyField="id"
93+
data={ products }
94+
columns={ columns }
95+
expandRow={ expandRow1 }
96+
/>
97+
<Code>{ sourceCode1 }</Code>
98+
<BootstrapTable
99+
keyField="id"
100+
data={ products }
101+
columns={ columns }
102+
expandRow={ expandRow2 }
103+
/>
104+
<Code>{ sourceCode2 }</Code>
105+
</div>
106+
);

‎packages/react-bootstrap-table2-example/examples/search/searchable-column.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const { SearchBar } = Search;
10+
const products = productsGenerator();
11+
12+
const columns = [{
13+
dataField: 'id',
14+
text: 'Product ID'
15+
}, {
16+
dataField: 'name',
17+
text: 'Product Name',
18+
searchable: false
19+
}, {
20+
dataField: 'price',
21+
text: 'Product Price',
22+
searchable: false
23+
}];
24+
25+
const sourceCode = `\
26+
import BootstrapTable from 'react-bootstrap-table-next';
27+
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
28+
29+
const { SearchBar } = Search;
30+
const columns = [{
31+
dataField: 'id',
32+
text: 'Product ID'
33+
}, {
34+
dataField: 'name',
35+
text: 'Product Name',
36+
searchable: false
37+
}, {
38+
dataField: 'price',
39+
text: 'Product Price',
40+
searchable: false
41+
}];
42+
43+
<ToolkitProvider
44+
keyField="id"
45+
data={ products }
46+
columns={ columns }
47+
search
48+
>
49+
{
50+
props => (
51+
<div>
52+
<h3>Input something at below input field:</h3>
53+
<SearchBar { ...props.searchProps } />
54+
<hr />
55+
<BootstrapTable
56+
{ ...props.baseProps }
57+
/>
58+
</div>
59+
)
60+
}
61+
</ToolkitProvider>
62+
`;
63+
64+
export default () => (
65+
<div>
66+
<ToolkitProvider
67+
keyField="id"
68+
data={ products }
69+
columns={ columns }
70+
search
71+
>
72+
{
73+
props => (
74+
<div>
75+
<h3>Column name and price is unsearchable</h3>
76+
<SearchBar { ...props.searchProps } />
77+
<hr />
78+
<BootstrapTable
79+
{ ...props.baseProps }
80+
/>
81+
</div>
82+
)
83+
}
84+
</ToolkitProvider>
85+
<Code>{ sourceCode }</Code>
86+
</div>
87+
);

0 commit comments

Comments
 (0)