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

story for #1054

Browse Source
This commit is contained in:
AllenFang 2019-08-24 13:22:14 +08:00
parent 23cb0bb317
commit 47f6340a99
2 changed files with 152 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js vendored Normal file
View File

@ -0,0 +1,150 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
import Code from 'components/common/code-block';
import { productsQualityGenerator } from 'utils/common';
const products = productsQualityGenerator(6);
const selectOptions = {
0: 'good',
1: 'Bad',
2: 'unknown'
};
const selectOptionsArr = [{
value: 0,
label: 'good'
}, {
value: 1,
label: 'Bad'
}, {
value: 2,
label: 'unknown'
}];
const columns1 = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptions[cell],
filter: selectFilter({
options: selectOptions
})
}];
const columns2 = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
filter: selectFilter({
options: selectOptionsArr
})
}];
const columns3 = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
filter: selectFilter({
options: () => selectOptionsArr
})
}];
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
// Object map options
const selectOptions = {
0: 'good',
1: 'Bad',
2: 'unknown'
};
// Array options
const selectOptionsArr = [{
value: 0,
label: 'good'
}, {
value: 1,
label: 'Bad'
}, {
value: 2,
label: 'unknown'
}];
const columns1 = [..., {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptions[cell],
filter: selectFilter({
options: selectOptions
})
}];
<BootstrapTable keyField='id' data={ products } columns={ columns1 } filter={ filterFactory() } />
const columns2 = [..., {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
filter: selectFilter({
options: selectOptionsArr
})
}];
<BootstrapTable keyField='id' data={ products } columns={ columns2 } filter={ filterFactory() } />
const columns3 = [..., {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
filter: selectFilter({
options: () => selectOptionsArr
})
}];
<BootstrapTable keyField='id' data={ products } columns={ columns3 } filter={ filterFactory() } />
`;
export default () => (
<div>
<h2>Options as an object</h2>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns1 }
filter={ filterFactory() }
/>
<h2>Options as an array</h2>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns2 }
filter={ filterFactory() }
/>
<h2>Options as a function which return an array</h2>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns3 }
filter={ filterFactory() }
/>
<Code>{ sourceCode }</Code>
</div>
);

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

@ -68,6 +68,7 @@ import TextFilterCaseSensitive from 'examples/column-filter/text-filter-caseSens
import CustomTextFilter from 'examples/column-filter/custom-text-filter';
import CustomFilterValue from 'examples/column-filter/custom-filter-value';
import SelectFilter from 'examples/column-filter/select-filter';
import ConfigureSelectFilterOptions from 'examples/column-filter/select-filter-option-type';
import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
import SelectFilterWithPreservedOptionsOrder from 'examples/column-filter/select-filter-preserve-option-order';
@ -300,6 +301,7 @@ storiesOf('Column Filter', module)
.add('Text Filter with Case Sensitive', () => <TextFilterCaseSensitive />)
// add another filter type example right here.
.add('Select Filter', () => <SelectFilter />)
.add('Configure Select Filter Options', () => <ConfigureSelectFilterOptions />)
.add('Select Filter with Default Value', () => <SelectFilterWithDefaultValue />)
.add('Select Filter with Comparator', () => <SelectFilterComparator />)
.add('MultiSelect Filter', () => <MultiSelectFilter />)