mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
add story for text filter
This commit is contained in:
parent
00185b80ca
commit
c01db26428
49
packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
vendored
Normal file
49
packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
vendored
Normal file
@ -0,0 +1,49 @@
|
||||
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()
|
||||
}];
|
||||
|
||||
const sourceCode = `\
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID',
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name',
|
||||
filter: textFilter()
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price',
|
||||
filter: textFilter()
|
||||
}];
|
||||
|
||||
<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>
|
||||
);
|
||||
@ -32,6 +32,9 @@ import HeaderColumnClassTable from 'examples/header-columns/column-class-table';
|
||||
import HeaderColumnStyleTable from 'examples/header-columns/column-style-table';
|
||||
import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
|
||||
|
||||
// column filter
|
||||
import TextFilter from 'examples/column-filter/text-filter';
|
||||
|
||||
// work on rows
|
||||
import RowStyleTable from 'examples/rows/row-style';
|
||||
import RowClassTable from 'examples/rows/row-class';
|
||||
@ -121,6 +124,9 @@ storiesOf('Work on Header Columns', module)
|
||||
.add('Customize Column Style', () => <HeaderColumnStyleTable />)
|
||||
.add('Customize Column HTML attribute', () => <HeaderColumnAttrsTable />);
|
||||
|
||||
storiesOf('Column Filter', module)
|
||||
.add('Text Filter', () => <TextFilter />);
|
||||
|
||||
storiesOf('Work on Rows', module)
|
||||
.add('Customize Row Style', () => <RowStyleTable />)
|
||||
.add('Customize Row Class', () => <RowClassTable />)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user