[0, 3]
44 | }) }
45 | />
46 | `;
47 | export default () => (
48 |
49 |
Product ID: 0, 3 is non editable
50 | [0, 3]
58 | }) }
59 | />
60 | { sourceCode }
61 |
62 | );
63 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/cell-edit/textarea-editor-table.js:
--------------------------------------------------------------------------------
1 | /* eslint react/prefer-stateless-function: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
6 | import Code from 'components/common/code-block';
7 | import { jobsGenerator } from 'utils/common';
8 |
9 | const jobs = jobsGenerator();
10 |
11 | const columns = [{
12 | dataField: 'id',
13 | text: 'Job ID'
14 | }, {
15 | dataField: 'name',
16 | text: 'Job Name'
17 | }, {
18 | dataField: 'owner',
19 | text: 'Job Owner'
20 | }, {
21 | dataField: 'type',
22 | text: 'Job Type',
23 | editor: {
24 | type: Type.TEXTAREA
25 | }
26 | }];
27 |
28 | const sourceCode = `\
29 | import BootstrapTable from 'react-bootstrap-table-next';
30 | import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
31 |
32 | const columns = [{
33 | dataField: 'id',
34 | text: 'Job ID'
35 | }, {
36 | dataField: 'name',
37 | text: 'Job Name'
38 | }, {
39 | dataField: 'owner',
40 | text: 'Job Owner'
41 | }, {
42 | dataField: 'type',
43 | text: 'Job Type',
44 | editor: {
45 | type: Type.TEXTAREA
46 | }
47 | }];
48 |
49 |
55 | `;
56 |
57 | export default () => (
58 |
59 |
Textarea Editor
60 |
66 | { sourceCode }
67 |
68 | );
69 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/column-filter/date-filter-default-value.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BootstrapTable from 'react-bootstrap-table-next';
3 | import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
4 | import Code from 'components/common/code-block';
5 | import { stockGenerator } from 'utils/common';
6 |
7 | const stocks = stockGenerator(8);
8 |
9 | const columns = [{
10 | dataField: 'id',
11 | text: 'Product ID'
12 | }, {
13 | dataField: 'name',
14 | text: 'Product Name'
15 | }, {
16 | dataField: 'inStockDate',
17 | text: 'InStock Date',
18 | formatter: cell => cell.toString(),
19 | filter: dateFilter({
20 | defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }
21 | })
22 | }];
23 |
24 | const sourceCode = `\
25 | import BootstrapTable from 'react-bootstrap-table-next';
26 | import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
27 |
28 | const columns = [{
29 | dataField: 'id',
30 | text: 'Product ID'
31 | }, {
32 | dataField: 'name',
33 | text: 'Product Name'
34 | }, {
35 | dataField: 'inStockDate',
36 | text: 'InStock Date',
37 | filter: dateFilter({
38 | defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }
39 | })
40 | }];
41 |
42 |
48 | `;
49 |
50 | export default () => (
51 |
52 |
58 | { sourceCode }
59 |
60 | );
61 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/column-filter/date-filter.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BootstrapTable from 'react-bootstrap-table-next';
3 | import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
4 | import Code from 'components/common/code-block';
5 | import { stockGenerator } from 'utils/common';
6 |
7 | const stocks = stockGenerator(8);
8 |
9 | const columns = [{
10 | dataField: 'id',
11 | text: 'Product ID'
12 | }, {
13 | dataField: 'name',
14 | text: 'Product Name'
15 | }, {
16 | dataField: 'inStockDate',
17 | text: 'InStock Date',
18 | formatter: cell => cell.toString(),
19 | filter: dateFilter()
20 | }];
21 |
22 | const sourceCode = `\
23 | import BootstrapTable from 'react-bootstrap-table-next';
24 | import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
25 |
26 | const columns = [{
27 | dataField: 'id',
28 | text: 'Product ID'
29 | }, {
30 | dataField: 'name',
31 | text: 'Product Name'
32 | }, {
33 | dataField: 'inStockDate',
34 | text: 'InStock Date',
35 | filter: dateFilter()
36 | }];
37 |
38 |
44 | `;
45 |
46 | export default () => (
47 |
48 |
54 | { sourceCode }
55 |
56 | );
57 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/column-filter/number-filter-default-value.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BootstrapTable from 'react-bootstrap-table-next';
3 | import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator(8);
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 | filter: numberFilter({
19 | defaultValue: { number: 2103, comparator: Comparator.GT }
20 | })
21 | }];
22 |
23 | const sourceCode = `\
24 | import BootstrapTable from 'react-bootstrap-table-next';
25 | import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
26 |
27 | const columns = [{
28 | dataField: 'id',
29 | text: 'Product ID'
30 | }, {
31 | dataField: 'name',
32 | text: 'Product Name'
33 | }, {
34 | dataField: 'price',
35 | text: 'Product Price',
36 | filter: numberFilter({
37 | defaultValue: { number: 2103, comparator: Comparator.GT }
38 | })
39 | }];
40 |
41 |
42 | `;
43 |
44 | export default () => (
45 |
46 |
52 | { sourceCode }
53 |
54 | );
55 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/column-filter/number-filter.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BootstrapTable from 'react-bootstrap-table-next';
3 | import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator(8);
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 | filter: numberFilter()
19 | }];
20 |
21 | const sourceCode = `\
22 | import BootstrapTable from 'react-bootstrap-table-next';
23 | import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
24 |
25 | const columns = [{
26 | dataField: 'id',
27 | text: 'Product ID'
28 | }, {
29 | dataField: 'name',
30 | text: 'Product Name'
31 | }, {
32 | dataField: 'price',
33 | text: 'Product Price',
34 | filter: numberFilter()
35 | }];
36 |
37 |
38 | `;
39 |
40 | export default () => (
41 |
42 |
48 | { sourceCode }
49 |
50 | );
51 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-caseSensitive.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BootstrapTable from 'react-bootstrap-table-next';
3 | import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator(8);
8 |
9 | const columns = [{
10 | dataField: 'id',
11 | text: 'Product ID'
12 | }, {
13 | dataField: 'name',
14 | text: 'Product Name',
15 | filter: textFilter({ caseSensitive: true })
16 | }, {
17 | dataField: 'price',
18 | text: 'Product Price'
19 | }];
20 |
21 | const sourceCode = `\
22 | import BootstrapTable from 'react-bootstrap-table-next';
23 | import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
24 |
25 | const columns = [{
26 | dataField: 'id',
27 | text: 'Product ID'
28 | }, {
29 | dataField: 'name',
30 | text: 'Product Name',
31 | filter: textFilter({ caseSensitive: true })
32 | }, {
33 | dataField: 'price',
34 | text: 'Product Price'
35 | }];
36 |
37 |
38 | `;
39 |
40 | export default () => (
41 |
42 |
Product Name is case sensitive
43 |
49 | { sourceCode }
50 |
51 | );
52 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BootstrapTable from 'react-bootstrap-table-next';
3 | import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator(8);
8 |
9 | const columns = [{
10 | dataField: 'id',
11 | text: 'Product ID'
12 | }, {
13 | dataField: 'name',
14 | text: 'Product Name',
15 | filter: textFilter()
16 | }, {
17 | dataField: 'price',
18 | text: 'Product Price',
19 | filter: textFilter({
20 | defaultValue: '2103'
21 | })
22 | }];
23 |
24 | const sourceCode = `\
25 | import BootstrapTable from 'react-bootstrap-table-next';
26 | import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
27 |
28 | const columns = [{
29 | dataField: 'id',
30 | text: 'Product ID',
31 | }, {
32 | dataField: 'name',
33 | text: 'Product Name',
34 | filter: textFilter()
35 | }, {
36 | dataField: 'price',
37 | text: 'Product Price',
38 | filter: textFilter({
39 | defaultValue: '2103'
40 | })
41 | }];
42 |
43 |
44 | `;
45 |
46 | export default () => (
47 |
48 |
54 | { sourceCode }
55 |
56 | );
57 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BootstrapTable from 'react-bootstrap-table-next';
3 | import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator(8);
8 |
9 | const columns = [{
10 | dataField: 'id',
11 | text: 'Product ID'
12 | }, {
13 | dataField: 'name',
14 | text: 'Product Name',
15 | filter: textFilter({
16 | comparator: Comparator.EQ // default is Comparator.LIKE
17 | })
18 | }, {
19 | dataField: 'price',
20 | text: 'Product Price',
21 | filter: textFilter()
22 | }];
23 |
24 | const sourceCode = `\
25 | import BootstrapTable from 'react-bootstrap-table-next';
26 | import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
27 |
28 | const columns = [{
29 | dataField: 'id',
30 | text: 'Product ID'
31 | }, {
32 | dataField: 'name',
33 | text: 'Product Name',
34 | filter: textFilter({
35 | comparator: Comparator.EQ
36 | })
37 | }, {
38 | dataField: 'price',
39 | text: 'Product Price',
40 | filter: textFilter()
41 | }];
42 |
43 |
44 | `;
45 |
46 | export default () => (
47 |
48 |
Product Name filter apply Equal Comparator
49 |
55 | { sourceCode }
56 |
57 | );
58 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BootstrapTable from 'react-bootstrap-table-next';
3 | import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator(8);
8 |
9 | const columns = [{
10 | dataField: 'id',
11 | text: 'Product ID',
12 | footer: 'hello'
13 | }, {
14 | dataField: 'name',
15 | text: 'Product Name',
16 | footer: 'hello',
17 | filter: textFilter({
18 | id: 'identify'
19 | })
20 | }, {
21 | dataField: 'price',
22 | text: 'Product Price',
23 | footer: 'hello',
24 | filter: textFilter()
25 | }];
26 |
27 | const sourceCode = `\
28 | import BootstrapTable from 'react-bootstrap-table-next';
29 | import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
30 |
31 | const columns = [{
32 | dataField: 'id',
33 | text: 'Product ID',
34 | }, {
35 | dataField: 'name',
36 | text: 'Product Name',
37 | filter: textFilter()
38 | }, {
39 | dataField: 'price',
40 | text: 'Product Price',
41 | filter: textFilter()
42 | }];
43 |
44 |
45 | `;
46 |
47 | const selectRow = {
48 | mode: 'checkbox',
49 | clickToSelect: true
50 | };
51 |
52 | export default () => (
53 |
54 |
61 | { sourceCode }
62 |
63 | );
64 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | align: 'center'
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | align: (cell, row, rowIndex, colIndex) => {
18 | if (rowIndex % 2 === 0) return 'right';
19 | return 'left';
20 | }
21 | }, {
22 | dataField: 'price',
23 | text: 'Product Price'
24 | }];
25 |
26 | const sourceCode = `\
27 | import BootstrapTable from 'react-bootstrap-table-next';
28 |
29 | const columns = [{
30 | dataField: 'id',
31 | text: 'Product ID',
32 | align: 'center'
33 | }, {
34 | dataField: 'name',
35 | text: 'Product Name',
36 | align: (cell, row, rowIndex, colIndex) => {
37 | if (rowIndex % 2 === 0) return 'right';
38 | return 'left';
39 | }
40 | }, {
41 | dataField: 'price',
42 | text: 'Product Price'
43 | }];
44 |
45 |
46 | `;
47 |
48 | export default () => (
49 |
50 |
51 | { sourceCode }
52 |
53 | );
54 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | attrs: { title: 'id column' }
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': `customized data ${rowIndex}` })
18 | }, {
19 | dataField: 'price',
20 | text: 'Product Price'
21 | }];
22 |
23 | const sourceCode = `\
24 | import BootstrapTable from 'react-bootstrap-table-next';
25 |
26 | const columns = [{
27 | dataField: 'id',
28 | text: 'Product ID',
29 | attrs: { title: 'id column' }
30 | }, {
31 | dataField: 'name',
32 | text: 'Product Name',
33 | attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': \`customized data \${rowIndex}\` })
34 | }, {
35 | dataField: 'price',
36 | text: 'Product Price'
37 | }];
38 |
39 |
40 | `;
41 |
42 | export default () => (
43 |
44 |
Try to hover on Product ID Cell
45 |
46 | { sourceCode }
47 |
48 | );
49 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | classes: 'demo-key-row'
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | classes: (cell, row, rowIndex, colIndex) => {
18 | if (rowIndex % 2 === 0) return 'demo-row-even';
19 | return 'demo-row-odd';
20 | }
21 | }, {
22 | dataField: 'price',
23 | text: 'Product Price'
24 | }];
25 |
26 | const sourceCode = `\
27 | import BootstrapTable from 'react-bootstrap-table-next';
28 |
29 | const columns = [{
30 | dataField: 'id',
31 | text: 'Product ID',
32 | classes: 'demo-key-row'
33 | }, {
34 | dataField: 'name',
35 | text: 'Product Name',
36 | classes: (cell, row, rowIndex, colIndex) => {
37 | if (rowIndex % 2 === 0) return 'demo-row-even';
38 | return 'demo-row-odd';
39 | }
40 | }, {
41 | dataField: 'price',
42 | text: 'Product Price'
43 | }];
44 |
45 |
46 | `;
47 |
48 | export default () => (
49 |
50 |
51 | { sourceCode }
52 |
53 | );
54 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator, withOnSale } from 'utils/common';
6 |
7 | const products = withOnSale(productsGenerator());
8 |
9 | function priceFormatter(cell, row) {
10 | if (row.onSale) {
11 | return (
12 | $ { cell } NTD(Sales!!)
13 | );
14 | }
15 |
16 | return (
17 | $ { cell } NTD
18 | );
19 | }
20 |
21 | const columns = [{
22 | dataField: 'id',
23 | text: 'Product ID'
24 | }, {
25 | dataField: 'name',
26 | text: 'Product Name'
27 | }, {
28 | dataField: 'price',
29 | text: 'Product Price',
30 | formatter: priceFormatter
31 | }];
32 |
33 | const sourceCode = `\
34 | import BootstrapTable from 'react-bootstrap-table-next';
35 |
36 | function priceFormatter(cell, row) {
37 | if (row.onSale) {
38 | return (
39 |
40 | $ { cell } NTD(Sales!!)
41 |
42 | );
43 | }
44 |
45 | return (
46 | $ { cell } NTD
47 | );
48 | }
49 |
50 | const columns = [
51 | // omit...
52 | {
53 | dataField: 'price',
54 | text: 'Product Price',
55 | formatter: priceFormatter
56 | }];
57 |
58 |
63 | `;
64 |
65 | export default () => (
66 |
67 |
72 | { sourceCode }
73 |
74 | );
75 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | hidden: true
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name'
17 | }, {
18 | dataField: 'price',
19 | text: 'Product Price'
20 | }];
21 |
22 | const sourceCode = `\
23 | import BootstrapTable from 'react-bootstrap-table-next';
24 |
25 | const columns = [{
26 | dataField: 'id',
27 | text: 'Product ID',
28 | hidden: true
29 | },
30 | // omit...
31 | ];
32 |
33 |
34 | `;
35 |
36 | export default () => (
37 |
38 |
39 | { sourceCode }
40 |
41 | );
42 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | title: true
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | title: (cell, row, rowIndex, colIndex) => `this is custom title for ${cell}`
18 | }, {
19 | dataField: 'price',
20 | text: 'Product Price'
21 | }];
22 |
23 | const sourceCode = `\
24 | const columns = [{
25 | dataField: 'id',
26 | text: 'Product ID',
27 | title: true
28 | }, {
29 | dataField: 'name',
30 | text: 'Product Name',
31 | title: (cell, row, rowIndex, colIndex) => \`this is custom title for \${cell}\`
32 | }, {
33 | dataField: 'price',
34 | text: 'Product Price'
35 | }];
36 |
37 |
38 | `;
39 |
40 | export default () => (
41 |
42 |
Try to hover on any Product Name cells
43 |
44 | { sourceCode }
45 |
46 | );
47 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator(5, (value, index) => ({
8 | id: index,
9 | name: `User Name ${index}`,
10 | phone: 21009831 + index,
11 | address: {
12 | city: 'New York',
13 | postCode: '1111-4512'
14 | }
15 | }));
16 |
17 | const columns = [{
18 | dataField: 'id',
19 | text: 'User ID'
20 | }, {
21 | dataField: 'name',
22 | text: 'User Name'
23 | }, {
24 | dataField: 'phone',
25 | text: 'Phone'
26 | }, {
27 | dataField: 'address.city',
28 | text: 'City'
29 | }, {
30 | dataField: 'address.postCode',
31 | text: 'PostCode'
32 | }];
33 |
34 | const sourceCode = `\
35 | import BootstrapTable from 'react-bootstrap-table-next';
36 |
37 | const columns = [{
38 | dataField: 'id',
39 | text: 'User ID'
40 | }, {
41 | dataField: 'name',
42 | text: 'User Name'
43 | }, {
44 | dataField: 'phone',
45 | text: 'Phone'
46 | }, {
47 | dataField: 'address.city',
48 | text: 'City'
49 | }, {
50 | dataField: 'address.postCode',
51 | text: 'PostCode'
52 | }];
53 |
54 |
55 | `;
56 |
57 | export default () => (
58 |
59 |
60 | { sourceCode }
61 |
62 | );
63 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-filter.js:
--------------------------------------------------------------------------------
1 | /* eslint react/prop-types: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const ProductList = (props) => {
9 | const columns = [
10 | {
11 | dataField: 'id',
12 | text: 'Product ID'
13 | },
14 | {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | filter: textFilter()
18 | },
19 | {
20 | dataField: 'price',
21 | text: 'Product Price',
22 | filter: textFilter()
23 | }
24 | ];
25 |
26 | return (
27 |
28 |
Products
29 |
35 |
36 | );
37 | };
38 |
39 | export default class DataContainer extends React.Component {
40 | state = {
41 | products: []
42 | };
43 |
44 | loadData = () => {
45 | this.setState({
46 | products: productsGenerator()
47 | });
48 | }
49 |
50 | render() {
51 | return (
52 |
53 |
64 |
65 |
50 |
51 | { sourceCode }
52 |
53 | );
54 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/footer/column-attrs-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | /* eslint no-alert: 0 */
3 | import React from 'react';
4 |
5 | import BootstrapTable from 'react-bootstrap-table-next';
6 | import Code from 'components/common/code-block';
7 | import { productsGenerator } from 'utils/common';
8 |
9 | const products = productsGenerator();
10 |
11 | const columns = [{
12 | dataField: 'id',
13 | text: 'Product ID',
14 | footer: 'Footer 1',
15 | footerAttrs: { title: 'ID footer column' }
16 | }, {
17 | dataField: 'name',
18 | text: 'Product Name',
19 | footer: 'Footer 2',
20 | footerAttrs: (column, colIndex) => ({ 'data-test': `customized data ${colIndex}` })
21 | }, {
22 | dataField: 'price',
23 | text: 'Product Price',
24 | footer: 'Footer 3'
25 | }];
26 |
27 | const sourceCode = `\
28 | import BootstrapTable from 'react-bootstrap-table-next';
29 |
30 | const columns = [{
31 | dataField: 'id',
32 | text: 'Product ID',
33 | footer: 'Footer 1',
34 | footerAttrs: { title: 'ID footer column' }
35 | }, {
36 | dataField: 'name',
37 | text: 'Product Name',
38 | footer: 'Footer 2',
39 | footerAttrs: (column, colIndex) => ({ 'data-test': \`customized data \${colIndex}\` })
40 | }, {
41 | dataField: 'price',
42 | text: 'Product Price',
43 | footer: 'Footer 3'
44 | }];
45 |
46 |
47 | `;
48 |
49 | export default () => (
50 |
51 |
52 | { sourceCode }
53 |
54 | );
55 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/footer/column-class-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | /* eslint no-alert: 0 */
3 | import React from 'react';
4 |
5 | import BootstrapTable from 'react-bootstrap-table-next';
6 | import Code from 'components/common/code-block';
7 | import { productsGenerator } from 'utils/common';
8 |
9 | const products = productsGenerator();
10 |
11 | const columns = [{
12 | dataField: 'id',
13 | text: 'Product ID',
14 | footer: 'Footer 1'
15 | }, {
16 | dataField: 'name',
17 | text: 'Product Name',
18 | footer: 'Footer 2',
19 | footerClasses: 'demo-row-odd'
20 | }, {
21 | dataField: 'price',
22 | text: 'Product Price',
23 | footer: 'Footer 3',
24 | footerClasses: (column, colIndex) => {
25 | if (colIndex % 2 === 0) return 'demo-row-even';
26 | return 'demo-row-odd';
27 | }
28 | }];
29 |
30 | const sourceCode = `\
31 | import BootstrapTable from 'react-bootstrap-table-next';
32 |
33 | const columns = [{
34 | dataField: 'id',
35 | text: 'Product ID',
36 | footer: 'Footer 1'
37 | }, {
38 | dataField: 'name',
39 | text: 'Product Name',
40 | footer: 'Footer 2',
41 | footerClasses: 'demo-row-odd'
42 | }, {
43 | dataField: 'price',
44 | text: 'Product Price',
45 | footer: 'Footer 3',
46 | footerClasses: (column, colIndex) => {
47 | if (colIndex % 2 === 0) return 'demo-row-even';
48 | return 'demo-row-odd';
49 | }
50 | }];
51 |
52 |
53 | `;
54 |
55 | export default () => (
56 |
57 |
58 | { sourceCode }
59 |
60 | );
61 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | /* eslint no-alert: 0 */
3 | import React from 'react';
4 |
5 | import BootstrapTable from 'react-bootstrap-table-next';
6 | import Code from 'components/common/code-block';
7 | import { productsGenerator } from 'utils/common';
8 |
9 | const products = productsGenerator();
10 |
11 | const columns = [{
12 | dataField: 'id',
13 | text: 'Product ID',
14 | footerEvents: {
15 | onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
16 | },
17 | footer: 'Footer 1'
18 | }, {
19 | dataField: 'name',
20 | text: 'Product Name',
21 | footer: 'Footer 2'
22 | }, {
23 | dataField: 'price',
24 | text: 'Product Price',
25 | footer: 'Footer 3'
26 | }];
27 |
28 | const sourceCode = `\
29 | import BootstrapTable from 'react-bootstrap-table-next';
30 |
31 | const columns = [{
32 | dataField: 'id',
33 | text: 'Product ID',
34 | footerEvents: {
35 | onClick: (e, column, columnIndex) => alert('Click on Product ID footer column')
36 | },
37 | footer: 'Footer 1'
38 | }, {
39 | dataField: 'name',
40 | text: 'Product Name',
41 | footer: 'Footer 2'
42 | }, {
43 | dataField: 'price',
44 | text: 'Product Price',
45 | footer: 'Footer 3'
46 | }];
47 |
48 |
49 | `;
50 |
51 | export default () => (
52 |
53 |
54 | { sourceCode }
55 |
56 | );
57 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | function priceFormatter(column, colIndex, { text }) {
11 | return (
12 |
13 | $$ {column.text} $$
14 |
15 | );
16 | }
17 |
18 | const columns = [
19 | {
20 | dataField: 'id',
21 | text: 'Product ID',
22 | footer: 'Footer 1'
23 | },
24 | {
25 | dataField: 'name',
26 | text: 'Product Name',
27 | footer: 'Footer 2'
28 | },
29 | {
30 | dataField: 'price',
31 | text: 'Product Price',
32 | footer: 'Footer 3',
33 | footerFormatter: priceFormatter
34 | }
35 | ];
36 |
37 | const sourceCode = `\
38 | import BootstrapTable from 'react-bootstrap-table-next';
39 |
40 | function priceFormatter(column, colIndex, { text }) {
41 | return (
42 | $$ { column.text } $$
43 | );
44 | }
45 |
46 | const columns = [
47 | // omit...
48 | {
49 | dataField: 'price',
50 | text: 'Product Price',
51 | footer: 'Footer 3',
52 | footerFormatter: priceFormatter
53 | }];
54 |
55 |
60 | `;
61 |
62 | export default () => (
63 |
64 |
65 | {sourceCode}
66 |
67 | );
68 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/footer/column-title-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | footerTitle: true,
14 | footer: 'Footer 1'
15 | }, {
16 | dataField: 'name',
17 | text: 'Product Name',
18 | footerTitle: (column, colIndex) => `this is custom title for ${column.text}`,
19 | footer: 'Footer 2'
20 | }, {
21 | dataField: 'price',
22 | text: 'Product Price',
23 | footer: 'Footer 3'
24 | }];
25 |
26 | const sourceCode = `\
27 | import BootstrapTable from 'react-bootstrap-table-next';
28 |
29 | const columns = [{
30 | dataField: 'id',
31 | text: 'Product ID',
32 | footerTitle: true,
33 | footer: 'Footer 1'
34 | }, {
35 | dataField: 'name',
36 | text: 'Product Name',
37 | footerTitle: (column, colIndex) => \`this is custom title for \${column.text}\`,
38 | footer: 'Footer 2'
39 | }, {
40 | dataField: 'price',
41 | text: 'Product Price',
42 | footer: 'Footer 3'
43 | }];
44 |
45 |
46 | `;
47 |
48 | export default () => (
49 |
50 |
51 | { sourceCode }
52 |
53 | );
54 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/footer/footer-class-table.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
8 |
9 | const columns = [
10 | {
11 | dataField: 'id',
12 | text: 'Product ID',
13 | footer: 'Footer 1'
14 | },
15 | {
16 | dataField: 'name',
17 | text: 'Product Name',
18 | footer: 'Footer 2'
19 | },
20 | {
21 | dataField: 'price',
22 | text: 'Product Price',
23 | footer: 'Footer 3'
24 | }
25 | ];
26 |
27 | const sourceCode = `\
28 | import BootstrapTable from 'react-bootstrap-table-next';
29 |
30 | const columns = [
31 | {
32 | dataField: 'id',
33 | text: 'Product ID',
34 | footer: 'Footer 1'
35 | },
36 | {
37 | dataField: 'name',
38 | text: 'Product Name',
39 | footer: 'Footer 2'
40 | },
41 | {
42 | dataField: 'price',
43 | text: 'Product Price',
44 | footer: 'Footer 3'
45 | }
46 | ];
47 |
48 |
54 | `;
55 |
56 | export default () => (
57 |
58 |
59 | {sourceCode}
60 |
61 | );
62 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/footer/function-footer.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 |
7 | import { productsGenerator } from 'utils/common';
8 |
9 | const products = productsGenerator();
10 |
11 | const columns = [
12 | {
13 | dataField: 'id',
14 | text: 'Product ID',
15 | footer: 'Footer 1'
16 | },
17 | {
18 | dataField: 'name',
19 | text: 'Product Name',
20 | footer: 'Footer 2'
21 | },
22 | {
23 | dataField: 'price',
24 | text: 'Product Price',
25 | footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
26 | }
27 | ];
28 |
29 | const sourceCode = `\
30 | import BootstrapTable from 'react-bootstrap-table-next';
31 |
32 | const columns = [
33 | // omit...
34 | {
35 | dataField: 'price',
36 | text: 'Product Price',
37 | footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
38 | }];
39 |
40 |
45 | `;
46 |
47 | export default () => (
48 |
49 |
50 | {sourceCode}
51 |
52 | );
53 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/footer/simple-footer.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 |
7 | import { productsGenerator } from 'utils/common';
8 |
9 | const products = productsGenerator();
10 |
11 | const columns = [
12 | {
13 | dataField: 'id',
14 | text: 'Product ID',
15 | footer: 'Footer 1'
16 | },
17 | {
18 | dataField: 'name',
19 | text: 'Product Name',
20 | footer: 'Footer 2'
21 | },
22 | {
23 | dataField: 'price',
24 | text: 'Product Price',
25 | footer: 'Footer 3'
26 | }
27 | ];
28 |
29 | const sourceCode = `\
30 | import BootstrapTable from 'react-bootstrap-table-next';
31 |
32 | const columns = [
33 | // omit...
34 | {
35 | dataField: 'price',
36 | text: 'Product Price',
37 | footer: 'Footer 3'
38 | }];
39 |
40 |
45 | `;
46 |
47 | export default () => (
48 |
49 |
50 | {sourceCode}
51 |
52 | );
53 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | headerAlign: 'center'
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | headerAlign: (column, colIndex) => 'right'
18 | }, {
19 | dataField: 'price',
20 | text: 'Product Price'
21 | }];
22 |
23 | const sourceCode = `\
24 | import BootstrapTable from 'react-bootstrap-table-next';
25 |
26 | const columns = [{
27 | dataField: 'id',
28 | text: 'Product ID',
29 | headerAlign: 'center'
30 | }, {
31 | dataField: 'name',
32 | text: 'Product Name',
33 | headerAlign: (column, colIndex) => 'right'
34 | }, {
35 | dataField: 'price',
36 | text: 'Product Price'
37 | }];
38 |
39 |
40 | `;
41 |
42 | export default () => (
43 |
44 |
45 | { sourceCode }
46 |
47 | );
48 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | headerAttrs: { title: 'ID header column' }
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | headerAttrs: (column, colIndex) => ({ 'data-test': `customized data ${colIndex}` })
18 | }, {
19 | dataField: 'price',
20 | text: 'Product Price'
21 | }];
22 |
23 | const sourceCode = `\
24 | import BootstrapTable from 'react-bootstrap-table-next';
25 |
26 | const columns = [{
27 | dataField: 'id',
28 | text: 'Product ID',
29 | headerAttrs: { title: 'ID header column' }
30 | }, {
31 | dataField: 'name',
32 | text: 'Product Name',
33 | headerAttrs: (column, colIndex) => ({ 'data-test': \`customized data \${colIndex}\` })
34 | }, {
35 | dataField: 'price',
36 | text: 'Product Price'
37 | }];
38 |
39 |
40 | `;
41 |
42 | export default () => (
43 |
44 |
45 | { sourceCode }
46 |
47 | );
48 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID'
13 | }, {
14 | dataField: 'name',
15 | text: 'Product Name',
16 | headerClasses: 'demo-row-odd'
17 | }, {
18 | dataField: 'price',
19 | text: 'Product Price',
20 | headerClasses: (column, colIndex) => {
21 | if (colIndex % 2 === 0) return 'demo-row-even';
22 | return 'demo-row-odd';
23 | }
24 | }];
25 |
26 | const sourceCode = `\
27 | import BootstrapTable from 'react-bootstrap-table-next';
28 |
29 | const columns = [{
30 | dataField: 'id',
31 | text: 'Product ID'
32 | }, {
33 | dataField: 'name',
34 | text: 'Product Name',
35 | headerClasses: 'demo-row-odd'
36 | }, {
37 | dataField: 'price',
38 | text: 'Product Price',
39 | headerClasses: (column, colIndex) => {
40 | if (colIndex % 2 === 0) return 'demo-row-even';
41 | return 'demo-row-odd';
42 | }
43 | }];
44 |
45 |
46 | `;
47 |
48 | export default () => (
49 |
50 |
51 | { sourceCode }
52 |
53 | );
54 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | /* eslint no-alert: 0 */
3 | import React from 'react';
4 |
5 | import BootstrapTable from 'react-bootstrap-table-next';
6 | import Code from 'components/common/code-block';
7 | import { productsGenerator } from 'utils/common';
8 |
9 | const products = productsGenerator();
10 |
11 | const columns = [{
12 | dataField: 'id',
13 | text: 'Product ID',
14 | headerEvents: {
15 | onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
16 | }
17 | }, {
18 | dataField: 'name',
19 | text: 'Product Name'
20 | }, {
21 | dataField: 'price',
22 | text: 'Product Price'
23 | }];
24 |
25 | const sourceCode = `\
26 | import BootstrapTable from 'react-bootstrap-table-next';
27 |
28 | const columns = [{
29 | dataField: 'id',
30 | text: 'Product ID',
31 | headerEvents: {
32 | onClick: (e, column, columnIndex) => alert('Click on Product ID header column')
33 | }
34 | }, {
35 | dataField: 'name',
36 | text: 'Product Name'
37 | }, {
38 | dataField: 'price',
39 | text: 'Product Price'
40 | }];
41 |
42 |
43 | `;
44 |
45 | export default () => (
46 |
47 |
Try to Click on Product ID header column
48 |
49 | { sourceCode }
50 |
51 | );
52 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | function priceFormatter(column, colIndex) {
11 | return (
12 | $$ { column.text } $$
13 | );
14 | }
15 |
16 | const columns = [{
17 | dataField: 'id',
18 | text: 'Product ID'
19 | }, {
20 | dataField: 'name',
21 | text: 'Product Name'
22 | }, {
23 | dataField: 'price',
24 | text: 'Product Price',
25 | headerFormatter: priceFormatter
26 | }];
27 |
28 | const sourceCode = `\
29 | import BootstrapTable from 'react-bootstrap-table-next';
30 |
31 | function priceFormatter(column, colIndex) {
32 | return (
33 | $$ { column.text } $$
34 | );
35 | }
36 |
37 | const columns = [
38 | // omit...
39 | {
40 | dataField: 'price',
41 | text: 'Product Price',
42 | headerFormatter: priceFormatter
43 | }];
44 |
45 |
50 | `;
51 |
52 | export default () => (
53 |
54 |
59 | { sourceCode }
60 |
61 | );
62 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | headerTitle: true
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | headerTitle: (column, colIndex) => `this is custom title for ${column.text}`
18 | }, {
19 | dataField: 'price',
20 | text: 'Product Price'
21 | }];
22 |
23 | const sourceCode = `\
24 | import BootstrapTable from 'react-bootstrap-table-next';
25 |
26 | const columns = [{
27 | dataField: 'id',
28 | text: 'Product ID',
29 | headerTitle: true
30 | }, {
31 | dataField: 'name',
32 | text: 'Product Name',
33 | headerTitle: (column, colIndex) => \`this is custom title for \${column.text}\`
34 | }, {
35 | dataField: 'price',
36 | text: 'Product Price'
37 | }];
38 |
39 |
40 | `;
41 |
42 | export default () => (
43 |
44 |
45 | { sourceCode }
46 |
47 | );
48 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/header-columns/header-class-table.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 sourceCode = `\
21 | import BootstrapTable from 'react-bootstrap-table-next';
22 |
23 | const columns = [{
24 | dataField: 'id',
25 | text: 'Product ID'
26 | }, {
27 | dataField: 'name',
28 | text: 'Product Name'
29 | }, {
30 | dataField: 'price',
31 | text: 'Product Price'
32 | }];
33 |
34 |
40 | `;
41 |
42 | export default () => (
43 |
44 |
50 | { sourceCode }
51 |
52 | );
53 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/pagination/index.js:
--------------------------------------------------------------------------------
1 | /* eslint react/prefer-stateless-function: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import paginationFactory from 'react-bootstrap-table2-paginator';
6 | import Code from 'components/common/code-block';
7 | import { productsGenerator } from 'utils/common';
8 |
9 | const products = productsGenerator(87);
10 |
11 | const columns = [{
12 | dataField: 'id',
13 | text: 'Product ID'
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name'
17 | }, {
18 | dataField: 'price',
19 | text: 'Product Price'
20 | }];
21 |
22 | const sourceCode = `\
23 | import BootstrapTable from 'react-bootstrap-table-next';
24 | import paginationFactory from 'react-bootstrap-table2-paginator';
25 |
26 | const columns = [{
27 | dataField: 'id',
28 | text: 'Product ID'
29 | }, {
30 | dataField: 'name',
31 | text: 'Product Name'
32 | }, {
33 | dataField: 'price',
34 | text: 'Product Price'
35 | }];
36 |
37 |
38 | `;
39 |
40 | export default () => (
41 |
42 |
43 | { sourceCode }
44 |
45 | );
46 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'checkbox',
22 | clickToSelect: true
23 | };
24 |
25 | const sourceCode = `\
26 | import BootstrapTable from 'react-bootstrap-table-next';
27 |
28 | const columns = [{
29 | dataField: 'id',
30 | text: 'Product ID'
31 | }, {
32 | dataField: 'name',
33 | text: 'Product Name'
34 | }, {
35 | dataField: 'price',
36 | text: 'Product Price'
37 | }];
38 |
39 | const selectRow = {
40 | mode: 'checkbox',
41 | clickToSelect: true
42 | };
43 |
44 |
50 | `;
51 |
52 | export default () => (
53 |
54 |
55 | { sourceCode }
56 |
57 | );
58 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/default-select.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'checkbox',
22 | clickToSelect: true,
23 | selected: [1, 3]
24 | };
25 |
26 | const sourceCode = `\
27 | import BootstrapTable from 'react-bootstrap-table-next';
28 |
29 | const columns = [{
30 | dataField: 'id',
31 | text: 'Product ID'
32 | }, {
33 | dataField: 'name',
34 | text: 'Product Name'
35 | }, {
36 | dataField: 'price',
37 | text: 'Product Price'
38 | }];
39 |
40 | const selectRow = {
41 | mode: 'checkbox',
42 | clickToSelect: true,
43 | selected: [1, 3]
44 | };
45 |
46 |
52 | `;
53 |
54 | export default () => (
55 |
56 |
57 | { sourceCode }
58 |
59 | );
60 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'checkbox',
22 | clickToSelect: true,
23 | hideSelectAll: true
24 | };
25 |
26 | const sourceCode = `\
27 | import BootstrapTable from 'react-bootstrap-table-next';
28 |
29 | const columns = [{
30 | dataField: 'id',
31 | text: 'Product ID'
32 | }, {
33 | dataField: 'name',
34 | text: 'Product Name'
35 | }, {
36 | dataField: 'price',
37 | text: 'Product Price'
38 | }];
39 |
40 | const selectRow = {
41 | mode: 'checkbox',
42 | clickToSelect: true,
43 | hideSelectAll: true
44 | };
45 |
46 |
52 | `;
53 |
54 | export default () => (
55 |
56 |
57 | { sourceCode }
58 |
59 | );
60 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'checkbox',
22 | clickToSelect: true,
23 | hideSelectColumn: true,
24 | bgColor: '#00BFFF'
25 | };
26 |
27 | const sourceCode = `\
28 | import BootstrapTable from 'react-bootstrap-table-next';
29 |
30 | const columns = [{
31 | dataField: 'id',
32 | text: 'Product ID'
33 | }, {
34 | dataField: 'name',
35 | text: 'Product Name'
36 | }, {
37 | dataField: 'price',
38 | text: 'Product Price'
39 | }];
40 |
41 | const selectRow = {
42 | mode: 'checkbox',
43 | clickToSelect: true,
44 | hideSelectColumn: true,
45 | bgColor: '#00BFFF'
46 | };
47 |
48 |
54 | `;
55 |
56 | export default () => (
57 |
58 |
59 | { sourceCode }
60 |
61 | );
62 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'checkbox',
22 | clickToSelect: true
23 | };
24 |
25 | const sourceCode = `\
26 | import BootstrapTable from 'react-bootstrap-table-next';
27 |
28 | const columns = [{
29 | dataField: 'id',
30 | text: 'Product ID'
31 | }, {
32 | dataField: 'name',
33 | text: 'Product Name'
34 | }, {
35 | dataField: 'price',
36 | text: 'Product Price'
37 | }];
38 |
39 | const selectRow = {
40 | mode: 'checkbox',
41 | clickToSelect: true
42 | };
43 |
44 |
50 | `;
51 |
52 | export default () => (
53 |
54 |
55 | { sourceCode }
56 |
57 | );
58 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'checkbox',
22 | clickToSelect: true,
23 | nonSelectable: [0, 2, 4],
24 | nonSelectableClasses: 'row-index-bigger-than-2101'
25 | };
26 |
27 | const sourceCode = `\
28 | import BootstrapTable from 'react-bootstrap-table-next';
29 |
30 | const columns = [{
31 | dataField: 'id',
32 | text: 'Product ID'
33 | }, {
34 | dataField: 'name',
35 | text: 'Product Name'
36 | }, {
37 | dataField: 'price',
38 | text: 'Product Price'
39 | }];
40 |
41 | const selectRow = {
42 | mode: 'checkbox',
43 | clickToSelect: true,
44 | nonSelectable: [0, 2, 4],
45 | nonSelectableClasses: 'row-index-bigger-than-2101'
46 | };
47 |
48 |
54 | `;
55 |
56 | export default () => (
57 |
58 |
59 | { sourceCode }
60 |
61 | );
62 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'checkbox',
22 | clickToSelect: true,
23 | nonSelectable: [0, 2, 4],
24 | nonSelectableStyle: { backgroundColor: 'gray' }
25 | };
26 |
27 | const sourceCode = `\
28 | import BootstrapTable from 'react-bootstrap-table-next';
29 |
30 | const columns = [{
31 | dataField: 'id',
32 | text: 'Product ID'
33 | }, {
34 | dataField: 'name',
35 | text: 'Product Name'
36 | }, {
37 | dataField: 'price',
38 | text: 'Product Price'
39 | }];
40 |
41 | const selectRow = {
42 | mode: 'checkbox',
43 | clickToSelect: true,
44 | nonSelectable: [0, 2, 4],
45 | nonSelectableStyle: { backgroundColor: 'gray' }
46 | };
47 |
48 |
54 | `;
55 |
56 | export default () => (
57 |
58 |
59 | { sourceCode }
60 |
61 | );
62 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'checkbox',
22 | clickToSelect: true,
23 | nonSelectable: [0, 2, 4]
24 | };
25 |
26 | const sourceCode = `\
27 | import BootstrapTable from 'react-bootstrap-table-next';
28 |
29 | const columns = [{
30 | dataField: 'id',
31 | text: 'Product ID'
32 | }, {
33 | dataField: 'name',
34 | text: 'Product Name'
35 | }, {
36 | dataField: 'price',
37 | text: 'Product Price'
38 | }];
39 |
40 | const selectRow = {
41 | mode: 'checkbox',
42 | clickToSelect: true,
43 | nonSelectable: [0, 2, 4]
44 | };
45 |
46 |
52 | `;
53 |
54 | export default () => (
55 |
56 |
57 | { sourceCode }
58 |
59 | );
60 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/selection-column-position.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'checkbox',
22 | clickToSelect: true,
23 | selectColumnPosition: 'right'
24 | };
25 |
26 | const sourceCode = `\
27 | import BootstrapTable from 'react-bootstrap-table-next';
28 |
29 | const columns = [{
30 | dataField: 'id',
31 | text: 'Product ID'
32 | }, {
33 | dataField: 'name',
34 | text: 'Product Name'
35 | }, {
36 | dataField: 'price',
37 | text: 'Product Price'
38 | }];
39 |
40 | const selectRow = {
41 | mode: 'checkbox',
42 | clickToSelect: true,
43 | selectColumnPosition: 'right'
44 | };
45 |
46 |
52 | `;
53 |
54 | export default () => (
55 |
56 |
57 | { sourceCode }
58 |
59 | );
60 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/selection-no-data.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 |
7 | const columns = [{
8 | dataField: 'id',
9 | text: 'Product ID'
10 | }, {
11 | dataField: 'name',
12 | text: 'Product Name'
13 | }, {
14 | dataField: 'price',
15 | text: 'Product Price'
16 | }];
17 |
18 | const selectRow1 = {
19 | mode: 'checkbox',
20 | clickToSelect: true
21 | };
22 |
23 | const sourceCode1 = `\
24 | import BootstrapTable from 'react-bootstrap-table-next';
25 |
26 | const columns = [{
27 | dataField: 'id',
28 | text: 'Product ID'
29 | }, {
30 | dataField: 'name',
31 | text: 'Product Name'
32 | }, {
33 | dataField: 'price',
34 | text: 'Product Price'
35 | }];
36 |
37 | const selectRow = {
38 | mode: 'checkbox',
39 | clickToSelect: true
40 | };
41 |
42 |
49 | `;
50 |
51 | export default () => (
52 |
53 |
60 | { sourceCode1 }
61 |
62 | );
63 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
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 selectRow = {
21 | mode: 'radio',
22 | clickToSelect: true
23 | };
24 |
25 | const sourceCode = `\
26 | import BootstrapTable from 'react-bootstrap-table-next';
27 |
28 | const columns = [{
29 | dataField: 'id',
30 | text: 'Product ID'
31 | }, {
32 | dataField: 'name',
33 | text: 'Product Name'
34 | }, {
35 | dataField: 'price',
36 | text: 'Product Price'
37 | }];
38 |
39 | const selectRow = {
40 | mode: 'radio',
41 | clickToSelect: true
42 | };
43 |
44 |
50 | `;
51 |
52 | export default () => (
53 |
54 |
55 | { sourceCode }
56 |
57 | );
58 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/rows/row-hidden.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | /* eslint no-console: 0 */
3 | import React from 'react';
4 |
5 | import BootstrapTable from 'react-bootstrap-table-next';
6 | import Code from 'components/common/code-block';
7 | import { productsGenerator } from 'utils/common';
8 |
9 | const products = productsGenerator();
10 |
11 | const columns = [{
12 | dataField: 'id',
13 | text: 'Product ID'
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name'
17 | }, {
18 | dataField: 'price',
19 | text: 'Product Price'
20 | }];
21 |
22 | const rowEvents = {
23 | onClick: (e, row, rowIndex) => {
24 | console.log(`clicked on row with index: ${rowIndex}`);
25 | },
26 | onMouseEnter: (e, row, rowIndex) => {
27 | console.log(`enter on row with index: ${rowIndex}`);
28 | }
29 | };
30 |
31 | const sourceCode = `\
32 | import BootstrapTable from 'react-bootstrap-table-next';
33 |
34 | const columns = [{
35 | dataField: 'id',
36 | text: 'Product ID'
37 | }, {
38 | dataField: 'name',
39 | text: 'Product Name'
40 | }, {
41 | dataField: 'price',
42 | text: 'Product Price'
43 | }];
44 |
45 | const hiddenRowKeys = [1, 3];
46 |
47 |
48 | `;
49 |
50 | const hiddenRowKeys = [1, 3];
51 |
52 | export default () => (
53 |
54 |
55 | { sourceCode }
56 |
57 | );
58 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 |
3 | import React from 'react';
4 |
5 | import BootstrapTable from 'react-bootstrap-table-next';
6 | import Code from 'components/common/code-block';
7 | import { productsGenerator } from 'utils/common';
8 |
9 | const products = productsGenerator();
10 |
11 | const columns = [{
12 | dataField: 'id',
13 | text: 'Product ID',
14 | sort: true,
15 | // here, we implement a custom sort which perform a reverse sorting
16 | sortFunc: (a, b, order, dataField) => {
17 | if (order === 'asc') {
18 | return b - a;
19 | }
20 | return a - b; // desc
21 | }
22 | }, {
23 | dataField: 'name',
24 | text: 'Product Name',
25 | sort: true
26 | }, {
27 | dataField: 'price',
28 | text: 'Product Price'
29 | }];
30 |
31 | const sourceCode = `\
32 | import BootstrapTable from 'react-bootstrap-table-next';
33 |
34 | const columns = [{
35 | dataField: 'id',
36 | text: 'Product ID',
37 | sort: true,
38 | // here, we implement a custom sort which perform a reverse sorting
39 | sortFunc: (a, b, order, dataField) => {
40 | if (order === 'asc') {
41 | return b - a;
42 | }
43 | return a - b; // desc
44 | }
45 | }, {
46 | dataField: 'name',
47 | text: 'Product Name',
48 | sort: true
49 | }, {
50 | dataField: 'price',
51 | text: 'Product Price'
52 | }];
53 |
54 |
55 | `;
56 |
57 | export default () => (
58 |
59 |
Product ID sorting is reverted
60 |
61 | { sourceCode }
62 |
63 | );
64 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/sort/default-sort-direction.js:
--------------------------------------------------------------------------------
1 | /* eslint react/prefer-stateless-function: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | sort: true
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | sort: true
18 | }, {
19 | dataField: 'price',
20 | text: 'Product Price',
21 | sort: true
22 | }];
23 |
24 |
25 | const sourceCode = `\
26 | import BootstrapTable from 'react-bootstrap-table-next';
27 |
28 | const columns = [{
29 | dataField: 'id',
30 | text: 'Product ID',
31 | sort: true
32 | }, {
33 | dataField: 'name',
34 | text: 'Product Name',
35 | sort: true
36 | }, {
37 | dataField: 'price',
38 | text: 'Product Price',
39 | sort: true
40 | }];
41 |
42 | const defaultSorted = [{
43 | dataField: 'name',
44 | order: 'desc'
45 | }];
46 |
47 |
53 | `;
54 |
55 |
56 | class DefaultSortDirectionTable extends React.PureComponent {
57 | render() {
58 | return (
59 |
60 |
61 | { sourceCode }
62 |
63 | );
64 | }
65 | }
66 |
67 | export default DefaultSortDirectionTable;
68 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js:
--------------------------------------------------------------------------------
1 | /* eslint react/prefer-stateless-function: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | sort: true
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | sort: true
18 | }, {
19 | dataField: 'price',
20 | text: 'Product Price',
21 | sort: true
22 | }];
23 |
24 | const defaultSorted = [{
25 | dataField: 'name',
26 | order: 'desc'
27 | }];
28 |
29 | const sourceCode = `\
30 | import BootstrapTable from 'react-bootstrap-table-next';
31 |
32 | const columns = [{
33 | dataField: 'id',
34 | text: 'Product ID',
35 | sort: true
36 | }, {
37 | dataField: 'name',
38 | text: 'Product Name',
39 | sort: true
40 | }, {
41 | dataField: 'price',
42 | text: 'Product Price',
43 | sort: true
44 | }];
45 |
46 | const defaultSorted = [{
47 | dataField: 'name',
48 | order: 'desc'
49 | }];
50 |
51 |
57 | `;
58 |
59 |
60 | class DefaultSortTable extends React.PureComponent {
61 | render() {
62 | return (
63 |
64 |
65 | { sourceCode }
66 |
67 | );
68 | }
69 | }
70 |
71 | export default DefaultSortTable;
72 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import BootstrapTable from 'react-bootstrap-table-next';
4 | import Code from 'components/common/code-block';
5 | import { productsGenerator } from 'utils/common';
6 |
7 | const products = productsGenerator();
8 |
9 | const columns = [{
10 | dataField: 'id',
11 | text: 'Product ID',
12 | sort: true
13 | }, {
14 | dataField: 'name',
15 | text: 'Product Name',
16 | sort: true
17 | }, {
18 | dataField: 'price',
19 | text: 'Product Price'
20 | }];
21 |
22 | const sourceCode = `\
23 | import BootstrapTable from 'react-bootstrap-table-next';
24 |
25 | const columns = [{
26 | dataField: 'id',
27 | text: 'Product ID',
28 | sort: true
29 | }, {
30 | dataField: 'name',
31 | text: 'Product Name',
32 | sort: true
33 | }, {
34 | dataField: 'price',
35 | text: 'Product Price'
36 | }];
37 |
38 |
39 | `;
40 |
41 | export default class Test extends React.Component {
42 | constructor(props) {
43 | super(props);
44 | this.state = { data: products };
45 | }
46 |
47 | handleClick = () => {
48 | this.setState(() => {
49 | const newProducts = productsGenerator(21);
50 | return {
51 | data: newProducts
52 | };
53 | });
54 | }
55 |
56 | render() {
57 | return (
58 |
59 |
60 |
61 | { sourceCode }
62 |
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js:
--------------------------------------------------------------------------------
1 | /* eslint
2 | no-unused-vars: 0
3 | arrow-body-style: 0
4 | */
5 |
6 | import React from 'react';
7 |
8 | import BootstrapTable from 'react-bootstrap-table-next';
9 | import Code from 'components/common/code-block';
10 | import { productsGenerator } from 'utils/common';
11 |
12 | const products = productsGenerator();
13 |
14 | const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
15 | sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
16 | );
17 |
18 | const columns = [{
19 | dataField: 'id',
20 | text: 'Product ID',
21 | sort: true,
22 | headerSortingClasses
23 | }, {
24 | dataField: 'name',
25 | text: 'Product Name',
26 | sort: true,
27 | headerSortingClasses
28 | }, {
29 | dataField: 'price',
30 | text: 'Product Price'
31 | }];
32 |
33 | const sourceCode = `\
34 | import BootstrapTable from 'react-bootstrap-table-next';
35 |
36 | const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
37 | sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
38 | );
39 |
40 | const columns = [{
41 | dataField: 'id',
42 | text: 'Product ID',
43 | sort: true,
44 | headerSortingClasses
45 | }, {
46 | dataField: 'name',
47 | text: 'Product Name',
48 | sort: true,
49 | headerSortingClasses
50 | }, {
51 | dataField: 'price',
52 | text: 'Product Price'
53 | }];
54 |
55 |
56 | `;
57 |
58 | export default () => (
59 |
60 |
61 | { sourceCode }
62 |
63 | );
64 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const headerSortingStyle = { backgroundColor: '#c8e6c9' };
11 |
12 | const columns = [{
13 | dataField: 'id',
14 | text: 'Product ID',
15 | sort: true,
16 | headerSortingStyle
17 | }, {
18 | dataField: 'name',
19 | text: 'Product Name',
20 | sort: true,
21 | headerSortingStyle
22 | }, {
23 | dataField: 'price',
24 | text: 'Product Price'
25 | }];
26 |
27 |
28 | const sourceCode = `\
29 | import BootstrapTable from 'react-bootstrap-table-next';
30 |
31 | const headerSortingStyle = { backgroundColor: '#c8e6c9' };
32 |
33 | const columns = [{
34 | dataField: 'id',
35 | text: 'Product ID',
36 | sort: true,
37 | headerSortingStyle
38 | }, {
39 | dataField: 'name',
40 | text: 'Product Name',
41 | sort: true,
42 | headerSortingStyle
43 | }, {
44 | dataField: 'price',
45 | text: 'Product Price'
46 | }];
47 |
48 |
49 | `;
50 |
51 | export default () => (
52 |
53 |
54 | { sourceCode }
55 |
56 | );
57 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/examples/sort/sort-events.js:
--------------------------------------------------------------------------------
1 | /* eslint no-console: 0 */
2 | import React from 'react';
3 |
4 | import BootstrapTable from 'react-bootstrap-table-next';
5 | import Code from 'components/common/code-block';
6 | import { productsGenerator } from 'utils/common';
7 |
8 | const products = productsGenerator();
9 |
10 | const columns = [{
11 | dataField: 'id',
12 | text: 'Product ID',
13 | sort: true
14 | }, {
15 | dataField: 'name',
16 | text: 'Product Name',
17 | sort: true,
18 | onSort: (field, order) => {
19 | console.log(`Sort Field: ${field}, Sort Order: ${order}`);
20 | }
21 | }, {
22 | dataField: 'price',
23 | text: 'Product Price'
24 | }];
25 |
26 | const defaultSorted = [{
27 | dataField: 'name',
28 | order: 'desc'
29 | }];
30 |
31 | const sourceCode = `\
32 | import BootstrapTable from 'react-bootstrap-table-next';
33 |
34 | const columns = [{
35 | dataField: 'id',
36 | text: 'Product ID',
37 | sort: true
38 | }, {
39 | dataField: 'name',
40 | text: 'Product Name',
41 | sort: true,
42 | onSort: (field, order) => {
43 | console.log(....);
44 | }
45 | }, {
46 | dataField: 'price',
47 | text: 'Product Price'
48 | }];
49 |
50 |
51 | `;
52 |
53 | export default () => (
54 |
55 |
56 | { sourceCode }
57 |
58 | );
59 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-bootstrap-table2-example",
3 | "version": "1.0.41",
4 | "description": "",
5 | "main": "index.js",
6 | "private": true,
7 | "scripts": {
8 | "test": "echo \"Error: no test specified\" && exit 1",
9 | "storybook": "start-storybook -p 6006 -s ./public",
10 | "gh-pages:clean": "rimraf ./storybook-static",
11 | "gh-pages:build": "build-storybook -s ./public"
12 | },
13 | "author": "",
14 | "license": "ISC",
15 | "peerDependencies": {
16 | "prop-types": "^15.0.0",
17 | "react": "^16.3.0",
18 | "react-dom": "^16.3.0"
19 | },
20 | "devDependencies": {
21 | "@storybook/addon-console": "^1.0.0",
22 | "@storybook/react": "^3.2.8",
23 | "babel-plugin-transform-class-properties": "6.24.1",
24 | "babel-preset-env": "^1.6.1",
25 | "react-redux": "^5.0.6",
26 | "redux": "^3.7.2",
27 | "redux-thunk": "^2.2.0",
28 | "typed.js": "^2.0.5"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-bootstrap-table/react-bootstrap-table2/ef22dc47ebeb985b28980001f806eeb01a687973/packages/react-bootstrap-table2-example/public/favicon.ico
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/public/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-bootstrap-table/react-bootstrap-table2/ef22dc47ebeb985b28980001f806eeb01a687973/packages/react-bootstrap-table2-example/public/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/public/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-bootstrap-table/react-bootstrap-table2/ef22dc47ebeb985b28980001f806eeb01a687973/packages/react-bootstrap-table2-example/public/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/public/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-bootstrap-table/react-bootstrap-table2/ef22dc47ebeb985b28980001f806eeb01a687973/packages/react-bootstrap-table2-example/public/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/public/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-bootstrap-table/react-bootstrap-table2/ef22dc47ebeb985b28980001f806eeb01a687973/packages/react-bootstrap-table2-example/public/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/public/images/logo-color-square.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-example/src/components/common/code-block.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export default class extends Component {
5 | static propTypes = {
6 | children: PropTypes.string
7 | }
8 | static defaultProps = {
9 | children: ''
10 | }
11 | componentDidMount() {
12 | // code-prettify
13 | // run the PR.prettyPrint() function once your page has finished loading
14 | if (typeof (PR) !== 'undefined') PR.prettyPrint(); // eslint-disable-line no-undef
15 | }
16 |
17 | render() {
18 | return (
19 |
20 |
21 | { this.props.children }
22 |
23 |
8 | {
9 | props.pages.map((pageProps) => {
10 | if (props.pageButtonRenderer) {
11 | return props.pageButtonRenderer({
12 | ...pageProps,
13 | onPageChange: props.onPageChange
14 | });
15 | }
16 | return (
17 |
22 | );
23 | })
24 | }
25 |
26 | );
27 |
28 | PaginatonList.propTypes = {
29 | pages: PropTypes.arrayOf(PropTypes.shape({
30 | page: PropTypes.oneOfType([
31 | PropTypes.node,
32 | PropTypes.number,
33 | PropTypes.string
34 | ]),
35 | active: PropTypes.bool,
36 | disable: PropTypes.bool,
37 | title: PropTypes.string
38 | })).isRequired,
39 | onPageChange: PropTypes.func.isRequired,
40 | pageButtonRenderer: PropTypes.func
41 | };
42 |
43 | PaginatonList.defaultProps = {
44 | pageButtonRenderer: null
45 | };
46 |
47 | export default PaginatonList;
48 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/src/pagination-total-adapter.js:
--------------------------------------------------------------------------------
1 | /* eslint react/prop-types: 0 */
2 | import React, { Component } from 'react';
3 |
4 | import pageResolver from './page-resolver';
5 | import PaginationTotal from './pagination-total';
6 |
7 | const paginationTotalAdapter = WrappedComponent =>
8 | class PaginationTotalAdapter extends pageResolver(Component) {
9 | render() {
10 | const [from, to] = this.calculateFromTo();
11 | return (
12 |
18 | );
19 | }
20 | };
21 |
22 |
23 | export const PaginationTotalWithAdapter = paginationTotalAdapter(PaginationTotal);
24 | export default paginationTotalAdapter;
25 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/src/pagination-total-standalone.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PaginationTotal from './pagination-total';
3 | import standaloneAdapter from './standalone-adapter';
4 | import paginationTotalAdapter from './pagination-total-adapter';
5 |
6 | const PaginationTotalStandalone = props => (
7 |
8 | );
9 |
10 | export default
11 | standaloneAdapter(paginationTotalAdapter(PaginationTotalStandalone));
12 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/src/pagination-total.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const PaginationTotal = (props) => {
5 | if (props.paginationTotalRenderer) {
6 | return props.paginationTotalRenderer(props.from, props.to, props.dataSize);
7 | }
8 | return (
9 |
10 | Showing rows { props.from } to { props.to } of { props.dataSize }
11 |
12 | );
13 | };
14 |
15 | PaginationTotal.propTypes = {
16 | from: PropTypes.number.isRequired,
17 | to: PropTypes.number.isRequired,
18 | dataSize: PropTypes.number.isRequired,
19 | paginationTotalRenderer: PropTypes.func
20 | };
21 |
22 | PaginationTotal.defaultProps = {
23 | paginationTotalRenderer: undefined
24 | };
25 |
26 | export default PaginationTotal;
27 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-standalone.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SizePerPageDropdown from './size-per-page-dropdown';
3 | import standaloneAdapter from './standalone-adapter';
4 | import paginationHandler from './pagination-handler';
5 | import sizePerPageDropdownAdapter from './size-per-page-dropdown-adapter';
6 |
7 | const SizePerPageDropdownStandalone = props => (
8 |
9 | );
10 |
11 | export default
12 | standaloneAdapter(paginationHandler(sizePerPageDropdownAdapter(SizePerPageDropdownStandalone)));
13 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js:
--------------------------------------------------------------------------------
1 | /* eslint jsx-a11y/href-no-hash: 0 */
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | const SizePerPageOption = ({
6 | text,
7 | page,
8 | onSizePerPageChange,
9 | bootstrap4
10 | }) => (bootstrap4 ? (
11 | {
18 | e.preventDefault();
19 | onSizePerPageChange(page);
20 | } }
21 | >
22 | { text }
23 |
24 | ) : (
25 |
30 | {
36 | e.preventDefault();
37 | onSizePerPageChange(page);
38 | } }
39 | >
40 | { text }
41 |
42 |
43 | ));
44 |
45 | SizePerPageOption.propTypes = {
46 | text: PropTypes.string.isRequired,
47 | page: PropTypes.number.isRequired,
48 | onSizePerPageChange: PropTypes.func.isRequired,
49 | bootstrap4: PropTypes.bool
50 | };
51 |
52 | SizePerPageOption.defaultProps = {
53 | bootstrap4: false
54 | };
55 |
56 | export default SizePerPageOption;
57 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/src/standalone-adapter.js:
--------------------------------------------------------------------------------
1 | /* eslint react/prop-types: 0 */
2 | import React from 'react';
3 |
4 | export default WrappedComponent => ({
5 | page,
6 | sizePerPage,
7 | ...rest
8 | }) => (
9 |
14 | );
15 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss:
--------------------------------------------------------------------------------
1 | .react-bootstrap-table-page-btns-ul {
2 | float: right;
3 | margin-top: 0px !important;
4 | }
5 |
6 | .react-bootstrap-table-pagination-list-hidden {
7 | display: none;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/test/pagination-list-adapter.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import paginationListAdapter from '../src/pagination-list-adapter';
4 |
5 |
6 | const MockComponent = () => null;
7 |
8 | const PaginationListAdapter = paginationListAdapter(MockComponent);
9 | describe('paginationListAdapter', () => {
10 | let wrapper;
11 |
12 | const props = {
13 | totalPages: 10,
14 | lastPage: 10,
15 | pageButtonRenderer: jest.fn(),
16 | onPageChange: jest.fn()
17 | };
18 |
19 | describe('render', () => {
20 | beforeEach(() => {
21 | wrapper = shallow();
22 | });
23 |
24 | it('should render successfully', () => {
25 | const mockComponent = wrapper.find(MockComponent);
26 | expect(mockComponent).toHaveLength(1);
27 | expect(mockComponent.props().pages).toBeDefined();
28 | expect(mockComponent.props().pageButtonRenderer).toBeDefined();
29 | expect(mockComponent.props().onPageChange).toBeDefined();
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/test/pagination-total-adapter.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import paginationTotalAdapter from '../src/pagination-total-adapter';
4 |
5 |
6 | const MockComponent = () => null;
7 |
8 | const PaginationTotalAdapter = paginationTotalAdapter(MockComponent);
9 |
10 | describe('paginationTotalAdapter', () => {
11 | let wrapper;
12 |
13 | const props = {
14 | dataSize: 20,
15 | currPage: 1,
16 | currSizePerPage: 10,
17 | paginationTotalRenderer: jest.fn()
18 | };
19 |
20 | describe('render', () => {
21 | beforeEach(() => {
22 | wrapper = shallow();
23 | });
24 |
25 | it('should render successfully', () => {
26 | const mockComponent = wrapper.find(MockComponent);
27 | expect(mockComponent).toHaveLength(1);
28 | expect(mockComponent.props().from).toBeDefined();
29 | expect(mockComponent.props().to).toBeDefined();
30 | expect(mockComponent.props().dataSize).toEqual(props.dataSize);
31 | expect(mockComponent.props().paginationTotalRenderer).toEqual(props.paginationTotalRenderer);
32 | });
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-paginator/test/standalone-adapter.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import standaloneAdapter from '../src/standalone-adapter';
4 |
5 |
6 | const MockStandalone = () => null;
7 |
8 | const MockStandaloneWithAdapter = standaloneAdapter(MockStandalone);
9 | describe('standaloneAdapter', () => {
10 | let wrapper;
11 |
12 | const props = {
13 | page: 2,
14 | sizePerPage: 10,
15 | name1: 'A',
16 | name2: 'B'
17 | };
18 | describe('render', () => {
19 | beforeEach(() => {
20 | wrapper = shallow();
21 | });
22 |
23 | it('should render successfully', () => {
24 | expect(wrapper.find(MockStandalone)).toHaveLength(1);
25 | });
26 |
27 | it('should convert props.page as currPage to child component', () => {
28 | const mockStandalone = wrapper.find(MockStandalone);
29 | expect(mockStandalone.props().currPage).toEqual(props.page);
30 | });
31 |
32 | it('should convert props.sizePerPage as currSizePerPage to child component', () => {
33 | const mockStandalone = wrapper.find(MockStandalone);
34 | expect(mockStandalone.props().currSizePerPage).toEqual(props.sizePerPage);
35 | });
36 |
37 | it('should just pass remain props to child component', () => {
38 | const mockStandalone = wrapper.find(MockStandalone);
39 | const { page, sizePerPage, ...origin } = props;
40 | const { currPage, currSizePerPage, ...rest } = mockStandalone.props();
41 | expect(rest).toEqual(origin);
42 | });
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/index.js:
--------------------------------------------------------------------------------
1 | import Context from './context';
2 | import ToolkitProvider from './provider';
3 |
4 | export default ToolkitProvider;
5 | export const ToolkitContext = Context;
6 | export { default as Search } from './src/search';
7 | export { default as CSVExport } from './src/csv';
8 | export { default as ColumnToggle } from './src/column-toggle';
9 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-bootstrap-table2-toolkit",
3 | "version": "2.1.3",
4 | "description": "The toolkit for react-bootstrap-table2",
5 | "main": "./lib/index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
9 | },
10 | "scripts": {
11 | "test": "echo \"Error: no test specified\" && exit 1"
12 | },
13 | "files": [
14 | "lib/",
15 | "dist/"
16 | ],
17 | "tags": [
18 | "react"
19 | ],
20 | "author": "AllenFang",
21 | "license": "MIT",
22 | "keywords": [
23 | "react",
24 | "bootstrap",
25 | "table",
26 | "grid",
27 | "react-bootstrap-table-addons",
28 | "react-component"
29 | ],
30 | "contributors": [
31 | {
32 | "name": "Allen Fang",
33 | "email": "ayu780129@hotmail.com",
34 | "url": "https://github.com/AllenFang"
35 | },
36 | {
37 | "name": "Chun-MingChen",
38 | "email": "nick830314@gmail.com",
39 | "url": "https://github.com/Chun-MingChen"
40 | }
41 | ],
42 | "peerDependencies": {
43 | "prop-types": "^15.0.0",
44 | "react": "^16.3.0",
45 | "react-dom": "^16.3.0"
46 | },
47 | "dependencies": {
48 | "file-saver": "2.0.2"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/provider.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import ToolkitContext from './context';
4 |
5 | const Toolkitprovider = props => (
6 |
7 |
8 | {
9 | tookKitProps => props.children(tookKitProps)
10 | }
11 |
12 |
13 | );
14 |
15 | Toolkitprovider.propTypes = {
16 | children: PropTypes.func.isRequired
17 | };
18 |
19 | export default Toolkitprovider;
20 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/src/column-toggle/index.js:
--------------------------------------------------------------------------------
1 | import ToggleList from './toggle-list';
2 |
3 | export default { ToggleList };
4 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/src/column-toggle/toggle-list.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const ToggleList = ({
5 | columns,
6 | onColumnToggle,
7 | toggles,
8 | contextual,
9 | className,
10 | btnClassName
11 | }) => (
12 |
13 | {
14 | columns
15 | .map(column => ({
16 | ...column,
17 | toggle: toggles[column.dataField]
18 | }))
19 | .map(column => (
20 |
30 | ))
31 | }
32 |
33 | );
34 |
35 | ToggleList.propTypes = {
36 | columns: PropTypes.array.isRequired,
37 | toggles: PropTypes.object.isRequired,
38 | onColumnToggle: PropTypes.func.isRequired,
39 | btnClassName: PropTypes.string,
40 | className: PropTypes.string,
41 | contextual: PropTypes.string
42 | };
43 |
44 | ToggleList.defaultProps = {
45 | btnClassName: '',
46 | className: '',
47 | contextual: 'primary'
48 | };
49 |
50 | export default ToggleList;
51 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/src/csv/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const ExportCSVButton = (props) => {
5 | const {
6 | onExport,
7 | children,
8 | className,
9 | ...rest
10 | } = props;
11 |
12 | return (
13 |
21 | );
22 | };
23 |
24 | ExportCSVButton.propTypes = {
25 | children: PropTypes.node.isRequired,
26 | onExport: PropTypes.func.isRequired,
27 | className: PropTypes.string,
28 | style: PropTypes.object
29 | };
30 | ExportCSVButton.defaultProps = {
31 | className: '',
32 | style: {}
33 | };
34 |
35 | export default ExportCSVButton;
36 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/src/csv/index.js:
--------------------------------------------------------------------------------
1 | import ExportCSVButton from './button';
2 |
3 | export default { ExportCSVButton };
4 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/src/op/index.js:
--------------------------------------------------------------------------------
1 | import csvOperation from './csv';
2 |
3 | export default {
4 | csvOperation
5 | };
6 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/src/search/clear-button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const ClearButton = ({
5 | onClear,
6 | text,
7 | className
8 | }) => (
9 |
10 | );
11 |
12 | ClearButton.propTypes = {
13 | onClear: PropTypes.func.isRequired,
14 | className: PropTypes.string,
15 | text: PropTypes.string
16 | };
17 |
18 | ClearButton.defaultProps = {
19 | text: 'Clear',
20 | className: ''
21 | };
22 |
23 | export default ClearButton;
24 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/src/search/index.js:
--------------------------------------------------------------------------------
1 | import SearchBar from './SearchBar';
2 | import ClearSearchButton from './clear-button';
3 |
4 | export default { SearchBar, ClearSearchButton };
5 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/statelessOp.js:
--------------------------------------------------------------------------------
1 | import Operation from './src/op';
2 |
3 | export default Base =>
4 | class StatelessOperation extends Operation.csvOperation(Base) {
5 | registerExposedAPI = (tableExposedAPIEmitter) => {
6 | this.tableExposedAPIEmitter = tableExposedAPIEmitter;
7 | }
8 | };
9 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss:
--------------------------------------------------------------------------------
1 | .search-label {
2 | display: block !important;
3 | }
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2-toolkit/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | file-saver@2.0.2:
6 | version "2.0.2"
7 | resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.2.tgz#06d6e728a9ea2df2cce2f8d9e84dfcdc338ec17a"
8 | integrity sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==
9 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/README.md:
--------------------------------------------------------------------------------
1 | # react-bootstrap-table-next
2 | Next generation of [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table)
3 |
4 | ## Usage
5 |
6 | ### Installation
7 |
8 | ```sh
9 | npm install react-bootstrap-table-next --save
10 | ```
11 |
12 | ### Include CSS
13 |
14 | > react-bootstrap-table2 need you to add bootstrap css in your application firstly. About bootstrap css, we only compatible with bootstrap 3 but will start to compatible for bootstrap 4 on v0.2.0
15 |
16 | ```js
17 | // es5
18 | require('react-bootstrap-table-next/dist/react-bootstrap-table2.min.css');
19 |
20 | // es6
21 | import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
22 | ```
23 |
24 | ### Your First Table
25 |
26 | ```js
27 | import BootstrapTable from 'react-bootstrap-table-next';
28 |
29 | const products = [ ... ];
30 | const columns = [{
31 | dataField: 'id',
32 | text: 'Product ID'
33 | }, {
34 | dataField: 'name',
35 | text: 'Product Name'
36 | }, {
37 | dataField: 'price',
38 | text: 'Product Price'
39 | }];
40 |
41 | export default () =>
42 |
43 | ```
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/index.js:
--------------------------------------------------------------------------------
1 | import BootstrapTable from './src/bootstrap-table';
2 | import withContext from './src/contexts';
3 |
4 | export default withContext(BootstrapTable);
5 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-bootstrap-table-next",
3 | "version": "4.0.3",
4 | "description": "Next generation of react-bootstrap-table",
5 | "main": "./lib/index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
9 | },
10 | "license": "MIT",
11 | "keywords": [
12 | "react",
13 | "bootstrap",
14 | "table",
15 | "grid",
16 | "react-component"
17 | ],
18 | "files": [
19 | "lib/",
20 | "dist/"
21 | ],
22 | "tags": [
23 | "react"
24 | ],
25 | "author": "AllenFang",
26 | "contributors": [
27 | {
28 | "name": "Allen Fang",
29 | "email": "ayu780129@hotmail.com",
30 | "url": "https://github.com/AllenFang"
31 | },
32 | {
33 | "name": "Chun-MingChen",
34 | "email": "nick830314@gmail.com",
35 | "url": "https://github.com/Chun-MingChen"
36 | }
37 | ],
38 | "dependencies": {
39 | "classnames": "^2.2.5",
40 | "react-transition-group": "^4.2.0",
41 | "underscore": "1.9.1"
42 | },
43 | "peerDependencies": {
44 | "classnames": "^2.2.5",
45 | "prop-types": "^15.0.0",
46 | "react": "^16.3.0",
47 | "react-dom": "^16.3.0"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/caption.js:
--------------------------------------------------------------------------------
1 | /* eslint react/require-default-props: 0 */
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | const Caption = (props) => {
6 | if (!props.children) return null;
7 |
8 | const caption = props.bootstrap4 ? (
9 | {props.children}
10 | ) : (
11 | {props.children}
12 | );
13 |
14 | return caption;
15 | };
16 |
17 | Caption.propTypes = {
18 | children: PropTypes.oneOfType([
19 | PropTypes.node,
20 | PropTypes.string
21 | ]),
22 | bootstrap4: PropTypes.bool
23 | };
24 |
25 | export default Caption;
26 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/cell-event-delegater.js:
--------------------------------------------------------------------------------
1 | import _ from './utils';
2 |
3 | const events = [
4 | 'onClick',
5 | 'onDoubleClick',
6 | 'onMouseEnter',
7 | 'onMouseLeave',
8 | 'onContextMenu',
9 | 'onAuxClick'
10 | ];
11 |
12 | export default ExtendBase =>
13 | class CellEventDelegater extends ExtendBase {
14 | constructor(props) {
15 | super(props);
16 | this.createDefaultEventHandler = this.createDefaultEventHandler.bind(this);
17 | }
18 |
19 | createDefaultEventHandler(cb) {
20 | return (e) => {
21 | const { column, columnIndex, index } = this.props;
22 | cb(e, column, typeof columnIndex !== 'undefined' ? columnIndex : index);
23 | };
24 | }
25 |
26 | delegate(attrs = {}) {
27 | const newAttrs = { ...attrs };
28 | Object.keys(attrs).forEach((attr) => {
29 | if (_.contains(events, attr)) {
30 | newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
31 | }
32 | });
33 | return newAttrs;
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/const.js:
--------------------------------------------------------------------------------
1 | export default {
2 | SORT_ASC: 'asc',
3 | SORT_DESC: 'desc',
4 | ROW_SELECT_SINGLE: 'radio',
5 | ROW_SELECT_MULTIPLE: 'checkbox',
6 | ROW_SELECT_DISABLED: 'ROW_SELECT_DISABLED',
7 | CHECKBOX_STATUS_CHECKED: 'checked',
8 | CHECKBOX_STATUS_INDETERMINATE: 'indeterminate',
9 | CHECKBOX_STATUS_UNCHECKED: 'unchecked',
10 | INDICATOR_POSITION_LEFT: 'left',
11 | INDICATOR_POSITION_RIGHT: 'right',
12 | TYPE_STRING: 'string',
13 | TYPE_NUMBER: 'number',
14 | TYPE_BOOLEAN: 'bool',
15 | TYPE_DATE: 'date',
16 | FILTERS_POSITION_INLINE: 'inline',
17 | FILTERS_POSITION_TOP: 'top',
18 | FILTERS_POSITION_BOTTOM: 'bottom'
19 | };
20 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/contexts/bootstrap.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const BootstrapContext = React.createContext({
4 | bootstrap4: false
5 | });
6 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/contexts/column-context.js:
--------------------------------------------------------------------------------
1 | /* eslint react/prop-types: 0 */
2 | /* eslint react/prefer-stateless-function: 0 */
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 |
6 | export default () => {
7 | const ColumnManagementContext = React.createContext();
8 |
9 | class ColumnManagementProvider extends React.Component {
10 | static propTypes = {
11 | columns: PropTypes.array.isRequired,
12 | toggles: PropTypes.object
13 | }
14 |
15 | static defaultProps = {
16 | toggles: null
17 | }
18 |
19 | render() {
20 | let toggleColumn;
21 | const { columns, toggles } = this.props;
22 | if (toggles) {
23 | toggleColumn = columns.filter(column => toggles[column.dataField]);
24 | } else {
25 | toggleColumn = columns.filter(column => !column.hidden);
26 | }
27 | return (
28 |
29 | { this.props.children }
30 |
31 | );
32 | }
33 | }
34 |
35 | return {
36 | Provider: ColumnManagementProvider,
37 | Consumer: ColumnManagementContext.Consumer
38 | };
39 | };
40 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/contexts/data-context.js:
--------------------------------------------------------------------------------
1 | /* eslint camelcase: 0 */
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | export default () => {
6 | const DataContext = React.createContext();
7 |
8 | class DataProvider extends Component {
9 | static propTypes = {
10 | data: PropTypes.array.isRequired,
11 | children: PropTypes.node.isRequired
12 | }
13 |
14 | state = { data: this.props.data };
15 |
16 | getData = (filterProps, searchProps, sortProps, paginationProps) => {
17 | if (paginationProps) return paginationProps.data;
18 | else if (sortProps) return sortProps.data;
19 | else if (searchProps) return searchProps.data;
20 | else if (filterProps) return filterProps.data;
21 | return this.props.data;
22 | }
23 |
24 | UNSAFE_componentWillReceiveProps(nextProps) {
25 | this.setState(() => ({ data: nextProps.data }));
26 | }
27 |
28 | render() {
29 | return (
30 |
36 | { this.props.children }
37 |
38 | );
39 | }
40 | }
41 | return {
42 | Provider: DataProvider,
43 | Consumer: DataContext.Consumer
44 | };
45 | };
46 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/filters-cell.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import _ from './utils';
4 |
5 | const FiltersCell = (props) => {
6 | const {
7 | index, column, onExternalFilter,
8 | currFilters, onFilter
9 | } = props;
10 | const { filterRenderer, filter } = column;
11 | let filterElm;
12 | const cellAttrs = {};
13 | const cellStyle = {};
14 | cellAttrs.style = cellStyle;
15 | if (column.headerAlign) {
16 | cellStyle.textAlign = _.isFunction(column.headerAlign)
17 | ? column.headerAlign(column, index)
18 | : column.headerAlign;
19 | }
20 | if (column.filterRenderer) {
21 | const onCustomFilter = onExternalFilter(column, filter.props.type);
22 | filterElm = filterRenderer(onCustomFilter, column);
23 | } else if (filter) {
24 | filterElm = (
25 |
31 | );
32 | }
33 | return React.createElement('th', cellAttrs, filterElm);
34 | };
35 |
36 | FiltersCell.propTypes = {
37 | index: PropTypes.number.isRequired,
38 | column: PropTypes.object.isRequired,
39 | currFilters: PropTypes.object.isRequired,
40 | onFilter: PropTypes.func,
41 | onExternalFilter: PropTypes.func
42 | };
43 |
44 | FiltersCell.defaultProps = {
45 | onFilter: () => { },
46 | onExternalFilter: () => { }
47 | };
48 |
49 | export default FiltersCell;
50 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/footer.js:
--------------------------------------------------------------------------------
1 | /* eslint react/require-default-props: 0 */
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | import RowTemplate from './row/row-template';
6 | import FooterCell from './footer-cell';
7 | import _ from './utils';
8 |
9 | const Footer = (props) => {
10 | const { data, className, columns, selectRow, expandRow } = props;
11 |
12 | function renderContent() {
13 | return columns.map((column, i) => {
14 | if (column.footer === undefined || column.footer === null) {
15 | return false;
16 | }
17 |
18 | const columnData = _.pluck(data, column.dataField);
19 |
20 | return (
21 |
27 | );
28 | });
29 | }
30 |
31 | return (
32 |
33 |
40 |
41 | );
42 | };
43 |
44 | Footer.propTypes = {
45 | data: PropTypes.array,
46 | className: PropTypes.string,
47 | columns: PropTypes.array,
48 | selectRow: PropTypes.object,
49 | expandRow: PropTypes.object
50 | };
51 |
52 | export default Footer;
53 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js:
--------------------------------------------------------------------------------
1 | export default ExtendBase =>
2 | class ColumnResolver extends ExtendBase {
3 | visibleColumnSize(includeSelectColumn = true) {
4 | let columnLen;
5 | if (this.props.columnToggle && this.props.columnToggle.toggles) {
6 | const columns = this.props.columnToggle.toggles;
7 | columnLen = Object.keys(columns).filter(name => columns[name]).length;
8 | } else {
9 | columnLen = this.props.columns.filter(c => !c.hidden).length;
10 | }
11 | if (!includeSelectColumn) return columnLen;
12 | if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) {
13 | columnLen += 1;
14 | }
15 | if (this.props.expandRow && this.props.expandRow.showExpandColumn) {
16 | columnLen += 1;
17 | }
18 | return columnLen;
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/props-resolver/index.js:
--------------------------------------------------------------------------------
1 | import _ from '../utils';
2 | import ColumnResolver from './column-resolver';
3 |
4 | export default ExtendBase =>
5 | class TableResolver extends ColumnResolver(ExtendBase) {
6 | validateProps() {
7 | const { keyField } = this.props;
8 | if (!keyField) {
9 | throw new Error('Please specify a field as key via keyField');
10 | }
11 | if (this.visibleColumnSize(false) <= 0) {
12 | throw new Error('No visible columns detected');
13 | }
14 | }
15 |
16 | isEmpty() {
17 | return this.props.data.length === 0;
18 | }
19 |
20 | visibleRows() {
21 | const { data, hiddenRows, keyField } = this.props;
22 | if (!hiddenRows || hiddenRows.length === 0) return data;
23 | return data.filter((row) => {
24 | const key = _.get(row, keyField);
25 | return !_.contains(hiddenRows, key);
26 | });
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/row-expand/expand-header-cell-consumer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ExpansionContext from '../contexts/row-expand-context';
3 |
4 | export default Component => () => (
5 |
6 | { expandRow => }
7 |
8 | );
9 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/row-expand/expand-header-cell.js:
--------------------------------------------------------------------------------
1 | /* eslint react/require-default-props: 0 */
2 | /* eslint no-nested-ternary: 0 */
3 | import React, { Component } from 'react';
4 | import PropTypes from 'prop-types';
5 |
6 | export default class ExpansionHeaderCell extends Component {
7 | static propTypes = {
8 | isAnyExpands: PropTypes.bool.isRequired,
9 | onAllRowExpand: PropTypes.func.isRequired,
10 | expandHeaderColumnRenderer: PropTypes.func
11 | }
12 |
13 | constructor() {
14 | super();
15 | this.handleCheckBoxClick = this.handleCheckBoxClick.bind(this);
16 | }
17 |
18 | handleCheckBoxClick(e) {
19 | const { isAnyExpands, onAllRowExpand } = this.props;
20 |
21 | onAllRowExpand(e, !isAnyExpands);
22 | }
23 |
24 | render() {
25 | const { isAnyExpands, expandHeaderColumnRenderer } = this.props;
26 | const attrs = {
27 | onClick: this.handleCheckBoxClick
28 | };
29 |
30 | return (
31 |
32 | {
33 | expandHeaderColumnRenderer ?
34 | expandHeaderColumnRenderer({ isAnyExpands }) :
35 | (isAnyExpands ? '(-)' : '(+)')
36 | }
37 | |
38 | );
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/row-expand/expand-row.js:
--------------------------------------------------------------------------------
1 | import cs from 'classnames';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 | import { CSSTransition } from 'react-transition-group';
5 |
6 | const ExpandRow = ({ children, expanded, onClosed, className, ...rest }) => (
7 |
8 |
9 |
16 |
17 |
18 | { children }
19 |
20 | |
23 |
24 | );
25 |
26 | ExpandRow.propTypes = {
27 | children: PropTypes.node,
28 | expanded: PropTypes.bool,
29 | onClosed: PropTypes.func,
30 | className: PropTypes.string
31 | };
32 |
33 | ExpandRow.defaultProps = {
34 | children: null,
35 | expanded: false,
36 | onClosed: null,
37 | className: ''
38 | };
39 |
40 | export default ExpandRow;
41 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/row-selection/selection-header-cell-consumer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SelectionContext from '../contexts/selection-context';
3 |
4 | export default Component => () => (
5 |
6 | { selectRow => }
7 |
8 | );
9 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/row/row-section.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const RowSection = ({ content, colSpan }) => (
5 |
6 | |
11 | { content }
12 | |
13 |
14 | );
15 |
16 | RowSection.propTypes = {
17 | content: PropTypes.any,
18 | colSpan: PropTypes.number
19 | };
20 |
21 | RowSection.defaultProps = {
22 | content: null,
23 | colSpan: 1
24 | };
25 |
26 | export default RowSection;
27 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/row/row-template.js:
--------------------------------------------------------------------------------
1 | /* eslint react/require-default-props: 0 */
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | import Const from '../const';
6 |
7 | const RowTemplate = (props) => {
8 | const {
9 | renderContent,
10 | selectRow,
11 | expandRow,
12 | cellEl,
13 | ...rest
14 | } = props;
15 |
16 | const isRenderFunctionColumnInLeft = (
17 | position = Const.INDICATOR_POSITION_LEFT
18 | ) => position === Const.INDICATOR_POSITION_LEFT;
19 |
20 | const childrens = renderContent() || [];
21 |
22 | if (selectRow && selectRow.hideSelectColumn !== true) {
23 | if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
24 | childrens.unshift(React.createElement(cellEl, { key: 'selection' }));
25 | } else {
26 | childrens.push(React.createElement(cellEl, { key: 'selection' }));
27 | }
28 | }
29 |
30 | if (expandRow.showExpandColumn) {
31 | if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
32 | childrens.unshift(React.createElement(cellEl, { key: 'expansion' }));
33 | } else {
34 | childrens.push(React.createElement(cellEl, { key: 'expansion' }));
35 | }
36 | }
37 |
38 | return { childrens }
;
39 | };
40 |
41 | RowTemplate.propTypes = {
42 | renderContent: PropTypes.func.isRequired,
43 | cellEl: PropTypes.string.isRequired,
44 | selectRow: PropTypes.object,
45 | expandRow: PropTypes.object
46 | };
47 |
48 | export default RowTemplate;
49 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/sort/caret.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cs from 'classnames';
3 | import PropTypes from 'prop-types';
4 |
5 | import Const from '../const';
6 | import { BootstrapContext } from '../contexts/bootstrap';
7 |
8 |
9 | const SortCaret = ({ order }) => {
10 | const orderClass = cs('react-bootstrap-table-sort-order', {
11 | dropup: order === Const.SORT_ASC
12 | });
13 |
14 | return (
15 |
16 | {
17 | ({ bootstrap4 }) => (bootstrap4 ? (
18 |
19 | ) : (
20 |
21 |
22 |
23 | ))
24 | }
25 |
26 | );
27 | };
28 |
29 | SortCaret.propTypes = {
30 | order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired
31 | };
32 |
33 | export default SortCaret;
34 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/sort/symbol.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BootstrapContext } from '../contexts/bootstrap';
3 |
4 | const SortSymbol = () => (
5 |
6 | {
7 | ({ bootstrap4 }) => (bootstrap4 ? (
8 |
9 | ) : (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | ))
19 | }
20 |
21 | );
22 |
23 | export default SortSymbol;
24 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/store/expand.js:
--------------------------------------------------------------------------------
1 | import _ from '../utils';
2 | import { getRowByRowId } from './rows';
3 |
4 | export const isAnyExpands = (
5 | data,
6 | keyField,
7 | expanded = []
8 | ) => {
9 | for (let i = 0; i < data.length; i += 1) {
10 | const rowKey = _.get(data[i], keyField);
11 | if (typeof expanded.find(x => x === rowKey) !== 'undefined') {
12 | return true;
13 | }
14 | }
15 | return false;
16 | };
17 |
18 | export const expandableKeys = (data, keyField, skips = []) => {
19 | if (skips.length === 0) {
20 | return data.map(row => _.get(row, keyField));
21 | }
22 | return data
23 | .filter(row => !_.contains(skips, _.get(row, keyField)))
24 | .map(row => _.get(row, keyField));
25 | };
26 |
27 | export const getExpandedRows = (data, keyField, expanded) =>
28 | expanded.map(k => getRowByRowId(data, keyField, k));
29 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/store/mutate.js:
--------------------------------------------------------------------------------
1 | import _ from '../utils';
2 | import { getRowByRowId } from './rows';
3 |
4 | export const editCell = (data, keyField, rowId, dataField, newValue) => {
5 | const row = getRowByRowId(data, keyField, rowId);
6 | if (row) _.set(row, dataField, newValue);
7 | };
8 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/store/operators.js:
--------------------------------------------------------------------------------
1 | import * as rows from './rows';
2 | import * as selection from './selection';
3 | import * as expand from './expand';
4 | import * as mutate from './mutate';
5 | import * as sort from './sort';
6 | import * as type from './type';
7 |
8 | export default {
9 | ...rows,
10 | ...selection,
11 | ...expand,
12 | ...mutate,
13 | ...sort,
14 | ...type
15 | };
16 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/store/rows.js:
--------------------------------------------------------------------------------
1 | import _ from '../utils';
2 |
3 | export const matchRow = (keyField, id) => row => _.get(row, keyField) === id;
4 |
5 | export const getRowByRowId = (data, keyField, id) => data.find(matchRow(keyField, id));
6 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/store/selection.js:
--------------------------------------------------------------------------------
1 | import _ from '../utils';
2 | import { getRowByRowId } from './rows';
3 |
4 | export const getSelectionSummary = (
5 | data = [],
6 | keyField,
7 | selected = []
8 | ) => {
9 | let allRowsSelected = data.length > 0;
10 | let allRowsNotSelected = true;
11 |
12 | const rowKeys = data.map(d => _.get(d, keyField));
13 | for (let i = 0; i < rowKeys.length; i += 1) {
14 | const curr = rowKeys[i];
15 | if (typeof selected.find(x => x === curr) === 'undefined') {
16 | allRowsSelected = false;
17 | } else {
18 | allRowsNotSelected = false;
19 | }
20 | }
21 | return {
22 | allRowsSelected,
23 | allRowsNotSelected
24 | };
25 | };
26 |
27 | export const selectableKeys = (data = [], keyField, skips = []) => {
28 | if (skips.length === 0) {
29 | return data.map(row => _.get(row, keyField));
30 | }
31 | return data
32 | .filter(row => !_.contains(skips, _.get(row, keyField)))
33 | .map(row => _.get(row, keyField));
34 | };
35 |
36 | export const unSelectableKeys = (selected, skips = []) => {
37 | if (skips.length === 0) {
38 | return [];
39 | }
40 | return selected.filter(x => _.contains(skips, x));
41 | };
42 |
43 | export const getSelectedRows = (data = [], keyField, selected) =>
44 | selected.map(k => getRowByRowId(data, keyField, k)).filter(x => !!x);
45 |
46 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/store/sort.js:
--------------------------------------------------------------------------------
1 | /* eslint no-nested-ternary: 0 */
2 | /* eslint no-lonely-if: 0 */
3 | /* eslint no-underscore-dangle: 0 */
4 | import _ from '../utils';
5 | import Const from '../const';
6 |
7 | function comparator(a, b) {
8 | let result;
9 | if (typeof b === 'string') {
10 | result = b.localeCompare(a);
11 | } else {
12 | result = a > b ? -1 : ((a < b) ? 1 : 0);
13 | }
14 | return result;
15 | }
16 |
17 | export const sort = (data, sortOrder, { dataField, sortFunc, sortValue }) => {
18 | const _data = [...data];
19 | _data.sort((a, b) => {
20 | let result;
21 | let valueA = _.get(a, dataField);
22 | let valueB = _.get(b, dataField);
23 | if (sortValue) {
24 | valueA = sortValue(valueA, a);
25 | valueB = sortValue(valueB, b);
26 | } else {
27 | valueA = _.isDefined(valueA) ? valueA : '';
28 | valueB = _.isDefined(valueB) ? valueB : '';
29 | }
30 |
31 | if (sortFunc) {
32 | result = sortFunc(valueA, valueB, sortOrder, dataField, a, b);
33 | } else {
34 | if (sortOrder === Const.SORT_DESC) {
35 | result = comparator(valueA, valueB);
36 | } else {
37 | result = comparator(valueB, valueA);
38 | }
39 | }
40 | return result;
41 | });
42 | return _data;
43 | };
44 |
45 | export const nextOrder = (
46 | currentSortColumn,
47 | { sortOrder, sortColumn },
48 | defaultOrder = Const.SORT_DESC
49 | ) => {
50 | if (!sortColumn || currentSortColumn.dataField !== sortColumn.dataField) return defaultOrder;
51 | return sortOrder === Const.SORT_DESC ? Const.SORT_ASC : Const.SORT_DESC;
52 | };
53 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/src/store/type.js:
--------------------------------------------------------------------------------
1 | import Const from '../const';
2 |
3 | export const typeConvert = (type, value) => {
4 | if (type === Const.TYPE_STRING) {
5 | return String(value);
6 | } else if (type === Const.TYPE_NUMBER) {
7 | return Number(value);
8 | } else if (type === Const.TYPE_BOOLEAN) {
9 | if (typeof value === 'boolean') {
10 | return value;
11 | }
12 | return value === 'true';
13 | } else if (type === Const.TYPE_DATE) {
14 | return new Date(value);
15 | }
16 | return value;
17 | };
18 |
19 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/row-selection/__snapshots__/selection-cell.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` render should render component correctly 1`] = `
4 |
8 |
14 | |
15 | `;
16 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/row-selection/__snapshots__/selection-header-cell.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` render should render component correctly 1`] = `
4 |
9 | `;
10 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/row/row-section.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import RowSection from '../../src/row/row-section';
5 |
6 | describe('Row', () => {
7 | const colSpan = 3;
8 | let wrapper;
9 | let content;
10 |
11 | describe('simplest row-section', () => {
12 | beforeEach(() => {
13 | wrapper = shallow();
14 | });
15 |
16 | it('should render successfully', () => {
17 | expect(wrapper.length).toBe(1);
18 | expect(wrapper.find('tr').length).toBe(1);
19 | expect(wrapper.find('td').length).toBe(1);
20 | expect(wrapper.find('td').prop('colSpan')).toEqual(colSpan);
21 | expect(wrapper.find('.react-bs-table-no-data').length).toBe(1);
22 | });
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/sort/symbol.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { shallowWithContext } from '../test-helpers/new-context';
4 | import SortSymbol from '../../src/sort/symbol';
5 |
6 | describe('SortSymbol', () => {
7 | let wrapper;
8 | beforeEach(() => {
9 | wrapper = shallowWithContext(, { bootstrap4: false });
10 | });
11 | it('should render sort symbol correctly', () => {
12 | expect(wrapper.length).toBe(1);
13 | expect(wrapper.find('.order').length).toBe(1);
14 | expect(wrapper.find('.caret').length).toBe(2);
15 | expect(wrapper.find('.dropdown').length).toBe(1);
16 | expect(wrapper.find('.dropup').length).toBe(1);
17 | });
18 |
19 | describe('if bootstrap4 prop is true', () => {
20 | beforeEach(() => {
21 | wrapper = shallowWithContext(, { bootstrap4: true });
22 | });
23 | it('should render sort symbol correctly', () => {
24 | expect(wrapper.length).toBe(1);
25 | expect(wrapper.find('.order-4').length).toBe(1);
26 | });
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/store/mutate.test.js:
--------------------------------------------------------------------------------
1 | import { editCell } from '../../src/store/mutate';
2 |
3 | describe('Mutate Function', () => {
4 | const data = [
5 | { id: 3, name: 'name2' },
6 | { id: 2, name: 'ABC' },
7 | { id: 4, name: '123tester' },
8 | { id: 1, name: '!@#' }
9 | ];
10 |
11 | const keyField = 'id';
12 |
13 | describe('editCell', () => {
14 | let rowId;
15 | const editField = 'name';
16 | const newValue = 'tester';
17 |
18 | it('should edit successfully if row is existing', () => {
19 | rowId = data[0][keyField];
20 |
21 | editCell(data, keyField, rowId, editField, newValue);
22 | expect(data[0][editField]).toEqual(newValue);
23 | });
24 |
25 | it('should not mutate cell if row is not existing', () => {
26 | rowId = 100;
27 |
28 | editCell(data, keyField, rowId, editField, newValue);
29 | expect(data).toEqual(data);
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/store/rows.test.js:
--------------------------------------------------------------------------------
1 | import { getRowByRowId, matchRow } from '../../src/store/rows';
2 |
3 | describe('Rows Function', () => {
4 | const data = [
5 | { id: 3, name: 'name2' },
6 | { id: 2, name: 'ABC' },
7 | { id: 4, name: '123tester' },
8 | { id: 1, name: '!@#' }
9 | ];
10 | const keyField = 'id';
11 |
12 | describe('getRowByRowId', () => {
13 | it('should returning correct row', () => {
14 | expect(getRowByRowId(data, keyField, 2)).toEqual(data[1]);
15 | });
16 |
17 | it('should returning undefined if not existing', () => {
18 | expect(getRowByRowId(data, keyField, 20)).not.toBeDefined();
19 | });
20 | });
21 |
22 | describe('matchRow', () => {
23 | it('should return true if keyField and id is match', () => {
24 | const row = data[0];
25 | const fn = matchRow(keyField, row[keyField]);
26 | expect(fn(row)).toBeTruthy();
27 | });
28 |
29 | it('should return false if keyField and id is not match', () => {
30 | const row = data[0];
31 | const fn = matchRow(keyField, 0);
32 | expect(fn(row)).toBeFalsy();
33 | });
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/test-helpers/mock-component.js:
--------------------------------------------------------------------------------
1 |
2 | export const extendTo = Base =>
3 | class MockComponent extends Base {
4 | render() { return null; }
5 | };
6 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/test-helpers/mock/body-resolved-props.js:
--------------------------------------------------------------------------------
1 | import Const from '../../../src/const';
2 |
3 | const { ROW_SELECT_DISABLED } = Const;
4 |
5 | export const rowSelectionResolvedProps = {
6 | mode: ROW_SELECT_DISABLED,
7 | selected: [],
8 | hideSelectColumn: true
9 | };
10 |
11 | export const expandRowResolvedProps = {
12 | renderer: undefined,
13 | expanded: []
14 | };
15 |
16 | export const cellEditResolvedProps = {
17 | mode: null,
18 | nonEditableRows: []
19 | };
20 |
21 | export default {
22 | cellEdit: cellEditResolvedProps,
23 | expandRow: expandRowResolvedProps,
24 | selectRow: rowSelectionResolvedProps
25 | };
26 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/test-helpers/mock/header-resolved-props.js:
--------------------------------------------------------------------------------
1 | import Const from '../../../src/const';
2 |
3 | const { ROW_SELECT_DISABLED } = Const;
4 |
5 | export const rowSelectionResolvedProps = {
6 | mode: ROW_SELECT_DISABLED,
7 | selected: [],
8 | hideSelectColumn: true
9 | };
10 |
11 | export const expandRowResolvedProps = {
12 | renderer: undefined,
13 | expanded: []
14 | };
15 |
16 | export default {
17 | selectRow: rowSelectionResolvedProps,
18 | expandRow: expandRowResolvedProps
19 | };
20 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/test-helpers/new-context.js:
--------------------------------------------------------------------------------
1 | import { shallow } from 'enzyme';
2 |
3 | export const shallowWithContext = (elem, context = {}) => {
4 | const wrapper = shallow(elem);
5 | const Children = wrapper.props().children(context);
6 | return shallow(Children);
7 | };
8 |
--------------------------------------------------------------------------------
/packages/react-bootstrap-table2/test/test-helpers/product-generator.js:
--------------------------------------------------------------------------------
1 | /**
2 | * products generator for stories
3 | *
4 | * @param {Number} quantity - quantity of products
5 | * @param {Function} callback - callback func which is similiar to 'mapFunction'
6 | * aims to customize product format
7 | *
8 | * @return {Array} - products array
9 | */
10 | export const productsGenerator = (quantity = 5, callback) => {
11 | if (callback) return Array.from({ length: quantity }, callback);
12 |
13 | // if no given callback, retrun default product format.
14 | return (
15 | Array.from({ length: quantity }, (value, index) => ({
16 | id: index,
17 | name: `Item name ${index}`,
18 | price: 2100 + index
19 | }))
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/webpack/editor.umd.babel.js:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 | import umdConfig from './webpack.umd.babel';
3 |
4 | module.exports = {
5 | ...umdConfig,
6 | entry: {
7 | 'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor': './packages/react-bootstrap-table2-editor/index.js',
8 | 'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor.min': './packages/react-bootstrap-table2-editor/index.js'
9 | },
10 | output: {
11 | path: path.join(__dirname, '../packages'),
12 | filename: '[name].js',
13 | library: 'ReactBootstrapTable2Editor',
14 | libraryTarget: 'umd'
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/webpack/filter.umd.babel.js:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 | import umdConfig from './webpack.umd.babel';
3 |
4 | module.exports = {
5 | ...umdConfig,
6 | entry: {
7 | 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter': './packages/react-bootstrap-table2-filter/index.js',
8 | 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min': './packages/react-bootstrap-table2-filter/index.js'
9 | },
10 | output: {
11 | path: path.join(__dirname, '../packages'),
12 | filename: '[name].js',
13 | library: 'ReactBootstrapTable2Filter',
14 | libraryTarget: 'umd'
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/webpack/next.umd.babel.js:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 | import umdConfig from './webpack.umd.babel';
3 |
4 | module.exports = {
5 | ...umdConfig,
6 | entry: {
7 | 'react-bootstrap-table2/dist/react-bootstrap-table-next': './packages/react-bootstrap-table2/index.js',
8 | 'react-bootstrap-table2/dist/react-bootstrap-table-next.min': './packages/react-bootstrap-table2/index.js'
9 | },
10 | output: {
11 | path: path.join(__dirname, '../packages'),
12 | filename: '[name].js',
13 | library: 'ReactBootstrapTable2',
14 | libraryTarget: 'umd'
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/webpack/overlay.umd.babel.js:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 | import umdConfig from './webpack.umd.babel';
3 |
4 | module.exports = {
5 | ...umdConfig,
6 | entry: {
7 | 'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay': './packages/react-bootstrap-table2-overlay/index.js',
8 | 'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min': './packages/react-bootstrap-table2-overlay/index.js'
9 | },
10 | output: {
11 | path: path.join(__dirname, '../packages'),
12 | filename: '[name].js',
13 | library: 'ReactBootstrapTable2Overlay',
14 | libraryTarget: 'umd'
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/webpack/paginator.umd.babel.js:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 | import umdConfig from './webpack.umd.babel';
3 |
4 | module.exports = {
5 | ...umdConfig,
6 | entry: {
7 | 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator': './packages/react-bootstrap-table2-paginator/index.js',
8 | 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min': './packages/react-bootstrap-table2-paginator/index.js'
9 | },
10 | output: {
11 | path: path.join(__dirname, '../packages'),
12 | filename: '[name].js',
13 | library: 'ReactBootstrapTable2Paginator',
14 | libraryTarget: 'umd'
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/webpack/toolkit.umd.babel.js:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 | import umdConfig from './webpack.umd.babel';
3 |
4 | module.exports = {
5 | ...umdConfig,
6 | entry: {
7 | 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit': './packages/react-bootstrap-table2-toolkit/index.js',
8 | 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min': './packages/react-bootstrap-table2-toolkit/index.js'
9 | },
10 | output: {
11 | path: path.join(__dirname, '../packages'),
12 | filename: '[name].js',
13 | library: 'ReactBootstrapTable2Toolkit',
14 | libraryTarget: 'umd'
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/webpack/webpack.umd.babel.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 |
3 | module.exports = {
4 | devtool: 'source-map',
5 | externals: [{
6 | 'react': {
7 | root: 'React',
8 | commonjs2: 'react',
9 | commonjs: 'react',
10 | amd: 'react'
11 | }
12 | }, {
13 | 'react-dom': {
14 | root: 'ReactDOM',
15 | commonjs2: 'react-dom',
16 | commonjs: 'react-dom',
17 | amd: 'react-dom'
18 | }
19 | }],
20 | module: {
21 | rules: [{
22 | enforce: 'pre',
23 | test: /\.js?$/,
24 | exclude: /node_modules/,
25 | loader: 'eslint-loader'
26 | }, {
27 | test: /\.js?$/,
28 | use: ['babel-loader'],
29 | exclude: /node_modules/
30 | }]
31 | },
32 | plugins: [
33 | new webpack.DefinePlugin({
34 | 'process.env.NODE_ENV': JSON.stringify('production')
35 | }),
36 | new webpack.SourceMapDevToolPlugin(),
37 | new webpack.optimize.DedupePlugin(),
38 | new webpack.optimize.OccurrenceOrderPlugin(),
39 | new webpack.optimize.AggressiveMergingPlugin(),
40 | new webpack.optimize.UglifyJsPlugin({
41 | include: /\.min\.js$/,
42 | compress: { warnings: false }
43 | })
44 | ]
45 | };
46 |
--------------------------------------------------------------------------------