20190825 release

docs/columns.md

@@ -49,6 +49,7 @@ Available properties in a column object:
 * [editorRenderer](#editorRenderer)
 * [filter](#filter)
 * [filterValue](#filterValue)
+* [searchable](#searchable)
 * [csvType](#csvType)
 * [csvFormatter](#csvFormatter)
 * [csvText](#csvText)
@@ -917,6 +918,9 @@ A final `String` value you want to be filtered.
 }
 ```
 
+## <a name='searchable'>column.searchable - [Boolean]</a>
+Default the column is searchable. Give `false` to disable search functionality on specified column.
+
 ## <a name='csvType'>column.csvType - [Object]</a>
 Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
 

docs/row-expand.md

@@ -18,6 +18,7 @@
 * [expandColumnPosition](#expandColumnPosition)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
+* [className](#className)
 * [parentClassName](#parentClassName)
 
 ### <a name="renderer">expandRow.renderer - [Function]</a>
@@ -168,6 +169,27 @@ const expandRow = {
 };
 ```
 
+### <a name='className'>expandRow.className - [String | Function]</a>
+Apply the custom class name on the expanding row. For example: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  className: 'foo'
+};
+```
+following usage is more flexible way for customing the class name: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  className: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'foo';
+    return 'bar';
+  }
+};
+```
+
 ### <a name='parentClassName'>expandRow.parentClassName - [String | Function]</a>
 Apply the custom class name on parent row of expanded row. For example: 
 

packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js

@@ -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>
+);

packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow1 = {
+  className: 'expanding-foo',
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+const expandRow2 = {
+  className: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'expanding-foo';
+    return 'expanding-bar';
+  },
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  className: 'expanding-foo',
+  renderer: row => (
+    <div>.....</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  className: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'expanding-foo';
+    return 'expanding-bar';
+  },
+  renderer: row => (
+    <div>...</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow1 }
+    />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow2 }
+    />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/search/searchable-column.js

@@ -0,0 +1,87 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  searchable: false
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  searchable: false
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  searchable: false
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  searchable: false
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <h3>Column name and price is  unsearchable</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);