Publish

- react-bootstrap-table2-example@1.0.22 - react-bootstrap-table2-paginator@2.0.5 - react-bootstrap-table-next@3.0.3
Merge pull request #875 from react-bootstrap-table/develop
2026-06-29 05:30:05 +00:00 · 2019-03-26 20:41:04 +08:00 · 2019-03-26 20:39:13 +08:00 · 2019-03-25 23:07:22 +08:00 · 2019-03-24 20:52:26 +08:00 · 2019-03-24 16:55:56 +08:00
7 changed files with 197 additions and 146 deletions
--- a/packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js
@@ -11,141 +11,13 @@ const products = [
  { id: 14, name: 'Item 14', price: 14.5, inStock: true }
 ];

-const columns = [
-  {
-    dataField: 'id',
-    text: 'Product ID'
-  },
-  {
-    dataField: 'name',
-    text: 'Product Name'
-  },
-  {
-    dataField: 'price',
-    text: 'Product Price'
-  },
-  {
-    dataField: 'inStock',
-    text: 'In Stock',
-    formatter: (cellContent, row) => (
-      <div className="checkbox disabled">
-        <label>
-          <input type="checkbox" checked={ row.inStock } disabled />
-        </label>
-      </div>
-    )
-  },
-  {
-    dataField: 'df1',
-    isDummyField: true,
-    text: 'Action 1',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  },
-  {
-    dataField: 'df2',
-    isDummyField: true,
-    text: 'Action 2',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  }
-];
-
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';

-const columns = [
-  {
-    dataField: 'id',
-    text: 'Product ID'
-  },
-  {
-    dataField: 'name',
-    text: 'Product Name'
-  },
-  {
-    dataField: 'price',
-    text: 'Product Price'
-  },
-  {
-    dataField: 'inStock',
-    text: 'In Stock',
-    formatter: (cellContent, row) => (
-      <div className="checkbox disabled">
-        <label>
-          <input type="checkbox" checked={ row.inStock } disabled />
-        </label>
-      </div>
-    )
-  },
-  {
-    dataField: 'df1',
-    isDummyField: true,
-    text: 'Action 1',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  },
-  {
-    dataField: 'df2',
-    isDummyField: true,
-    text: 'Action 2',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  }
-];
-
 class ProductList extends React.Component {
  constructor(props) {
    super(props);
-    this.state = { products };
+    this.state = { products, count: 0 };
  }

  toggleInStock = () => {
@@ -163,17 +35,96 @@ class ProductList extends React.Component {
  };

  render() {
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        formatter: (cell, row, rowIndex, extraData) => (
+          <div>
+            <span>ID: {row.id}</span>
+            <br />
+            <span>state: {extraData}</span>
+          </div>
+        ),
+        formatExtraData: this.state.count
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      },
+      {
+        dataField: 'price',
+        text: 'Product Price'
+      },
+      {
+        dataField: 'inStock',
+        text: 'In Stock',
+        formatter: (cellContent, row) => (
+          <div className="checkbox disabled">
+            <label>
+              <input type="checkbox" checked={ row.inStock } disabled />
+            </label>
+          </div>
+        )
+      },
+      {
+        dataField: 'df1',
+        isDummyField: true,
+        text: 'Action 1',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      },
+      {
+        dataField: 'df2',
+        isDummyField: true,
+        text: 'Action 2',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      }
+    ];
+
    return (
      <div>
-        <h1 className="h2">Products</h1>
+        <h3>Action 1 and Action 2 are dummy column</h3>
+        <button onClick={ this.toggleInStock } className="btn btn-primary">
+          Toggle item 13 stock status
+        </button>
+        <button
+          className="btn btn-success"
+          onClick={ () => this.setState(() => ({ count: this.state.count + 1 })) }
+        >
+          Click me to Increase counter
+        </button>
        <BootstrapTable
          keyField="id"
          data={ this.state.products }
          columns={ columns }
        />
-        <button onClick={ this.toggleInStock } className="btn btn-primary">
-          Toggle item 13 stock status
-        </button>
+        <Code>{ sourceCode }</Code>
      </div>
    );
  }
@@ -183,7 +134,7 @@ class ProductList extends React.Component {
 class ProductList extends React.Component {
  constructor(props) {
    super(props);
-    this.state = { products };
+    this.state = { products, count: 0 };
  }

  toggleInStock = () => {
@@ -200,13 +151,95 @@ class ProductList extends React.Component {
    this.setState(curr => ({ ...curr, products: newProducts }));
  };

+  counter = () => {
+    this.setState(curr => ({ ...curr, count: this.state.count + 1 }));
+  }
+
  render() {
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        formatter: (cell, row, rowIndex, extraData) => (
+          <div>
+            <span>ID: {row.id}</span>
+            <br />
+            <span>Counter: {extraData}</span>
+          </div>
+        ),
+        formatExtraData: this.state.count
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      },
+      {
+        dataField: 'price',
+        text: 'Product Price'
+      },
+      {
+        dataField: 'inStock',
+        text: 'In Stock',
+        formatter: (cellContent, row) => (
+          <div className="checkbox disabled">
+            <label>
+              <input type="checkbox" checked={ row.inStock } disabled />
+            </label>
+          </div>
+        )
+      },
+      {
+        dataField: 'df1',
+        isDummyField: true,
+        text: 'Action 1',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      },
+      {
+        dataField: 'df2',
+        isDummyField: true,
+        text: 'Action 2',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      }
+    ];
+
    return (
      <div>
        <h3>Action 1 and Action 2 are dummy column</h3>
        <button onClick={ this.toggleInStock } className="btn btn-primary">
          Toggle item 13 stock status
        </button>
+        <button
+          className="btn btn-success"
+          onClick={ this.counter }
+        >
+          Click me to Increase counter
+        </button>
        <BootstrapTable
          keyField="id"
          data={ this.state.products }
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-bootstrap-table2-example",
-  "version": "1.0.21",
+  "version": "1.0.22",
  "description": "",
  "main": "index.js",
  "private": true,
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-bootstrap-table2-paginator",
-  "version": "2.0.4",
+  "version": "2.0.5",
  "description": "it's the pagination addon for react-bootstrap-table2",
  "main": "./lib/index.js",
  "repository": {
--- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
@@ -56,7 +56,7 @@ export default ExtendBase =>
        alwaysShowAllBtns
      } = this.props;

-      let pages;
+      let pages = [];
      let endPage = totalPages;
      if (endPage <= 0) return [];

@@ -68,24 +68,42 @@ export default ExtendBase =>
        startPage = endPage - paginationSize + 1;
      }

-      if (startPage !== pageStartIndex && totalPages > paginationSize && withFirstAndLast) {
+      if (alwaysShowAllBtns) {
+        if (withFirstAndLast) {
          pages = [firstPageText, prePageText];
-      } else if (totalPages > 1 || alwaysShowAllBtns) {
-        pages = [prePageText];
        } else {
-        pages = [];
+          pages = [prePageText];
+        }
+      }
+
+      if (startPage !== pageStartIndex &&
+        totalPages > paginationSize &&
+        withFirstAndLast &&
+        pages.length === 0
+      ) {
+        pages = [firstPageText, prePageText];
+      } else if (totalPages > 1 && pages.length === 0) {
+        pages = [prePageText];
      }

      for (let i = startPage; i <= endPage; i += 1) {
        if (i >= pageStartIndex) pages.push(i);
      }

-      if (endPage <= lastPage && pages.length > 1) {
+      if (alwaysShowAllBtns || (endPage <= lastPage && pages.length > 1)) {
        pages.push(nextPageText);
      }
-      if (endPage !== lastPage && withFirstAndLast) {
+      if ((endPage !== lastPage && withFirstAndLast) || (withFirstAndLast && alwaysShowAllBtns)) {
        pages.push(lastPageText);
      }
+
+      // if ((endPage <= lastPage && pages.length > 1) || alwaysShowAllBtns) {
+      //   pages.push(nextPageText);
+      // }
+      // if (endPage !== lastPage && withFirstAndLast) {
+      //   pages.push(lastPageText);
+      // }
+
      return pages;
    }

--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-bootstrap-table-next",
-  "version": "3.0.2",
+  "version": "3.0.3",
  "description": "Next generation of react-bootstrap-table",
  "main": "./lib/index.js",
  "repository": {
--- a/packages/react-bootstrap-table2/src/cell.js
+++ b/packages/react-bootstrap-table2/src/cell.js
@@ -26,7 +26,7 @@ class Cell extends eventDelegater(Component) {
    // if (nextProps.formatter)

    shouldUpdate =
-      nextProps.column.formatter ? !_.isEqual(this.props.row, nextProps.row) : false ||
+      (nextProps.column.formatter ? !_.isEqual(this.props.row, nextProps.row) : false) ||
      this.props.column.hidden !== nextProps.column.hidden ||
      this.props.rowIndex !== nextProps.rowIndex ||
      this.props.columnIndex !== nextProps.columnIndex ||
--- a/packages/react-bootstrap-table2/src/row/should-updater.js
+++ b/packages/react-bootstrap-table2/src/row/should-updater.js
@@ -27,7 +27,7 @@ export default ExtendBase =>
        return true;
      }
      for (let i = 0; i < this.props.columns.length; i += 1) {
-        if (this.props.columns[i].hidden !== nextProps.columns[i].hidden) {
+        if (!_.isEqual(this.props.columns[i], nextProps.columns[i])) {
          return true;
        }
      }
Author	SHA1	Message	Date
AllenFang	df5024892c	Publish - react-bootstrap-table2-example@1.0.22 - react-bootstrap-table2-paginator@2.0.5 - react-bootstrap-table-next@3.0.3	2019-03-26 20:41:04 +08:00
Allen	4448c3f28c	Merge pull request #875 from react-bootstrap-table/develop 20190326 release	2019-03-26 20:39:13 +08:00
AllenFang	196ae33295	fix #859	2019-03-25 23:07:22 +08:00
AllenFang	7f1b7a6c97	fix #838	2019-03-24 20:52:26 +08:00
AllenFang	a6ccafcc75	fix #866	2019-03-24 16:55:56 +08:00