vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add some stories for text filter

Browse Source
This commit is contained in:
AllenFang 2017-12-16 17:47:27 +08:00
parent 51ef91b066
commit 024dcf8c12
4 changed files with 179 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js vendored Normal file
View File

@ -0,0 +1,66 @@
/* eslint no-console: 0 */
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import fitlerFactory, { textFilter } from 'react-bootstrap-table2-filter';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator(8);
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter()
}, {
dataField: 'price',
text: 'Product Price',
filter: textFilter({
delay: 1000, // default is 500ms
style: {
backgroundColor: 'yellow'
},
className: 'test-classname',
placeholder: 'Custom PlaceHolder',
onClick: e => console.log(e)
})
}];
const sourceCode = `\
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter()
}, {
dataField: 'price',
text: 'Product Price',
filter: textFilter({
delay: 1000, // default is 500ms
style: {
backgroundColor: 'yellow'
},
className: 'test-classname',
placeholder: 'Custom PlaceHolder',
onClick: e => console.log(e)
})
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ fitlerFactory() } />
`;
export default () => (
<div>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
filter={ fitlerFactory() }
/>
<Code>{ sourceCode }</Code>
</div>
);

53
packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js vendored Normal file
View File

@ -0,0 +1,53 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import fitlerFactory, { textFilter } from 'react-bootstrap-table2-filter';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator(8);
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter()
}, {
dataField: 'price',
text: 'Product Price',
filter: textFilter({
defaultValue: '2103'
})
}];
const sourceCode = `\
const columns = [{
dataField: 'id',
text: 'Product ID',
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter()
}, {
dataField: 'price',
text: 'Product Price',
filter: textFilter({
defaultValue: '2103'
})
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ fitlerFactory() } />
`;
export default () => (
<div>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
filter={ fitlerFactory() }
/>
<Code>{ sourceCode }</Code>
</div>
);

54
packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js vendored Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import fitlerFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator(8);
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter({
comparator: Comparator.EQ // default is Comparator.LIKE
})
}, {
dataField: 'price',
text: 'Product Price',
filter: textFilter()
}];
const sourceCode = `\
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter({
comparator: Comparator.EQ
})
}, {
dataField: 'price',
text: 'Product Price',
filter: textFilter()
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ fitlerFactory() } />
`;
export default () => (
<div>
<h3>Product Name filter apply Equal Comparator</h3>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
filter={ fitlerFactory() }
/>
<Code>{ sourceCode }</Code>
</div>
);

6
packages/react-bootstrap-table2-example/stories/index.js vendored
View File

@ -34,6 +34,9 @@ import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
// column filter
import TextFilter from 'examples/column-filter/text-filter';
import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-default-value';
import TextFilterComparator from 'examples/column-filter/text-filter-eq-comparator';
import CustomTextFilter from 'examples/column-filter/custom-text-filter';
import CustomFilterValue from 'examples/column-filter/custom-filter-value';
// work on rows
@ -127,6 +130,9 @@ storiesOf('Work on Header Columns', module)
storiesOf('Column Filter', module)
.add('Text Filter', () => <TextFilter />)
.add('Text Filter with Default Value', () => <TextFilterWithDefaultValue />)
.add('Text Filter with Comparator', () => <TextFilterComparator />)
.add('Custom Text Filter', () => <CustomTextFilter />)
// add another filter type example right here.
.add('Custom Filter Value', () => <CustomFilterValue />);