data, keyField and columns is necessary value for toolkits context

packages/react-bootstrap-table2-example/examples/remote/remote-search.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

packages/react-bootstrap-table2-toolkit/context.js

@@ -1,10 +1,18 @@
 /* eslint react/prop-types: 0 */
 /* eslint react/require-default-props: 0 */
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const ToolkitContext = React.createContext();
 
 class ToolkitProvider extends React.Component {
+ static propTypes = {
+ keyField: PropTypes.string.isRequired,
+ data: PropTypes.array.isRequired,
+ columns: PropTypes.array.isRequired,
+ children: PropTypes.node.isRequired
+ }
+
  constructor(props) {
  super(props);
  this.test = false;
@@ -23,9 +31,11 @@ class ToolkitProvider extends React.Component {
  }
 
  render() {
+ const { keyField, columns, data } = this.props;
  return (
  <ToolkitContext.Provider value={ {
- searchProps: this.searchProps
+ searchProps: this.searchProps,
+ baseProps: { keyField, columns, data }
  } }
  >
  { this.props.children }

packages/react-bootstrap-table2/src/contexts/index.js

@@ -13,7 +13,7 @@ const withContext = Base =>
  class BootstrapTableContainer extends remoteResolver(Component) {
  constructor(props) {
  super(props);
- this.DataContext = createDataContext(props.data);
+ this.DataContext = createDataContext();
 
  if (props.columns.filter(col => col.sort).length > 0) {
  this.SortContext = createSortContext(