Merge pull request #1277 from react-bootstrap-table/develop

20200307 release

Author: AllenFang

docs/columns.md

@@ -594,6 +594,7 @@ This prop also accept a function:
 
 * `column`
 * `columnIndex`
+* `props`: It's an object and contain `text` property only.
 
 ## <a name='footerClasses'>column.footerClasses - [String | Function]</a>
 It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:

packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, dateFilter, selectFilter } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
 import { stockGenerator } from 'utils/common';
 
 const products = stockGenerator(8);
 
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
 let nameFilter;
 let priceFilter;
+let qualityFilter;
 let stockDateFilter;
 
 const columns = [{
@@ -19,15 +26,28 @@ const columns = [{
   filter: textFilter({
     getFilter: (filter) => {
       nameFilter = filter;
-    }
+    },
+    onFilter: filterVal => console.log(`Filter product name ${filterVal}`)
+  })
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      qualityFilter = filter;
+    },
+    onFilter: filterVal => console.log(`Filter quality ${filterVal}`)
   })
 }, {
   dataField: 'price',
   text: 'Price',
   filter: textFilter({
     getFilter: (filter) => {
       priceFilter = filter;
-    }
+    },
+    onFilter: filterVal => console.log(`Filter Price: ${filterVal}`)
   })
 }, {
   dataField: 'inStockDate',
@@ -36,13 +56,15 @@ const columns = [{
   filter: dateFilter({
     getFilter: (filter) => {
       stockDateFilter = filter;
-    }
+    },
+    onFilter: filterVal => console.log(`Filter date: ${filterVal}`)
   })
 }];
 
 const handleClick = () => {
   nameFilter('');
   priceFilter('');
+  qualityFilter('');
   stockDateFilter();
 };
 

packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js

@@ -14,7 +14,9 @@ const columns = [{
   dataField: 'name',
   text: 'Product Name',
   footer: 'hello',
-  filter: textFilter()
+  filter: textFilter({
+    id: 'identify'
+  })
 }, {
   dataField: 'price',
   text: 'Product Price',
@@ -54,7 +56,6 @@ export default () => (
       data={ products }
       columns={ columns }
       filter={ filterFactory() }
-      filterPosition="bottom"
       selectRow={ selectRow }
     />
     <Code>{ sourceCode }</Code>

packages/react-bootstrap-table2-example/examples/footer/column-format-table.js

@@ -7,7 +7,7 @@ import { productsGenerator } from 'utils/common';
 
 const products = productsGenerator();
 
-function priceFormatter(column, colIndex) {
+function priceFormatter(column, colIndex, { text }) {
   return (
     <h5>
       <strong>$$ {column.text} $$</strong>
@@ -37,7 +37,7 @@ const columns = [
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 
-function priceFormatter(column, colIndex) {
+function priceFormatter(column, colIndex, { text }) {
   return (
     <h5><strong>$$ { column.text } $$</strong></h5>
   );

packages/react-bootstrap-table2-example/src/utils/common.js

@@ -77,6 +77,7 @@ export const stockGenerator = (quantity = 5) =>
     name: `Stock Name ${index}`,
     price: Math.floor((Math.random() * 2) + 1),
     visible: Math.random() > 0.5,
+    quality: index % 3,
     inStockDate:
       new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
   }));

packages/react-bootstrap-table2-filter/README.md

@@ -64,7 +64,8 @@ const priceFilter = textFilter({
   comparator: Comparator.EQ, // default is Comparator.LIKE
   caseSensitive: true, // default is false, and true will only work when comparator is LIKE
   style: { ... }, // your custom styles on input
-  delay: 1000 // how long will trigger filtering after user typing, default is 500 ms
+  delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 });
 
 // omit...
@@ -110,6 +111,7 @@ const qualityFilter = selectFilter({
   comparator: Comparator.LIKE, // default is Comparator.EQ
   style: { ... }, // your custom styles on input
   withoutEmptyOption: true  // hide the default select option
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 });
 
 // omit...
@@ -197,6 +199,7 @@ const qualityFilter = multiSelectFilter({
   comparator: Comparator.LIKE, // default is Comparator.EQ
   style: { ... }, // your custom styles on input
   withoutEmptyOption: true  // hide the default select option
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 });
 
 // omit...
@@ -236,6 +239,7 @@ const numberFilter = numberFilter({
   numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on number input/select
   numberClassName: 'custom-number-class',  // custom the class on ber input/select
   defaultValue: { number: 2103, comparator: Comparator.GT }  // default value
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 })
 
 // omit...
@@ -275,6 +279,7 @@ const dateFilter = dateFilter({
   dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on date input
   dateClassName: 'custom-date-class',  // custom the class on date input
   defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }  // default value
+  id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
 })
 
 // omit...

packages/react-bootstrap-table2-filter/src/components/date.js

@@ -128,8 +128,9 @@ class DateFilter extends Component {
 
   render() {
     const {
+      id,
       placeholder,
-      column: { text },
+      column: { dataField, text },
       style,
       comparatorStyle,
       dateStyle,
@@ -138,6 +139,9 @@ class DateFilter extends Component {
       dateClassName
     } = this.props;
 
+    const comparatorElmId = `date-filter-comparator-${dataField}${id ? `-${id}` : ''}`;
+    const inputElmId = `date-filter-column-${dataField}${id ? `-${id}` : ''}`;
+
     return (
       <div
         onClick={ e => e.stopPropagation() }
@@ -146,12 +150,12 @@ class DateFilter extends Component {
       >
         <label
           className="filter-label"
-          htmlFor={ `date-filter-comparator-${text}` }
+          htmlFor={ comparatorElmId }
         >
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.dateFilterComparator = n }
-            id={ `date-filter-comparator-${text}` }
+            id={ comparatorElmId }
             style={ comparatorStyle }
             className={ `date-filter-comparator form-control ${comparatorClassName}` }
             onChange={ this.onChangeComparator }
@@ -160,11 +164,11 @@ class DateFilter extends Component {
             { this.getComparatorOptions() }
           </select>
         </label>
-        <label htmlFor={ `date-filter-column-${text}` }>
+        <label htmlFor={ inputElmId }>
           <span className="sr-only">Enter ${ text }</span>
           <input
             ref={ n => this.inputDate = n }
-            id={ `date-filter-column-${text}` }
+            id={ inputElmId }
             className={ `filter date-filter-input form-control ${dateClassName}` }
             style={ dateStyle }
             type="date"
@@ -181,6 +185,7 @@ class DateFilter extends Component {
 DateFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  id: PropTypes.string,
   filterState: PropTypes.object,
   delay: PropTypes.number,
   defaultValue: PropTypes.shape({
@@ -232,7 +237,8 @@ DateFilter.defaultProps = {
   comparatorStyle: undefined,
   comparatorClassName: '',
   dateStyle: undefined,
-  dateClassName: ''
+  dateClassName: '',
+  id: null
 };
 
 

packages/react-bootstrap-table2-filter/src/components/multiselect.js

@@ -112,6 +112,7 @@ class MultiSelectFilter extends Component {
 
   render() {
     const {
+      id,
       style,
       className,
       filterState,
@@ -128,17 +129,18 @@ class MultiSelectFilter extends Component {
 
     const selectClass =
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
+    const elmId = `multiselect-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
 
     return (
       <label
         className="filter-label"
-        htmlFor={ `multiselect-filter-column-${column.text}` }
+        htmlFor={ elmId }
       >
         <span className="sr-only">Filter by {column.text}</span>
         <select
           { ...rest }
           ref={ n => this.selectInput = n }
-          id={ `multiselect-filter-column-${column.text}` }
+          id={ elmId }
           style={ style }
           multiple
           className={ selectClass }
@@ -157,6 +159,7 @@ MultiSelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
   options: PropTypes.object.isRequired,
+  id: PropTypes.string,
   filterState: PropTypes.object,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
@@ -174,7 +177,8 @@ MultiSelectFilter.defaultProps = {
   className: '',
   withoutEmptyOption: false,
   comparator: EQ,
-  caseSensitive: true
+  caseSensitive: true,
+  id: null
 };
 
 export default MultiSelectFilter;

packages/react-bootstrap-table2-filter/src/components/number.js

@@ -170,6 +170,7 @@ class NumberFilter extends Component {
   render() {
     const { isSelected } = this.state;
     const {
+      id,
       column,
       options,
       style,
@@ -188,6 +189,9 @@ class NumberFilter extends Component {
       ${!isSelected ? 'placeholder-selected' : ''}
     `;
 
+    const comparatorElmId = `number-filter-comparator-${column.dataField}${id ? `-${id}` : ''}`;
+    const inputElmId = `number-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
+
     return (
       <div
         onClick={ e => e.stopPropagation() }
@@ -196,13 +200,13 @@ class NumberFilter extends Component {
       >
         <label
           className="filter-label"
-          htmlFor={ `number-filter-comparator-${column.text}` }
+          htmlFor={ comparatorElmId }
         >
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.numberFilterComparator = n }
             style={ comparatorStyle }
-            id={ `number-filter-comparator-${column.text}` }
+            id={ comparatorElmId }
             className={ `number-filter-comparator form-control ${comparatorClassName}` }
             onChange={ this.onChangeComparator }
             defaultValue={ this.getDefaultComparator() }
@@ -214,12 +218,12 @@ class NumberFilter extends Component {
           options ?
             <label
               className="filter-label"
-              htmlFor={ `number-filter-column-${column.text}` }
+              htmlFor={ inputElmId }
             >
               <span className="sr-only">{`Select ${column.text}`}</span>
               <select
                 ref={ n => this.numberFilter = n }
-                id={ `number-filter-column-${column.text}` }
+                id={ inputElmId }
                 style={ numberStyle }
                 className={ selectClass }
                 onChange={ this.onChangeNumberSet }
@@ -228,11 +232,11 @@ class NumberFilter extends Component {
                 { this.getNumberOptions() }
               </select>
             </label> :
-            <label htmlFor={ `number-filter-column-${column.text}` }>
+            <label htmlFor={ inputElmId }>
               <span className="sr-only">{`Enter ${column.text}`}</span>
               <input
                 ref={ n => this.numberFilter = n }
-                id={ `number-filter-column-${column.text}` }
+                id={ inputElmId }
                 type="number"
                 style={ numberStyle }
                 className={ `number-filter-input form-control ${numberClassName}` }
@@ -250,6 +254,7 @@ class NumberFilter extends Component {
 NumberFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  id: PropTypes.string,
   filterState: PropTypes.object,
   options: PropTypes.arrayOf(PropTypes.number),
   defaultValue: PropTypes.shape({
@@ -305,7 +310,8 @@ NumberFilter.defaultProps = {
   comparatorStyle: undefined,
   comparatorClassName: '',
   numberStyle: undefined,
-  numberClassName: ''
+  numberClassName: '',
+  id: null
 };
 
 export default NumberFilter;