vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-08-12 12:00:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

data, keyField and columns is necessary value for toolkits context

Browse Source
This commit is contained in:
AllenFang
2018-08-01 20:26:00 +08:00
parent 5a442bf7ed
commit e6d4a9641b
8 changed files with 100 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-bootstrap-table2-example/examples/remote/remote-search.js
Vendored
+24 -10
View File
@@ -40,15 +40,27 @@ const columns = [{
const RemoteFilter = props => (
<div>
<BootstrapTable
remote={ { filter: true } }
<ToolkitContext.Provider
keyField="id"
data={ props.data }
columns={ columns }
filter={ filterFactory() }
onTableChange={ props.onTableChange }
/>
<Code>{ sourceCode }</Code>
>
<ToolkitContext.Consumer>
{
toolkitprops => [
<SearchBar { ...toolkitprops.searchProps } />,
<BootstrapTable
{ ...toolkitprops.baseProps }
remote={ { search: true } }
onTableChange={ props.onTableChange }
search={ searchFactory({
...toolkitprops.searchProps
}) }
/>
]
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
</div>
);
@@ -97,16 +109,18 @@ class Container extends React.Component {
const RemoteFilter = props => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ props.data }
columns={ columns }
>
<ToolkitContext.Consumer>
{
toolkitprops => [
<SearchBar { ...toolkitprops.searchProps } />,
<BootstrapTable
{ ...toolkitprops.baseProps }
remote={ { search: true } }
keyField="id"
data={ props.data }
columns={ columns }
onTableChange={ props.onTableChange }
search={ searchFactory({
...toolkitprops.searchProps
packages/react-bootstrap-table2-example/examples/search/custom-search-value.js
Vendored
+13 -9
View File
@@ -55,18 +55,20 @@ const columns = [{
filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
}];
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
@@ -80,7 +82,11 @@ const columns = [{
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@@ -89,9 +95,7 @@ export default () => (
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
packages/react-bootstrap-table2-example/examples/search/default-custom-search.js
Vendored
+12 -8
View File
@@ -36,7 +36,11 @@ const columns = [{
text: 'Product Price'
}];
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@@ -51,9 +55,7 @@ const columns = [{
/>
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
@@ -67,7 +69,11 @@ const columns = [{
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@@ -82,9 +88,7 @@ export default () => (
/>
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js
Vendored
+13 -8
View File
@@ -55,20 +55,23 @@ const MySearch = (props) => {
);
};
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
<MySearch { ...props.searchProps } />
<br />
</div>
)
}
@@ -96,15 +99,17 @@ const MySearch = (props) => {
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
packages/react-bootstrap-table2-example/examples/search/index.js
Vendored
+12 -8
View File
@@ -36,7 +36,11 @@ const columns = [{
text: 'Product Price'
}];
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@@ -45,9 +49,7 @@ const columns = [{
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
@@ -61,7 +63,11 @@ const columns = [{
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@@ -70,9 +76,7 @@ export default () => (
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
packages/react-bootstrap-table2-example/examples/search/search-formatted.js
Vendored
+14 -10
View File
@@ -38,21 +38,23 @@ const columns = [{
formatter: cell => \`USD \${cell}\` // we will search the data after formatted
}];
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<h3>Try to Search USD at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true // enable searchFormatted
searchFormatted: true
}) }
/>
</div>
@@ -64,7 +66,11 @@ const columns = [{
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@@ -73,9 +79,7 @@ export default () => (
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true