diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 83c6c8a75..000000000
--- a/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "presets": ["react", "es2015", "stage-0"]
-}
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index ca70c653f..000000000
--- a/.eslintrc
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "extends": "airbnb",
- "parser": "babel-eslint",
- "env": {
- "browser": true,
- "jest": true,
- "node": true
- },
- "plugins": [
- "react"
- ],
- "rules": {
- "comma-dangle": ["error", "never"],
- "react/jsx-curly-spacing": [2, "always"],
- "react/forbid-prop-types": 0,
- "react/jsx-filename-extension": 0,
- "react/jsx-space-before-closing": 0,
- "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
- "import/extensions": 0, // skip import extensions
- "import/no-unresolved": [0, { "ignore": ["^react-bootstrap-table"] }], // monorepo setup
- "import/prefer-default-export": 0,
- "import/no-extraneous-dependencies": 0
- },
- "globals": {
- "jest": false
- }
-}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 1f0b21e4b..000000000
--- a/.gitignore
+++ /dev/null
@@ -1,17 +0,0 @@
-# node
-node_modules
-package-lock.json
-
-# testing
-coverage
-.eslintcache
-
-# misc
-.DS_Store
-.vscode
-
-# logs
-lerna-debug.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 02a549251..000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-language: node_js
-
-node_js:
- - "7"
- - "6"
-
-cache:
- yarn: true
-
-branches:
- only:
- # skip master branch when it's under development phase
- # - master
- - develop
-
-before_install:
- - curl -o- -L https://yarnpkg.com/install.sh | bash -s
- - export PATH="$HOME/.yarn/bin:$PATH"
-
-install: yarn install
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
deleted file mode 100644
index 9d8ed0161..000000000
--- a/CONTRIBUTING.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Contributing
-
-# Issues
-Before opening an issue, please make sure your problem or request doesn't exist. When opening an issue, please provide the following information if possible:
-
-* Example code or repo (please keep it simple and minimal)
-* Steps to reproduce.
-* `react-bootstrap-table2` version.
-
-Additionally, asking questions and requesting new features are welcomed via [issue tracker](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues).
-
-# Pull Requests
-Check [here](./docs/development.md) for getting started with development.
-
-* We recommend filing an [issue](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues) before you implement any new features.
-* Please ensure that all the test suites have passed before submitting a PR. Besides, always test the actual business logic.
-* If your PR is trying to fix a bug, please describe the details as much as you could and tag the bug number with hashtag.
-
-# For the members of react-bootstrap-table2 org
-* Please convert the ticket to issue when the ticket has moved from `Backlog` to `Ready`.
-* Please update the docs if any API, feature or component props was changed or added. The code and docs should always be in sync.
-* Please add a story example if any new feature was implemented.
\ No newline at end of file
diff --git a/README.md b/README.md
deleted file mode 100644
index 1d5d13d79..000000000
--- a/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# react-bootstrap-table2
-Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
-
-## The problems/features I want to solve
-* Performance
-* Fully compatiable with bootstrap 3 and 4(`react-bootstrap-table@4.0.0` already done)
-* Clean Code and Testing
-* Decrease the size of bundled file
-* **Split module/functionality from core module, make core module more lightweight**
-* Use [`storybook`](https://github.com/storybooks/storybook) to build examples
-* Support the aggregation(summary) view
-* Support the table footer
-* Support column/row span on header and body
-* Support sticky header
-* Support table section([react-bootstrap-table#721](https://github.com/AllenFang/react-bootstrap-table/pull/721))
-* Handle events well
-* Fix unalign issues
-* Make **stateless** table more easy to use(`react-bootstrap-table` alread have `remote` mode but have some bugs)
-* Customizable table
-* Support the nested data([react-bootstrap-table#50](https://github.com/AllenFang/react-bootstrap-table/issues/50◊))
-* Consider to support column resize
-* Consider to make animation on `react-bootstrap-table2` more easy
-
-## The feature may lost on react-bootstrap-table
-* Have a great chance that I don't support the vertical scrollbar on table
\ No newline at end of file
diff --git a/blog/2018/01/24/new-version-0.1.0.html b/blog/2018/01/24/new-version-0.1.0.html
new file mode 100644
index 000000000..e7a93d232
--- /dev/null
+++ b/blog/2018/01/24/new-version-0.1.0.html
@@ -0,0 +1,54 @@
+New Version 0.1.0 · react-bootstrap-table2 About five months works, we finally get a first drop for react-bootstrap-table2. I just want to say that I'm very sorry to let you guys to wait for a long time.
+I know a lots of people experienced many bugs or feel hard to customize on table. Anyway, I'm very appreciated everyone's helps and feedbacks, I think that's the reason why I decided to rebuilt react-bootstrap-table2.
+For the first drop, I really can't finish all the legacy features, but I will work more hard to finish them by March or April. Please see the release plan
+
+Basic Table
+
+Scrollabe table is not yet implement
+
+Basic Table Sort
+
+Multi sort is not yet implement
+Sort management is not yet implement
+
+Basic Row Selection
+
+Custom Selection is not yet implement
+
+Basic Cell Edit
+
+Custom Cell Edit is not yet implement
+
+Basic Pagination
+
+Custom Pagination is not yet implement
+
+Basic Column Filter(Text Filter only)
+
+
+One table structure, never unalign again.
+Remote enhancement, please read it
+100% easy to customize the header columns, cells rows
+
+In 2018, let's try react-bootstrap-table2 and give a star for this repo, I think it's the biggest encouragement for me :)
+Feel free to open issues to ask any questions.
+Regards,
+Roadmap · react-bootstrap-table2
+Select Filter
+Regex Filter
+
+
+Date Filter
+Number Filter
+
+
+Filter functionality enhancement
+
+Clean filter or clean all
+Programmatically filter
+
+
+
+Expand row
+Start compatible for bootstrap@4
+Sort management(External sort)
+Work on partial data(sort, filter) for pagination(remote or not remote)
+
+
+Scrol Table(Probably not implement, we are still investigation)
+
+
+Row/Column span
+Table toolkit base
+
+
+Row delete
+export CSV
+
+
+Sticky Header
+Frozen Column
+
+New Release (2018-02-02) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.2react-bootstrap-table2-filter@0.1.2
+
+Fixed call selectRow.onSelect twice(#180 )
+Fixed wrong colSpan for noDataIndication if there are column is hidden(#185 )
+
+
+Support Select Filter(#183 )
+
+
+Column filter style improvement(#183 )
+
+Remember to add the css of react-bootstrap-table2-filter
+
+Fix key field in cell should not be cell value(#172 )
+
+New Release (2018-02-14) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.3react-bootstrap-table2-filter@0.1.3
+
+Fixed TextFilter contains an input of type text with both value and defaultValue props(a0af964 )
+
+
+Support Number Filter(#200 )
+Support caseSensitive on Text and Select filter(#201 )
+Support sort event listener(#202 )
+
+
+Text Filter right now is case insensitive which same as react-bootstrap-table#201
+rowEvents.onClick will be wrapped so that funcation can recieve additional informatnion like: row and rowIndex(#187 )
+New Release (2018-03-06) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.4react-bootstrap-table2-editor@0.1.2
+
+Fix the sort will not be triggered when data is changed(#232 )
+Fix empty #219 )
+Fix Failed prop type: The prop defaultValue is marked as required in TextEditor, but its value is null(5dd1f1e9 )
+
+
+rowEvents.onMouseEnter and rowEvents.onMouseLeave will be wrapped up and pass row informations(#233 )
+New Release (2018-03-19) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.5
+
+Fix selection was broken when data changed(#260 )
+
+
+Add classes and id on BootstrapTable for customization(#247 )
+column.hidden will not render element instead of setting display:none(#261 )
+New Release (2018-04-01) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.6react-bootstrap-table-editor@0.1.4
+
+Fixed includes and find are not supported in IE(#274 )
+Fixed empty table is missing the last cell when row seleciton is enable(#276 )
+
+
+Allow to configure the default sort direction(#286 )
+Allow to custom the cell editor's style and class(#268 )
+
+
+Don't render anything if noDataIndication is not given(#275 )
+
+New Release (2018-04-01) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.6react-bootstrap-table2-editor@0.1.4react-bootstrap-table2-filter@0.1.4
+
+Fixed includes and find are not supported in IE(#274 )
+Fixed empty table is missing the last cell when row seleciton is enable(#276 )
+
+
+Allow to configure the default sort direction(#286 )
+Allow to custom the cell editor's style and class(#268 )
+
+
+Don't render anything if noDataIndication is not given(#275 )
+
+New Release (2018-04-15) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.8react-bootstrap-table2-filter@0.1.6
+
+Programmtically Filters(#287 )
+
+
+Pass event object to selectRow.onSelect and selectRow.onSelectAll.(#304 )
+
+New Release (2018-05-07) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.9react-bootstrap-table2-editor@0.2.0react-bootstrap-table2-paginator@0.1.2
+N/A
+
+Rich cell editors(#322 )
+Allow to custom cell editors(#322 )
+Implement pagination total indication(#323 )
+
+
+rowEvents support onDoubleClick(#324 )
+New Release (2018-05-13) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.11react-bootstrap-table2-filter@0.1.7
+
+Fixed filtered table doesn't rerender on prop change(#303 )
+Fix programmatically filter broken when filter multiple column at the same time(#334 )
+
+N/A
+
+Implement wrapperClasses to allow to custom the class on outer element which wrap up the table element(#325 )
+
+New Release (2018-05-23) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.12
+
+Fix the bool rendering issues in React (#340 )
+
+N/A
+N/A
+New Release (2018-06-04) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.13react-bootstrap-table2-paginator@0.1.4react-bootstrap-table2-filter@0.2.0react-bootstrap-table2-overlay@0.1.2
+
+Fix remote sort still sorting data(#354 )
+Fix react-bootstrap-table2-overlay does not consider caption height(b11019c )
+
+
+Support date filter(#365 )
+
+
+Support to custome the pagination total(#359 )
+Support to custom the selection column(#364 )
+
+New Release (2018-06-24) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.14react-bootstrap-table2-paginator@0.1.5react-bootstrap-table2-filter@0.3.0
+
+Fix table will jump to first page after cell editing in remote mode(42c6bc0 )
+Click on filter will trigger sorting(#380 )
+
+
+Support custom filter(#389 )
+
+N/A
+New Release (2018-07-15) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.15react-bootstrap-table2-paginator@0.1.6
+
+Fixed Filter + Pagination returns empty rows(7a787bb )
+
+N/A
+
+Custom the table header class via [headerClasses] prop on BootstrapTable(199bf8e )
+
+New Release (2018-07-30) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table2-filter@0.3.1
+N/A
+N/A
+New Release (2018-08-01) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table2-filter@0.3.2
+N/A
+N/A
+New Release (2018-08-04) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@1.0.0react-bootstrap-table2-filter@1.0.0react-bootstrap-table2-editor@1.0.0react-bootstrap-table2-paginator@1.0.0react-bootstrap-table2-toolkit@1.0.0
+In 1.0.0, you have to upgrade react and react-dom to 16.3.0 or behind.
+
+fix bug for default sort and filter have potential issue when remote enabled.
+
+
+Row Expand
+Table Search
+Export CSV
+
+New Release (2018-08-12) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@1.1.0react-bootstrap-table2-toolkit@1.0.1react-bootstrap-table2-paginator@1.0.1
+
+Fixed column.style and column.align will conflicts(#481 )
+Fixed search will be clear if search the same text twice(#470 )
+Fixed debounce bug(#468 )
+Fixed pagination.paginationTotalRenderer give wrong from and to argument(#467 )
+
+
+Export CSV allow to export current display data instead of whole list(#469 )
+
+
+Performance improvment on cell level(#449 )
+
+New Release (2018-08-21) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@1.1.2react-bootstrap-table-toolkit@1.0.2react-bootstrap-table2-paginator@1.0.2
+
+Fixed missing onChange prop for selection checkbox(#417 )
+Fixed pagination calculation fails when data change(#474 )
+
+
+N/A
+
+Fixed some wrong code in storybooks
+
+New Release (2018-08-27) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@1.1.3
+
+Fixed selectRow.onSelectAll will return undefined value after search(#509 )
+
+N/A
+
+Fixed some wrong code in storybooks
+column.sortFunc now pass rowA and rowB(#508 )
+New Release (2018-09-03) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@1.1.4react-bootstrap-table2-editor@1.0.1react-bootstrap-table2-toolkit@1.0.3
+
+Fixed selectRow.onSelectAll will return undefined value after search(#509 )
+
+
+Support dummy column(#520 )
+
+Enable it via column.isDummyField
+
+Able to export csv by current selected rows(#522 )
+
+
+Add onStartEdit callback which will be called when cell editor is trigger(#523 )
+
+New Release (2018-09-30) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@1.2.0react-bootstrap-table2-editor@1.1.0react-bootstrap-table2-toolkit@1.1.0
+
+Fixed cannot assign to read only property 'textAlign' of object(#575 )
+Fixed wrong results pass to selectRow.onSelectAll when isSelect argument is false(#570 )
+
+
+Implement expandRow.onlyOneExpanding(#574 )
+Implement selectRow.hideSelectAll(#574 )
+Support Default Search(#571 )
+Implement auto select input text when editing cell(#569 )
+
+
+Fixe a non printable characters in csv output(#572 )
+Add onContextMenu on rowEvents(#556 )
+
+New Release (2018-10-07) · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@1.2.1react-bootstrap-table2-paginator@1.0.3react-bootstrap-table2-toolkit@1.1.1
+
+Fixed remote search bug(#591 )
+Fixed wrong calculation for from and to in pagination when remote search/filter enable and data is shrink below the current page(#594 )
+
+
+Implement column.sortCaret(#593 ) for customing the sort caret
+
+
+Easy to access the exposed API from react ref(#592 )
+
+New Release (2018-10-14) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@1.3.0react-bootstrap-table2-editor@1.2.0
+
+Fixed bug if pagination props changes(#599 )
+
+
+Support expand/collapse row only though expand indicator(#546 )
+Support selectRow.clickToExpand, which allow user to click on row to select/expand row at the same time(#497 )
+Support render tabIndex on td(#607 )
+
+
+Improve row level performance(#497 )
+
+New Release (2018-10-29) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@1.3.1react-bootstrap-table2-editor@1.2.1
+
+Try to fixed Uncaught TypeError: l.getData is not a function.
+
+
+Support async cellEdit.beforeSaveCell(#634 )
+Support async column.validator(#633 )
+Enhance column.events(#632 )
+
+New Release (2018-11-04) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.0react-bootstrap-table2-filter@1.0.2
+
+Allow to call setState in selectRow.onSelect and selectRow.onSelectAll(#644 )
+Allow to use array for select filter options(#646 )
+
+New Release (2018-11-10) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.1react-bootstrap-table2-filter@1.1.0react-bootstrap-table2-paginator@1.0.4react-bootstrap-table2-editor@1.2.2
+
+Fixed wrong usage of label and value for the options of select filter.
+Fixed wrong from and to value when enable showTotal for pagination.
+Fixed condensed is broken in bootstrap@4
+Fixed the error message disappear in bootstrap@4
+
+New Release (2018-12-05) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.2
+
+Fixed expandRow.onExpand called twice on click by expand column(a23599f )
+Fixed synthetic event issue for selectRow.onSelect and selectRow.onSelectAll(a7ae524 )
+
+New Release (2018-12-21) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.3
+
+Fixed a non expandable row still expandable when expandRow.showExpandColumn is enable(#698 )
+
+N/A
+
+Support hidden row(4ddbfd4 )
+Pass rowKey and expandable to expandRow.expandColumnRenderer callback function(bc4697b )
+
+New Release (2018-12-23) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.4
+
+Fixed expand row borken(#725 )
+
+N/A
+N/A
+New Release (2018-12-25) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@2.0.0react-bootstrap-table2-paginator@2.0.0
+N/A
+N/A
+
+Impove the flexibility about customizing pagination components.
+
+New Release (2019-01-06) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@2.0.1react-bootstrap-table2-filter@1.1.1react-bootstrap-table2-paginator@2.0.1react-bootstrap-table2-toolkit@1.1.2
+
+Fixed export csv error (TypeError: this.visibleRows is not a function)(#745 )
+Fixed typeError happened on export CSV after js file compression(#745 )
+Fixed column header hides but not columnBody or columnData(#741 )
+Fixed props type mismatch for SizePerPageOption component(#742 )
+
+N/A
+
+Support render expand column at the right side(#746 )
+Support column.onFilter hook function(#743 )
+
+New Release (2019-01-20) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@2.1.0react-bootstrap-table2-filter@1.1.2react-bootstrap-table2-toolkit@1.2.0
+
+Fixed can not clear date filter(9988e79 )
+
+
+Support built-in search clear button(1c68892 )
+Support table footer(#703 )
+
+N/A
+New Release (2019-02-09) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@2.1.1react-bootstrap-table2-filter@1.1.3react-bootstrap-table2-toolkit@1.2.1react-bootstrap-table2-paginator@2.0.2
+
+Fixed Standalone Pagination render wrong page list when user do the filter or search(cf043c6 , 63c2630 , cacc28e )
+Fixed Controlled input element lose focus on re-render inside expanded rows(8bef7eb )
+
+N/A
+
+Allow to return a custom filter results from onFilter(aafbc7e )
+
+New Release (2019-02-16) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@2.1.2react-bootstrap-table2-filter@1.1.4react-bootstrap-table2-toolkit@1.2.2
+N/A
+N/A
+New Release (2019-02-18) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@2.2.0react-bootstrap-table2-toolkit@1.3.0react-bootstrap-table2-paginator@2.0.3
+N/A
+
+Support Column Toggle(#800 )
+
+
+Support PaginationTotalStandalone component(#801 )
+Add rowIndex for selectRow.selectionRenderer(a7c2a49 )
+
+New Release (2019-02-24) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.0.0react-bootstrap-table2-filter@1.1.5react-bootstrap-table2-toolkit@1.3.1
+
+Fixed cell didn't rerender correctly when column.formatter defined and use row inside the column.formatter function.(bf0c5c4 )
+Fixed selection broken when call setState in selectRow.onSelect(c01f45a )
+Fixed search and filter perform a abnormal behavor(#811 )
+
+N/A
+
+Allow to add custom className on Export CSV and Clear Search button(09f21e8 )
+Allow to operate on cell editing context via reacr refs(#815 )
+
+New Release (2019-03-10) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.0.1react-bootstrap-table2-filter@1.1.6react-bootstrap-table2-paginator@2.0.4react-bootstrap-table2-toolkit@1.3.2
+
+Fixed btnContextual prop on SizePerPageDropdownStandalone not passed to SizePerPageDropdown(3af30a0 )
+Fixed expanded row column span does not update(#837 )
+Fixed column filter with custom pagination is not work well(921e8c7 )
+Fixed pagination is not work well when data delete or insert(e9f08d2 )
+
+N/A
+N/A
+New Release (2019-03-17) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.0.2react-bootstrap-table2-filter@1.1.7react-bootstrap-table2-toolkit@1.4.0
+
+Fixed remote filter borken(7642bfa )
+Fixed custom editor didn't cancel when switch to anther cell(c5d9e04 )
+
+
+Support to export only searched/filtered data cross pagesd0e70f7
+
+N/A
+New Release (2019-03-26) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.0.3react-bootstrap-table2-paginator@2.0.5
+
+Fixed cell won't be updated when column.formatExtraData change(196ae33 )
+Fix pagination.alwaysShowAllBtns perform wrongly in some case(7f1b7a6 )
+Fix column won't be updated when switch column order dynamically(a6ccafc )
+
+N/A
+N/A
+New Release (2019-03-31) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.0react-bootstrap-table2-editor@1.2.3react-bootstrap-table2-filter@1.1.8
+N/A
+
+Animation on expand/collapse row(#861 )
+
+
+Get Date information via UTC methods(#874 )
+
+New Release (2019-04-16) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.1react-bootstrap-table2-filter@1.1.9react-bootstrap-table2-paginator@2.0.6react-bootstrap-table2-toolkit@1.4.1
+
+Fix expandRow.expanded undefined when enable sort and row expand(160dede )
+
+
+Add onDataSizeChange prop for listening data size change in table(363a432 )
+
+
+Allow select options initialization with empty array(#894 )
+Accessibility on table seach input and filter(#890 )
+
+New Release (2019-04-27) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.2react-bootstrap-table2-toolkit@1.4.2
+
+Fix rendering searchbar will throw tableId prop type warning(#914 )
+Fix expandRow does not work with nested keyField(36fa9b8 )
+Fix CSV Export doesn't handle double quotes(737922a )
+Fix column.onClick some parameters is undefined if column.editable is true(6168bd7 )
+
+N/A
+
+Allow to custom the style on selection header cell via selectRow.headerColumnStyle(0f37fae )
+
+New Release (2019-05-19) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.3react-bootstrap-table2-toolkit@2.0.0react-bootstrap-table2-overlay@2.0.0
+
+Fix clicking on selection column will trigger row expand(2c6cc91 )
+Fix file saver issue for IE(55eea6f )
+
+N/A
+
+Enhance Table header accessibility(a1457df )
+Enhance Search input accessibility(7c259cd )
+Upgrade react-loading-overlay for react-bootstrap-table2-overlay(036c3fd )
+
+New Release (2019-06-10) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.4react-bootstrap-table2-editor@1.2.4react-bootstrap-table2-toolkit@2.0.1
+
+Fixed tabindex on table headers should not be > 0(4ec02b2 )
+
+N/A
+New Release (2019-06-25) · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.5react-bootstrap-table2-filter@1.1.10react-bootstrap-table2-paginator@2.0.7
+
+Fixed can not use classes in IE(221e336 )
+Fixed column formatter can not work with external state with expandRow(4cf6e65 )
+Fixed multiselect filter broken in IE(e58533d )
+
+N/A
+
+Allow firstPageText, prePageText, nextPageText and lastPageText adopt PropType.node type(7382010 )
+
+New Release (2019-07-21) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.1.6react-bootstrap-table2-editor@1.3.0
+
+Fixed incorrect column size when dynamic change selectRow.hideSelectColumn(d7e1f1d )
+
+
+Support saving type of cell editing(92f1449 )
+
+
+Enhance serveral examples and docs
+Allow to custom the classname on the parent row of expanded row(ec4864d )
+Add rowIndex as second arguments for expandRow.renderer(db22bb9 )
+
+New Release (2019-08-10) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.1.8react-bootstrap-table2-editor@1.3.2react-bootstrap-table2-filter@1.1.11react-bootstrap-table2-paginator@2.0.9
+
+Fixed inconsistence filter logic in custom filtering(423769c )
+Fixed column toggle will cancel the filter state(4de565b )
+Fixed wrong type convert when column didn't have specified type(08ec8a9 )
+Fixed pagination elements not on same row/line(1a44ce0 )
+
+N/A
+
+column.editor.getOptions recieve the second argument which contain row and column(856e63d )
+New Release (2019-08-25) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.1.9react-bootstrap-table2-filter@1.1.12
+
+Fixed onFilter broken(eb204f6 )
+Fixed columns doesn't update correctly when enable column toggle(43b5eeb )
+Fixed disabling cell edit on table throws exception(70827ee )
+
+N/A
+
+Allow to configure the options of select filter by a custom function(23cb0bb )
+Add expandRow.className for customing the class on expanding row(c12d3fa )
+
+New Release (2019-09-08) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.2.0react-bootstrap-table2-editor@1.4.0react-bootstrap-table2-filter@1.2.0react-bootstrap-table2-paginator@2.1.0react-bootstrap-table2-toolkit@2.1.0
+N/A
+N/A
+
+Avoid warning for react legacy lifecycle(7c8bf00
+Support custom search on cell level(00b1558
+Support column.sortValue for custom the sort value of cell(ec1f96c )
+Enhance column.headerEvents and column.footerEvents for adding some useful data(16128e7 )
+
+New Release (2019-09-29) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.2.1
+
+Fixed select all broken if keyField is nested(1b9bd63 )
+Fixed can not configure tabIndex for header column(b2121fd )
+Try to fix abnormal issue in selection.js(18caf0a )
+
+N/A
+N/A
+New Release (2019-11-09) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.0react-bootstrap-table2-filter@1.3.0
+
+Fixed select all broken if keyField is nested(1b9bd63 )
+Fixed can not configure tabIndex for header column(b2121fd )
+Try to fix abnormal issue in selection.js(18caf0a )
+
+N/A
+N/A
+New Release (2019-11-16) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.1
+N/A
+N/A
+
+Support selectRow.nonSelectableStyle and selectRow.nonSelectableClasses to custom nonselectable row
+Add default class to selection column and expand column.
+Fix react key warning when apply filterPosition props
+
+New Release (2019-12-02) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.2
+
+Fixed incorrect row colspan when apply column toggle or column.hidden(4a340c7 )
+Fixed filterPosition property does not work with rowSelect(8ecdbf6 )
+
+N/A
+N/A
+New Release (2019-12-07) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.3react-bootstrap-table2-toolkit@2.1.1
+
+Fixed wrong table caption in bootstrap 4(38b0fb3 )
+
+
+Allow to export table footer to csv file(47d6eb0 )
+Allow to manage sorting state(2068f51 )
+
+
+One-time sorting configuration(a07b2da )
+
+New Release (2020-02-09) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.4react-bootstrap-table2-toolkit@2.1.2
+
+Fixed accessibility issue: Users navigating with tab cannot trigger sort functionality(bfb2592 )
+Fixed column sorting feature breaks if the initial columns array doesn't have sort field(5cc7882 )
+Fixed columns initially hidden when using ToolKitProvider and columns array changes(7162728 )
+
+N/A
+
+Allow to add class on thead and tbody(7b593a7 )
+
+New Release (2020-02-16) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.5
+
+Fixed Accessibility Issue: Sortable table headers not read by sceen reader(2d418d8 )
+Fixed column sorting feature breaks if the initial columns array doesn't have sort field(c1d1d72 )
+
+N/A
+N/A
+New Release (2020-03-07) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@4.0.0react-bootstrap-table2-filter@1.3.1react-bootstrap-table2-paginator@2.1.1
+
+Fixed hardcode id for size per page dropdown(094c907 )
+Add type=button for size per page dropdown(094c907 )
+Fix abnormal onFilter calls(SelectFilter onFilter hook is not fired when filter value is reset)(1f73806 )
+Fix hardcode id for column filters(6d7a4c4 )
+
+N/A
+
+Upgrade react-transition-group (9c66a20 )
+
+New Release (2020-03-16) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table2-paginator@2.1.2
+
+Fix hidePageListOnlyOnePage isn't work on PaginationListStandalone(ac73e9b )
+Fix bootstrap4 isn't work for SizePerPageDropdownStandalone(b55aba6 )
+
+N/A
+
+Implement disablePageTitle to allow to disable title on page button(a3f8cfc )
+
+New Release (2020-04-18) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@4.0.1react-bootstrap-table2-filter@1.3.2
+N/A
+N/A
+
+Implement afterFilter function(51fbb1e )
+Add onAuxClick event for column and row event(54df96c )
+
+New Release (2020-05-17) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@4.0.2react-bootstrap-table2-filter@1.3.3react-bootstrap-table2-toolkit@2.1.3
+N/A
+N/A
+
+Implement afterFilter function(51fbb1e )
+Add onAuxClick event for column and row event(54df96c )
+
+New Release (2020-05-31) · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@4.0.3
+
+Fixed Lodash for underscore - _utils2.default.contains is not a function(cd00c3c )
+
+N/A
+
+Allow data containing dots in key names(8b6992b )
+
+
+ https://react-bootstrap-table.github.io/blog
+ react-bootstrap-table2 Blog
+ 2020-05-31T06:00:00Z
+ Feed for Node.js
+ The best place to stay up-to-date with the latest react-bootstrap-table2 news and events.
+ https://react-bootstrap-table.github.ioimg/logo/hybrid-white-large.svg
+ Copyright © 2020 react-bootstrap-table2
+
+ <![CDATA[New Release (2020-05-31)]]>
+ https://react-bootstrap-table.github.io/blog/2020/05/31/version-bump.html
+ 2020-05-31T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2020-05-17)]]>
+ https://react-bootstrap-table.github.io/blog/2020/05/17/version-bump.html
+ 2020-05-17T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2020-04-18)]]>
+ https://react-bootstrap-table.github.io/blog/2020/04/18/version-bump.html
+ 2020-04-18T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2020-03-16)]]>
+ https://react-bootstrap-table.github.io/blog/2020/03/16/version-bump.html
+ 2020-03-16T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2020-03-07)]]>
+ https://react-bootstrap-table.github.io/blog/2020/03/07/version-bump.html
+ 2020-03-07T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2020-02-16)]]>
+ https://react-bootstrap-table.github.io/blog/2020/02/16/version-bump.html
+ 2020-02-16T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2020-02-09)]]>
+ https://react-bootstrap-table.github.io/blog/2020/02/09/version-bump.html
+ 2020-02-09T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-12-07)]]>
+ https://react-bootstrap-table.github.io/blog/2019/12/07/version-bump.html
+ 2019-12-07T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-12-02)]]>
+ https://react-bootstrap-table.github.io/blog/2019/12/02/version-bump.html
+ 2019-12-02T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-11-16)]]>
+ https://react-bootstrap-table.github.io/blog/2019/11/16/version-bump.html
+ 2019-11-16T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-11-09)]]>
+ https://react-bootstrap-table.github.io/blog/2019/11/09/version-bump.html
+ 2019-11-09T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-09-29)]]>
+ https://react-bootstrap-table.github.io/blog/2019/09/29/version-bump.html
+ 2019-09-29T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-09-08)]]>
+ https://react-bootstrap-table.github.io/blog/2019/09/08/version-bump.html
+ 2019-09-08T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-08-25)]]>
+ https://react-bootstrap-table.github.io/blog/2019/08/25/version-bump.html
+ 2019-08-25T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-08-10)]]>
+ https://react-bootstrap-table.github.io/blog/2019/08/10/version-bump.html
+ 2019-08-10T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-07-21)]]>
+ https://react-bootstrap-table.github.io/blog/2019/07/21/version-bump.html
+ 2019-07-21T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-06-25)]]>
+ https://react-bootstrap-table.github.io/blog/2019/06/25/version-bump.html
+ 2019-06-25T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-06-10)]]>
+ https://react-bootstrap-table.github.io/blog/2019/06/10/version-bump.html
+ 2019-06-10T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-05-19)]]>
+ https://react-bootstrap-table.github.io/blog/2019/05/19/version-bump.html
+ 2019-05-19T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-04-27)]]>
+ https://react-bootstrap-table.github.io/blog/2019/04/27/version-bump.html
+ 2019-04-27T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-04-16)]]>
+ https://react-bootstrap-table.github.io/blog/2019/04/16/version-bump.html
+ 2019-04-16T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-03-31)]]>
+ https://react-bootstrap-table.github.io/blog/2019/03/31/version-bump.html
+ 2019-03-31T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-03-26)]]>
+ https://react-bootstrap-table.github.io/blog/2019/03/26/version-bump.html
+ 2019-03-26T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-03-17)]]>
+ https://react-bootstrap-table.github.io/blog/2019/03/17/version-bump.html
+ 2019-03-17T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-03-10)]]>
+ https://react-bootstrap-table.github.io/blog/2019/03/10/version-bump.html
+ 2019-03-10T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-02-24)]]>
+ https://react-bootstrap-table.github.io/blog/2019/02/24/version-bump.html
+ 2019-02-24T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-02-18)]]>
+ https://react-bootstrap-table.github.io/blog/2019/02/18/version-bump.html
+ 2019-02-18T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-02-16)]]>
+ https://react-bootstrap-table.github.io/blog/2019/02/16/version-bump.html
+ 2019-02-16T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-02-09)]]>
+ https://react-bootstrap-table.github.io/blog/2019/02/09/version-bump.html
+ 2019-02-09T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-01-20)]]>
+ https://react-bootstrap-table.github.io/blog/2019/01/20/version-bump.html
+ 2019-01-20T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2019-01-06)]]>
+ https://react-bootstrap-table.github.io/blog/2019/01/06/version-bump.html
+ 2019-01-06T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-12-25)]]>
+ https://react-bootstrap-table.github.io/blog/2018/12/24/version.bump.html
+ 2018-12-24T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-12-23)]]>
+ https://react-bootstrap-table.github.io/blog/2018/12/23/version-bump.html
+ 2018-12-23T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-12-21)]]>
+ https://react-bootstrap-table.github.io/blog/2018/12/21/version-bump.html
+ 2018-12-21T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-12-05)]]>
+ https://react-bootstrap-table.github.io/blog/2018/12/05/version-bump.html
+ 2018-12-05T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-11-10)]]>
+ https://react-bootstrap-table.github.io/blog/2018/11/10/version-bump.html
+ 2018-11-10T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-11-04)]]>
+ https://react-bootstrap-table.github.io/blog/2018/11/04/version.bump.html
+ 2018-11-04T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-10-29)]]>
+ https://react-bootstrap-table.github.io/blog/2018/10/29/version-bump.html
+ 2018-10-29T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-10-14)]]>
+ https://react-bootstrap-table.github.io/blog/2018/10/14/version-bump.html
+ 2018-10-14T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-10-07)]]>
+ https://react-bootstrap-table.github.io/blog/2018/10/07/version-bump.html
+ 2018-10-07T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-09-30)]]>
+ https://react-bootstrap-table.github.io/blog/2018/09/30/version-bump.html
+ 2018-09-30T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-09-03)]]>
+ https://react-bootstrap-table.github.io/blog/2018/09/03/version-bump.html
+ 2018-09-03T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-08-27)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/27/version-bump.html
+ 2018-08-27T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-08-21)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/21/version-bump.html
+ 2018-08-21T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-08-12)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/12/version-bump.html
+ 2018-08-12T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-08-04)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/04/version-bump.html
+ 2018-08-04T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-08-01)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/01/version-bump.html
+ 2018-08-01T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-07-30)]]>
+ https://react-bootstrap-table.github.io/blog/2018/07/28/version-bump.html
+ 2018-07-28T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-07-15)]]>
+ https://react-bootstrap-table.github.io/blog/2018/07/15/version-bump.html
+ 2018-07-15T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-06-24)]]>
+ https://react-bootstrap-table.github.io/blog/2018/06/24/version-bump.html
+ 2018-06-24T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-06-04)]]>
+ https://react-bootstrap-table.github.io/blog/2018/06/04/version-bump.html
+ 2018-06-04T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-05-23)]]>
+ https://react-bootstrap-table.github.io/blog/2018/05/23/version-bump.html
+ 2018-05-23T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-05-13)]]>
+ https://react-bootstrap-table.github.io/blog/2018/05/13/version-bump.html
+ 2018-05-13T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-05-07)]]>
+ https://react-bootstrap-table.github.io/blog/2018/05/07/version-bump.html
+ 2018-05-07T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-04-15)]]>
+ https://react-bootstrap-table.github.io/blog/2018/04/15/version-bump.html
+ 2018-04-15T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-04-01)]]>
+ https://react-bootstrap-table.github.io/blog/2018/04/01/version-bump.html
+ 2018-04-01T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-03-19)]]>
+ https://react-bootstrap-table.github.io/blog/2018/03/19/version.bump.html
+ 2018-03-19T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-03-06)]]>
+ https://react-bootstrap-table.github.io/blog/2018/03/06/version-bump.html
+ 2018-03-06T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-02-14)]]>
+ https://react-bootstrap-table.github.io/blog/2018/02/14/version-bump.html
+ 2018-02-14T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Release (2018-02-02)]]>
+ https://react-bootstrap-table.github.io/blog/2018/02/02/version-bump.html
+ 2018-02-02T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[Roadmap]]>
+ https://react-bootstrap-table.github.io/blog/2018/01/24/release-plan.html
+ 2018-01-24T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
+ <![CDATA[New Version 0.1.0]]>
+ https://react-bootstrap-table.github.io/blog/2018/01/24/new-version-0.1.0.html
+ 2018-01-24T06:00:00Z
+
+ Allen Fang
+ https://twitter.com/allenfang_tw
+
+
+
\ No newline at end of file
diff --git a/blog/feed.xml b/blog/feed.xml
new file mode 100644
index 000000000..b58073e0a
--- /dev/null
+++ b/blog/feed.xml
@@ -0,0 +1,1144 @@
+
+
+
+ react-bootstrap-table2 Blog
+ The best place to stay up-to-date with the latest react-bootstrap-table2 news and events.
+ Sun, 31 May 2020 06:00:00 GMT
+ http://blogs.law.harvard.edu/tech/rss
+ Feed for Node.js
+
+ react-bootstrap-table2 Blog
+ https://react-bootstrap-table.github.ioimg/logo/hybrid-white-large.svg
+
+ Copyright © 2020 react-bootstrap-table2
+ -
+
<![CDATA[New Release (2020-05-31)]]>
+ https://react-bootstrap-table.github.io/blog/2020/05/31/version-bump.html
+ Sun, 31 May 2020 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2020-05-17)]]>
+ https://react-bootstrap-table.github.io/blog/2020/05/17/version-bump.html
+ Sun, 17 May 2020 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2020-04-18)]]>
+ https://react-bootstrap-table.github.io/blog/2020/04/18/version-bump.html
+ Sat, 18 Apr 2020 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2020-03-16)]]>
+ https://react-bootstrap-table.github.io/blog/2020/03/16/version-bump.html
+ Mon, 16 Mar 2020 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2020-03-07)]]>
+ https://react-bootstrap-table.github.io/blog/2020/03/07/version-bump.html
+ Sat, 07 Mar 2020 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2020-02-16)]]>
+ https://react-bootstrap-table.github.io/blog/2020/02/16/version-bump.html
+ Sun, 16 Feb 2020 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2020-02-09)]]>
+ https://react-bootstrap-table.github.io/blog/2020/02/09/version-bump.html
+ Sun, 09 Feb 2020 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-12-07)]]>
+ https://react-bootstrap-table.github.io/blog/2019/12/07/version-bump.html
+ Sat, 07 Dec 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-12-02)]]>
+ https://react-bootstrap-table.github.io/blog/2019/12/02/version-bump.html
+ Mon, 02 Dec 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-11-16)]]>
+ https://react-bootstrap-table.github.io/blog/2019/11/16/version-bump.html
+ Sat, 16 Nov 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-11-09)]]>
+ https://react-bootstrap-table.github.io/blog/2019/11/09/version-bump.html
+ Sat, 09 Nov 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-09-29)]]>
+ https://react-bootstrap-table.github.io/blog/2019/09/29/version-bump.html
+ Sun, 29 Sep 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-09-08)]]>
+ https://react-bootstrap-table.github.io/blog/2019/09/08/version-bump.html
+ Sun, 08 Sep 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-08-25)]]>
+ https://react-bootstrap-table.github.io/blog/2019/08/25/version-bump.html
+ Sun, 25 Aug 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-08-10)]]>
+ https://react-bootstrap-table.github.io/blog/2019/08/10/version-bump.html
+ Sat, 10 Aug 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-07-21)]]>
+ https://react-bootstrap-table.github.io/blog/2019/07/21/version-bump.html
+ Sun, 21 Jul 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-06-25)]]>
+ https://react-bootstrap-table.github.io/blog/2019/06/25/version-bump.html
+ Tue, 25 Jun 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-06-10)]]>
+ https://react-bootstrap-table.github.io/blog/2019/06/10/version-bump.html
+ Mon, 10 Jun 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-05-19)]]>
+ https://react-bootstrap-table.github.io/blog/2019/05/19/version-bump.html
+ Sun, 19 May 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-04-27)]]>
+ https://react-bootstrap-table.github.io/blog/2019/04/27/version-bump.html
+ Sat, 27 Apr 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-04-16)]]>
+ https://react-bootstrap-table.github.io/blog/2019/04/16/version-bump.html
+ Tue, 16 Apr 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-03-31)]]>
+ https://react-bootstrap-table.github.io/blog/2019/03/31/version-bump.html
+ Sun, 31 Mar 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-03-26)]]>
+ https://react-bootstrap-table.github.io/blog/2019/03/26/version-bump.html
+ Tue, 26 Mar 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-03-17)]]>
+ https://react-bootstrap-table.github.io/blog/2019/03/17/version-bump.html
+ Sun, 17 Mar 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-03-10)]]>
+ https://react-bootstrap-table.github.io/blog/2019/03/10/version-bump.html
+ Sun, 10 Mar 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-02-24)]]>
+ https://react-bootstrap-table.github.io/blog/2019/02/24/version-bump.html
+ Sun, 24 Feb 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-02-18)]]>
+ https://react-bootstrap-table.github.io/blog/2019/02/18/version-bump.html
+ Mon, 18 Feb 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-02-16)]]>
+ https://react-bootstrap-table.github.io/blog/2019/02/16/version-bump.html
+ Sat, 16 Feb 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-02-09)]]>
+ https://react-bootstrap-table.github.io/blog/2019/02/09/version-bump.html
+ Sat, 09 Feb 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-01-20)]]>
+ https://react-bootstrap-table.github.io/blog/2019/01/20/version-bump.html
+ Sun, 20 Jan 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2019-01-06)]]>
+ https://react-bootstrap-table.github.io/blog/2019/01/06/version-bump.html
+ Sun, 06 Jan 2019 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-12-25)]]>
+ https://react-bootstrap-table.github.io/blog/2018/12/24/version.bump.html
+ Mon, 24 Dec 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-12-23)]]>
+ https://react-bootstrap-table.github.io/blog/2018/12/23/version-bump.html
+ Sun, 23 Dec 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-12-21)]]>
+ https://react-bootstrap-table.github.io/blog/2018/12/21/version-bump.html
+ Fri, 21 Dec 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-12-05)]]>
+ https://react-bootstrap-table.github.io/blog/2018/12/05/version-bump.html
+ Wed, 05 Dec 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-11-10)]]>
+ https://react-bootstrap-table.github.io/blog/2018/11/10/version-bump.html
+ Sat, 10 Nov 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-11-04)]]>
+ https://react-bootstrap-table.github.io/blog/2018/11/04/version.bump.html
+ Sun, 04 Nov 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-10-29)]]>
+ https://react-bootstrap-table.github.io/blog/2018/10/29/version-bump.html
+ Mon, 29 Oct 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-10-14)]]>
+ https://react-bootstrap-table.github.io/blog/2018/10/14/version-bump.html
+ Sun, 14 Oct 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-10-07)]]>
+ https://react-bootstrap-table.github.io/blog/2018/10/07/version-bump.html
+ Sun, 07 Oct 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-09-30)]]>
+ https://react-bootstrap-table.github.io/blog/2018/09/30/version-bump.html
+ Sun, 30 Sep 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-09-03)]]>
+ https://react-bootstrap-table.github.io/blog/2018/09/03/version-bump.html
+ Mon, 03 Sep 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-08-27)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/27/version-bump.html
+ Mon, 27 Aug 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-08-21)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/21/version-bump.html
+ Tue, 21 Aug 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-08-12)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/12/version-bump.html
+ Sun, 12 Aug 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-08-04)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/04/version-bump.html
+ Sat, 04 Aug 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-08-01)]]>
+ https://react-bootstrap-table.github.io/blog/2018/08/01/version-bump.html
+ Wed, 01 Aug 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-07-30)]]>
+ https://react-bootstrap-table.github.io/blog/2018/07/28/version-bump.html
+ Sat, 28 Jul 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-07-15)]]>
+ https://react-bootstrap-table.github.io/blog/2018/07/15/version-bump.html
+ Sun, 15 Jul 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-06-24)]]>
+ https://react-bootstrap-table.github.io/blog/2018/06/24/version-bump.html
+ Sun, 24 Jun 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-06-04)]]>
+ https://react-bootstrap-table.github.io/blog/2018/06/04/version-bump.html
+ Mon, 04 Jun 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-05-23)]]>
+ https://react-bootstrap-table.github.io/blog/2018/05/23/version-bump.html
+ Wed, 23 May 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-05-13)]]>
+ https://react-bootstrap-table.github.io/blog/2018/05/13/version-bump.html
+ Sun, 13 May 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-05-07)]]>
+ https://react-bootstrap-table.github.io/blog/2018/05/07/version-bump.html
+ Mon, 07 May 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-04-15)]]>
+ https://react-bootstrap-table.github.io/blog/2018/04/15/version-bump.html
+ Sun, 15 Apr 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-04-01)]]>
+ https://react-bootstrap-table.github.io/blog/2018/04/01/version-bump.html
+ Sun, 01 Apr 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-03-19)]]>
+ https://react-bootstrap-table.github.io/blog/2018/03/19/version.bump.html
+ Mon, 19 Mar 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-03-06)]]>
+ https://react-bootstrap-table.github.io/blog/2018/03/06/version-bump.html
+ Tue, 06 Mar 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-02-14)]]>
+ https://react-bootstrap-table.github.io/blog/2018/02/14/version-bump.html
+ Wed, 14 Feb 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Release (2018-02-02)]]>
+ https://react-bootstrap-table.github.io/blog/2018/02/02/version-bump.html
+ Fri, 02 Feb 2018 06:00:00 GMT
+
+ -
+
<![CDATA[Roadmap]]>
+ https://react-bootstrap-table.github.io/blog/2018/01/24/release-plan.html
+ Wed, 24 Jan 2018 06:00:00 GMT
+
+ -
+
<![CDATA[New Version 0.1.0]]>
+ https://react-bootstrap-table.github.io/blog/2018/01/24/new-version-0.1.0.html
+ Wed, 24 Jan 2018 06:00:00 GMT
+
+
+
\ No newline at end of file
diff --git a/blog/index.html b/blog/index.html
new file mode 100644
index 000000000..23cab48ca
--- /dev/null
+++ b/blog/index.html
@@ -0,0 +1,179 @@
+Blog · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@4.0.3
+
+Fixed Lodash for underscore - _utils2.default.contains is not a function(cd00c3c )
+
+N/A
+
+Allow data containing dots in key names(8b6992b )
+
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@4.0.2react-bootstrap-table2-filter@1.3.3react-bootstrap-table2-toolkit@2.1.3
+N/A
+N/A
+
+Implement afterFilter function(51fbb1e )
+Add onAuxClick event for column and row event(54df96c )
+
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@4.0.1react-bootstrap-table2-filter@1.3.2
+N/A
+N/A
+
+Implement afterFilter function(51fbb1e )
+Add onAuxClick event for column and row event(54df96c )
+
+We got following packages version bump in this release:
+
+react-bootstrap-table2-paginator@2.1.2
+
+Fix hidePageListOnlyOnePage isn't work on PaginationListStandalone(ac73e9b )
+Fix bootstrap4 isn't work for SizePerPageDropdownStandalone(b55aba6 )
+
+N/A
+
+Implement disablePageTitle to allow to disable title on page button(a3f8cfc )
+
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@4.0.0react-bootstrap-table2-filter@1.3.1react-bootstrap-table2-paginator@2.1.1
+
+Fixed hardcode id for size per page dropdown(094c907 )
+Add type=button for size per page dropdown(094c907 )
+Fix abnormal onFilter calls(SelectFilter onFilter hook is not fired when filter value is reset)(1f73806 )
+Fix hardcode id for column filters(6d7a4c4 )
+
+N/A
+
+Upgrade react-transition-group (9c66a20 )
+
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.5
+
+Fixed Accessibility Issue: Sortable table headers not read by sceen reader(2d418d8 )
+Fixed column sorting feature breaks if the initial columns array doesn't have sort field(c1d1d72 )
+
+N/A
+N/A
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.4react-bootstrap-table2-toolkit@2.1.2
+
+Fixed accessibility issue: Users navigating with tab cannot trigger sort functionality(bfb2592 )
+Fixed column sorting feature breaks if the initial columns array doesn't have sort field(5cc7882 )
+Fixed columns initially hidden when using ToolKitProvider and columns array changes(7162728 )
+
+N/A
+
+Allow to add class on thead and tbody(7b593a7 )
+
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.3react-bootstrap-table2-toolkit@2.1.1
+
+Fixed wrong table caption in bootstrap 4(38b0fb3 )
+
+
+Allow to export table footer to csv file(47d6eb0 )
+Allow to manage sorting state(2068f51 )
+
+
+One-time sorting configuration(a07b2da )
+
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.2
+
+Fixed incorrect row colspan when apply column toggle or column.hidden(4a340c7 )
+Fixed filterPosition property does not work with rowSelect(8ecdbf6 )
+
+N/A
+N/A
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.1
+N/A
+N/A
+
+Support selectRow.nonSelectableStyle and selectRow.nonSelectableClasses to custom nonselectable row
+Add default class to selection column and expand column.
+Fix react key warning when apply filterPosition props
+
+Blog · react-bootstrap-table2 We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.3.0react-bootstrap-table2-filter@1.3.0
+
+Fixed select all broken if keyField is nested(1b9bd63 )
+Fixed can not configure tabIndex for header column(b2121fd )
+Try to fix abnormal issue in selection.js(18caf0a )
+
+N/A
+N/A
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.2.1
+
+Fixed select all broken if keyField is nested(1b9bd63 )
+Fixed can not configure tabIndex for header column(b2121fd )
+Try to fix abnormal issue in selection.js(18caf0a )
+
+N/A
+N/A
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.2.0react-bootstrap-table2-editor@1.4.0react-bootstrap-table2-filter@1.2.0react-bootstrap-table2-paginator@2.1.0react-bootstrap-table2-toolkit@2.1.0
+N/A
+N/A
+
+Avoid warning for react legacy lifecycle(7c8bf00
+Support custom search on cell level(00b1558
+Support column.sortValue for custom the sort value of cell(ec1f96c )
+Enhance column.headerEvents and column.footerEvents for adding some useful data(16128e7 )
+
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.1.9react-bootstrap-table2-filter@1.1.12
+
+Fixed onFilter broken(eb204f6 )
+Fixed columns doesn't update correctly when enable column toggle(43b5eeb )
+Fixed disabling cell edit on table throws exception(70827ee )
+
+N/A
+
+Allow to configure the options of select filter by a custom function(23cb0bb )
+Add expandRow.className for customing the class on expanding row(c12d3fa )
+
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.1.8react-bootstrap-table2-editor@1.3.2react-bootstrap-table2-filter@1.1.11react-bootstrap-table2-paginator@2.0.9
+
+Fixed inconsistence filter logic in custom filtering(423769c )
+Fixed column toggle will cancel the filter state(4de565b )
+Fixed wrong type convert when column didn't have specified type(08ec8a9 )
+Fixed pagination elements not on same row/line(1a44ce0 )
+
+N/A
+
+column.editor.getOptions recieve the second argument which contain row and column(856e63d )
+We got following packages version bump in this release:
+
+react-bootstrap-table-next@3.1.6react-bootstrap-table2-editor@1.3.0
+
+Fixed incorrect column size when dynamic change selectRow.hideSelectColumn(d7e1f1d )
+
+
+Support saving type of cell editing(92f1449 )
+
+
+Enhance serveral examples and docs
+Allow to custom the classname on the parent row of expanded row(ec4864d )
+Add rowIndex as second arguments for expandRow.renderer(db22bb9 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.5react-bootstrap-table2-filter@1.1.10react-bootstrap-table2-paginator@2.0.7
+
+Fixed can not use classes in IE(221e336 )
+Fixed column formatter can not work with external state with expandRow(4cf6e65 )
+Fixed multiselect filter broken in IE(e58533d )
+
+N/A
+
+Allow firstPageText, prePageText, nextPageText and lastPageText adopt PropType.node type(7382010 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.4react-bootstrap-table2-editor@1.2.4react-bootstrap-table2-toolkit@2.0.1
+
+Fixed tabindex on table headers should not be > 0(4ec02b2 )
+
+N/A
+We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.3react-bootstrap-table2-toolkit@2.0.0react-bootstrap-table2-overlay@2.0.0
+
+Fix clicking on selection column will trigger row expand(2c6cc91 )
+Fix file saver issue for IE(55eea6f )
+
+N/A
+
+Enhance Table header accessibility(a1457df )
+Enhance Search input accessibility(7c259cd )
+Upgrade react-loading-overlay for react-bootstrap-table2-overlay(036c3fd )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.2react-bootstrap-table2-toolkit@1.4.2
+
+Fix rendering searchbar will throw tableId prop type warning(#914 )
+Fix expandRow does not work with nested keyField(36fa9b8 )
+Fix CSV Export doesn't handle double quotes(737922a )
+Fix column.onClick some parameters is undefined if column.editable is true(6168bd7 )
+
+N/A
+
+Allow to custom the style on selection header cell via selectRow.headerColumnStyle(0f37fae )
+
+Blog · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.1react-bootstrap-table2-filter@1.1.9react-bootstrap-table2-paginator@2.0.6react-bootstrap-table2-toolkit@1.4.1
+
+Fix expandRow.expanded undefined when enable sort and row expand(160dede )
+
+
+Add onDataSizeChange prop for listening data size change in table(363a432 )
+
+
+Allow select options initialization with empty array(#894 )
+Accessibility on table seach input and filter(#890 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@3.1.0react-bootstrap-table2-editor@1.2.3react-bootstrap-table2-filter@1.1.8
+N/A
+
+Animation on expand/collapse row(#861 )
+
+
+Get Date information via UTC methods(#874 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@3.0.3react-bootstrap-table2-paginator@2.0.5
+
+Fixed cell won't be updated when column.formatExtraData change(196ae33 )
+Fix pagination.alwaysShowAllBtns perform wrongly in some case(7f1b7a6 )
+Fix column won't be updated when switch column order dynamically(a6ccafc )
+
+N/A
+N/A
+We got following package version bump in this release:
+
+react-bootstrap-table-next@3.0.2react-bootstrap-table2-filter@1.1.7react-bootstrap-table2-toolkit@1.4.0
+
+Fixed remote filter borken(7642bfa )
+Fixed custom editor didn't cancel when switch to anther cell(c5d9e04 )
+
+
+Support to export only searched/filtered data cross pagesd0e70f7
+
+N/A
+We got following package version bump in this release:
+
+react-bootstrap-table-next@3.0.1react-bootstrap-table2-filter@1.1.6react-bootstrap-table2-paginator@2.0.4react-bootstrap-table2-toolkit@1.3.2
+
+Fixed btnContextual prop on SizePerPageDropdownStandalone not passed to SizePerPageDropdown(3af30a0 )
+Fixed expanded row column span does not update(#837 )
+Fixed column filter with custom pagination is not work well(921e8c7 )
+Fixed pagination is not work well when data delete or insert(e9f08d2 )
+
+N/A
+N/A
+We got following package version bump in this release:
+
+react-bootstrap-table-next@3.0.0react-bootstrap-table2-filter@1.1.5react-bootstrap-table2-toolkit@1.3.1
+
+Fixed cell didn't rerender correctly when column.formatter defined and use row inside the column.formatter function.(bf0c5c4 )
+Fixed selection broken when call setState in selectRow.onSelect(c01f45a )
+Fixed search and filter perform a abnormal behavor(#811 )
+
+N/A
+
+Allow to add custom className on Export CSV and Clear Search button(09f21e8 )
+Allow to operate on cell editing context via reacr refs(#815 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@2.2.0react-bootstrap-table2-toolkit@1.3.0react-bootstrap-table2-paginator@2.0.3
+N/A
+
+Support Column Toggle(#800 )
+
+
+Support PaginationTotalStandalone component(#801 )
+Add rowIndex for selectRow.selectionRenderer(a7c2a49 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@2.1.2react-bootstrap-table2-filter@1.1.4react-bootstrap-table2-toolkit@1.2.2
+N/A
+N/A
+We got following package version bump in this release:
+
+react-bootstrap-table-next@2.1.1react-bootstrap-table2-filter@1.1.3react-bootstrap-table2-toolkit@1.2.1react-bootstrap-table2-paginator@2.0.2
+
+Fixed Standalone Pagination render wrong page list when user do the filter or search(cf043c6 , 63c2630 , cacc28e )
+Fixed Controlled input element lose focus on re-render inside expanded rows(8bef7eb )
+
+N/A
+
+Allow to return a custom filter results from onFilter(aafbc7e )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@2.1.0react-bootstrap-table2-filter@1.1.2react-bootstrap-table2-toolkit@1.2.0
+
+Fixed can not clear date filter(9988e79 )
+
+
+Support built-in search clear button(1c68892 )
+Support table footer(#703 )
+
+N/A
+Blog · react-bootstrap-table2 We got following package version bump in this release:
+
+react-bootstrap-table-next@2.0.1react-bootstrap-table2-filter@1.1.1react-bootstrap-table2-paginator@2.0.1react-bootstrap-table2-toolkit@1.1.2
+
+Fixed export csv error (TypeError: this.visibleRows is not a function)(#745 )
+Fixed typeError happened on export CSV after js file compression(#745 )
+Fixed column header hides but not columnBody or columnData(#741 )
+Fixed props type mismatch for SizePerPageOption component(#742 )
+
+N/A
+
+Support render expand column at the right side(#746 )
+Support column.onFilter hook function(#743 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@2.0.0react-bootstrap-table2-paginator@2.0.0
+N/A
+N/A
+
+Impove the flexibility about customizing pagination components.
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.4
+
+Fixed expand row borken(#725 )
+
+N/A
+N/A
+We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.3
+
+Fixed a non expandable row still expandable when expandRow.showExpandColumn is enable(#698 )
+
+N/A
+
+Support hidden row(4ddbfd4 )
+Pass rowKey and expandable to expandRow.expandColumnRenderer callback function(bc4697b )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.2
+
+Fixed expandRow.onExpand called twice on click by expand column(a23599f )
+Fixed synthetic event issue for selectRow.onSelect and selectRow.onSelectAll(a7ae524 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.1react-bootstrap-table2-filter@1.1.0react-bootstrap-table2-paginator@1.0.4react-bootstrap-table2-editor@1.2.2
+
+Fixed wrong usage of label and value for the options of select filter.
+Fixed wrong from and to value when enable showTotal for pagination.
+Fixed condensed is broken in bootstrap@4
+Fixed the error message disappear in bootstrap@4
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@1.4.0react-bootstrap-table2-filter@1.0.2
+
+Allow to call setState in selectRow.onSelect and selectRow.onSelectAll(#644 )
+Allow to use array for select filter options(#646 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@1.3.1react-bootstrap-table2-editor@1.2.1
+
+Try to fixed Uncaught TypeError: l.getData is not a function.
+
+
+Support async cellEdit.beforeSaveCell(#634 )
+Support async column.validator(#633 )
+Enhance column.events(#632 )
+
+We got following package version bump in this release:
+
+react-bootstrap-table-next@1.3.0react-bootstrap-table2-editor@1.2.0
+
+Fixed bug if pagination props changes(#599 )
+
+
+Support expand/collapse row only though expand indicator(#546 )
+Support selectRow.clickToExpand, which allow user to click on row to select/expand row at the same time(#497 )
+Support render tabIndex on td(#607 )
+
+
+Improve row level performance(#497 )
+
+This release bump following packages:
+
+react-bootstrap-table-next@1.2.1react-bootstrap-table2-paginator@1.0.3react-bootstrap-table2-toolkit@1.1.1
+
+Fixed remote search bug(#591 )
+Fixed wrong calculation for from and to in pagination when remote search/filter enable and data is shrink below the current page(#594 )
+
+
+Implement column.sortCaret(#593 ) for customing the sort caret
+
+
+Easy to access the exposed API from react ref(#592 )
+
+Blog · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@1.2.0react-bootstrap-table2-editor@1.1.0react-bootstrap-table2-toolkit@1.1.0
+
+Fixed cannot assign to read only property 'textAlign' of object(#575 )
+Fixed wrong results pass to selectRow.onSelectAll when isSelect argument is false(#570 )
+
+
+Implement expandRow.onlyOneExpanding(#574 )
+Implement selectRow.hideSelectAll(#574 )
+Support Default Search(#571 )
+Implement auto select input text when editing cell(#569 )
+
+
+Fixe a non printable characters in csv output(#572 )
+Add onContextMenu on rowEvents(#556 )
+
+This release bump following packages:
+
+react-bootstrap-table-next@1.1.4react-bootstrap-table2-editor@1.0.1react-bootstrap-table2-toolkit@1.0.3
+
+Fixed selectRow.onSelectAll will return undefined value after search(#509 )
+
+
+Support dummy column(#520 )
+
+Enable it via column.isDummyField
+
+Able to export csv by current selected rows(#522 )
+
+
+Add onStartEdit callback which will be called when cell editor is trigger(#523 )
+
+This release bump following packages:
+
+react-bootstrap-table-next@1.1.3
+
+Fixed selectRow.onSelectAll will return undefined value after search(#509 )
+
+N/A
+
+Fixed some wrong code in storybooks
+column.sortFunc now pass rowA and rowB(#508 )
+This release bump following packages:
+
+react-bootstrap-table-next@1.1.2react-bootstrap-table-toolkit@1.0.2react-bootstrap-table2-paginator@1.0.2
+
+Fixed missing onChange prop for selection checkbox(#417 )
+Fixed pagination calculation fails when data change(#474 )
+
+
+N/A
+
+Fixed some wrong code in storybooks
+
+This release bump following packages:
+
+react-bootstrap-table-next@1.1.0react-bootstrap-table2-toolkit@1.0.1react-bootstrap-table2-paginator@1.0.1
+
+Fixed column.style and column.align will conflicts(#481 )
+Fixed search will be clear if search the same text twice(#470 )
+Fixed debounce bug(#468 )
+Fixed pagination.paginationTotalRenderer give wrong from and to argument(#467 )
+
+
+Export CSV allow to export current display data instead of whole list(#469 )
+
+
+Performance improvment on cell level(#449 )
+
+This release bump following packages:
+
+react-bootstrap-table-next@1.0.0react-bootstrap-table2-filter@1.0.0react-bootstrap-table2-editor@1.0.0react-bootstrap-table2-paginator@1.0.0react-bootstrap-table2-toolkit@1.0.0
+In 1.0.0, you have to upgrade react and react-dom to 16.3.0 or behind.
+
+fix bug for default sort and filter have potential issue when remote enabled.
+
+
+Row Expand
+Table Search
+Export CSV
+
+This release bump following packages:
+
+react-bootstrap-table2-filter@0.3.2
+N/A
+N/A
+This release bump following packages:
+
+react-bootstrap-table2-filter@0.3.1
+N/A
+N/A
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.15react-bootstrap-table2-paginator@0.1.6
+
+Fixed Filter + Pagination returns empty rows(7a787bb )
+
+N/A
+
+Custom the table header class via [headerClasses] prop on BootstrapTable(199bf8e )
+
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.14react-bootstrap-table2-paginator@0.1.5react-bootstrap-table2-filter@0.3.0
+
+Fix table will jump to first page after cell editing in remote mode(42c6bc0 )
+Click on filter will trigger sorting(#380 )
+
+
+Support custom filter(#389 )
+
+N/A
+Blog · react-bootstrap-table2 This release bump following packages:
+
+react-bootstrap-table-next@0.1.13react-bootstrap-table2-paginator@0.1.4react-bootstrap-table2-filter@0.2.0react-bootstrap-table2-overlay@0.1.2
+
+Fix remote sort still sorting data(#354 )
+Fix react-bootstrap-table2-overlay does not consider caption height(b11019c )
+
+
+Support date filter(#365 )
+
+
+Support to custome the pagination total(#359 )
+Support to custom the selection column(#364 )
+
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.12
+
+Fix the bool rendering issues in React (#340 )
+
+N/A
+N/A
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.11react-bootstrap-table2-filter@0.1.7
+
+Fixed filtered table doesn't rerender on prop change(#303 )
+Fix programmatically filter broken when filter multiple column at the same time(#334 )
+
+N/A
+
+Implement wrapperClasses to allow to custom the class on outer element which wrap up the table element(#325 )
+
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.9react-bootstrap-table2-editor@0.2.0react-bootstrap-table2-paginator@0.1.2
+N/A
+
+Rich cell editors(#322 )
+Allow to custom cell editors(#322 )
+Implement pagination total indication(#323 )
+
+
+rowEvents support onDoubleClick(#324 )
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.8react-bootstrap-table2-filter@0.1.6
+
+Programmtically Filters(#287 )
+
+
+Pass event object to selectRow.onSelect and selectRow.onSelectAll.(#304 )
+
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.6react-bootstrap-table2-editor@0.1.4react-bootstrap-table2-filter@0.1.4
+
+Fixed includes and find are not supported in IE(#274 )
+Fixed empty table is missing the last cell when row seleciton is enable(#276 )
+
+
+Allow to configure the default sort direction(#286 )
+Allow to custom the cell editor's style and class(#268 )
+
+
+Don't render anything if noDataIndication is not given(#275 )
+
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.5
+
+Fix selection was broken when data changed(#260 )
+
+
+Add classes and id on BootstrapTable for customization(#247 )
+column.hidden will not render element instead of setting display:none(#261 )
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.4react-bootstrap-table2-editor@0.1.2
+
+Fix the sort will not be triggered when data is changed(#232 )
+Fix empty #219 )
+Fix Failed prop type: The prop defaultValue is marked as required in TextEditor, but its value is null(5dd1f1e9 )
+
+
+rowEvents.onMouseEnter and rowEvents.onMouseLeave will be wrapped up and pass row informations(#233 )
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.3react-bootstrap-table2-filter@0.1.3
+
+Fixed TextFilter contains an input of type text with both value and defaultValue props(a0af964 )
+
+
+Support Number Filter(#200 )
+Support caseSensitive on Text and Select filter(#201 )
+Support sort event listener(#202 )
+
+
+Text Filter right now is case insensitive which same as react-bootstrap-table#201
+rowEvents.onClick will be wrapped so that funcation can recieve additional informatnion like: row and rowIndex(#187 )
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.2react-bootstrap-table2-filter@0.1.2
+
+Fixed call selectRow.onSelect twice(#180 )
+Fixed wrong colSpan for noDataIndication if there are column is hidden(#185 )
+
+
+Support Select Filter(#183 )
+
+
+Column filter style improvement(#183 )
+
+Remember to add the css of react-bootstrap-table2-filter
+
+Fix key field in cell should not be cell value(#172 )
+
+Blog · react-bootstrap-table2
+Select Filter
+Regex Filter
+
+
+Date Filter
+Number Filter
+
+
+Filter functionality enhancement
+
+Clean filter or clean all
+Programmatically filter
+
+
+
+Expand row
+Start compatible for bootstrap@4
+Sort management(External sort)
+Work on partial data(sort, filter) for pagination(remote or not remote)
+
+
+Scrol Table(Probably not implement, we are still investigation)
+
+
+Row/Column span
+Table toolkit base
+
+
+Row delete
+export CSV
+
+
+Sticky Header
+Frozen Column
+
+About five months works, we finally get a first drop for react-bootstrap-table2. I just want to say that I'm very sorry to let you guys to wait for a long time.
+I know a lots of people experienced many bugs or feel hard to customize on table. Anyway, I'm very appreciated everyone's helps and feedbacks, I think that's the reason why I decided to rebuilt react-bootstrap-table2.
+For the first drop, I really can't finish all the legacy features, but I will work more hard to finish them by March or April. Please see the release plan
+
+Basic Table
+
+Scrollabe table is not yet implement
+
+Basic Table Sort
+
+Multi sort is not yet implement
+Sort management is not yet implement
+
+Basic Row Selection
+
+Custom Selection is not yet implement
+
+Basic Cell Edit
+
+Custom Cell Edit is not yet implement
+
+Basic Pagination
+
+Custom Pagination is not yet implement
+
+Basic Column Filter(Text Filter only)
+
+
+One table structure, never unalign again.
+Remote enhancement, please read it
+100% easy to customize the header columns, cells rows
+
+In 2018, let's try react-bootstrap-table2 and give a star for this repo, I think it's the biggest encouragement for me :)
+Feel free to open issues to ask any questions.
+Regards,
+keyField(**required**) - [String]
-Tells `react-bootstrap-table2` which column is unique.
-
-### data(**required**) - [Array]
-Provides data for your table. It accepts a single Array object.
-
-### columns(**required**) - [Object]
-Accepts a single Array object, please see [columns definition](./columns.md) for more detail.
-
-### remote - [Bool | Object]
-Default is `false`, if enable`remote`, you are suppose to handle all the table change events, like: pagination, insert, filtering etc.
-This is a chance that you can connect to your remote server or database to manipulate your data.
-For flexibility reason, you can control what functionality should be handled on remote via a object return:
-
-```js
-remote={ { filter: true } }
-```
-
-In above case, only column filter will be handled on remote.
-
-> Note: when remote is enable, you are suppose to give [`onTableChange`](#onTableChange) prop on `BootstrapTable`
-> It's the only way to communicate to your remote server and update table states.
-
-A special case for remote pagination:
-```js
-remote={ { pagination: true, filter: false, sort: false } }
-```
-
-In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort` etc) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas.
-
-### loading - [Bool]
-Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
-When `loading` is `true`, `react-bootstrap-table` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table` will ignore the overlay rendering.
-
-### overlay - [Function]
-`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table-overlay` can be a good option for you:
-
-```sh
-$ npm install react-bootstrap-table-overlay
-```
-```js
-import overlayFactory from 'react-bootstrap-table-overlay';
-
-caption - [String | Node]
-Same as HTML [caption tag](https://www.w3schools.com/TAgs/tag_caption.asp), you can set it as String or a React JSX.
-
-### striped - [Bool]
-Same as bootstrap `.table-striped` class for adding zebra-stripes to a table.
-### bordered - [Bool]
-Same as bootstrap `.table-bordered` class for adding borders to a table and table cells.
-### hover - [Bool]
-Same as bootstrap `.table-hover` class for adding mouse hover effect (grey background color) on table rows.
-### condensed - [Bool]
-Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half.
-
-### cellEdit - [Object]
-Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
-
-### selectRow - [Object]
-Makes table rows selectable, please see [selectRow definition](./row-selection.md) for more detail.
-
-### rowStyle = [Object | Function]
-Custom the style of table rows:
-
-```js
-rowClasses = [String | Function]
-Custom the style of table rows:
-
-```js
-rowEvents - [Object]
-Custom the events on row:
-
-```js
-const rowEvents = {
- onClick: (e) => {
- ....
- }
-};
-defaultSorted - [Array]
-`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
-
-```js
-const defaultSorted = [{
- dataField: 'name', // if dataField is not match to any column you defined, it will be ignored.
- order: 'desc' // desc or asc
-}];
-```
-
-### pagination - [Object]
-`pagination` allow user to render a pagination panel on the bottom of table. But pagination funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionaly.
-
-```sh
-$ npm install react-bootstrap-table2-paginator --save
-```
-
-After installation of `react-bootstrap-table2-paginator`, you can enable pagination on `react-bootstrap-table2` easily:
-
-```js
-import paginator from 'react-bootstrap-table2-paginator';
-
-// omit...
-
-filter - [Object]
-`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
-
-```sh
-$ npm install react-bootstrap-table2-filter --save
-```
-
-After installation of `react-bootstrap-table2-filter`, you can configure filter on `react-bootstrap-table2` easily:
-
-```js
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-
-// omit...
-const columns = [ {
- dataField: 'id',
- text: 'Production ID'
-}, {
- dataField: 'name',
- text: 'Production Name',
- filter: textFilter() // apply text filter
-}, {
- dataField: 'price',
- text: 'Production Price'
-} ];
-onTableChange - [Function]
-This callback function will be called when [`remote`](#remote) enabled only.
-
-```js
-const onTableChange = (type, newState) => {
- // handle any data change here
-}
-react-bootstrap-table2 · react-bootstrap-table2 react-bootstrap-table2react-bootstrap-table
+
+Refactor core module and make challenges possible
+More customizable table
+Reduce bugs and bundled size
+Solve performance issues
+Improve the remote
+Improve handling of DOM events
+Support nested data
+Support table footer
+
+
+Due to react-bootstrap-table2 already being taken on npm our npm module name is react-bootstrap-table-nextreact-bootstrap-table2 in any of our git repositories, offical website and documents, only the npm name is different!
+
+Cell Edit · react-bootstrap-table2 react-bootstrap-table2 separate the cell edit code base to react-bootstrap-table2-editorreact-bootstrap-table. In the following, we are going to show you how to enable the cell edit
+Live Demo For Cell Edit API & Props Definition
+$ npm install react-bootstrap-table2-editor --save
+We have two ways to trigger a editable cell as editing cell:
+
+That's look into how we enable the cell edit on tabe:
+import cellEditFactory from 'react-bootstrap-table2-editor' ;
+
+
+
+<BootstrapTable
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEditFactory({ mode : 'click' }) }
+/>
+How user save their new editings? We offer two ways:
+
+Press ENTER(default )
+Blur from current editing cell(Need to enable the cellEdit.blurToSave )
+
+react-bootstrap-table2 support you to configure the cell editable on three level:
+
+column.validator
+react-bootstrap-table2 have following predefined editor:
+
+Text(Default)
+Dropdown
+Date
+Textarea
+Checkbox
+
+In a nutshell, you just only give a column.editor and define the type:
+import { Type } from 'react-bootstrap-table2-editor' ;
+const columns = [
+ ..., {
+ dataField : 'done' ,
+ text : 'Done' ,
+ editor : {
+ type : Type.SELECT | Type.TEXTAREA | Type.CHECKBOX | Type.DATE,
+ ...
+ }
+ }
+]
+In the following, we go though all the predefined editors:
+Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either editor.options or editor.getOptions should be required prop.
+This is most simple case for assign the dropdown options data directly.
+import { Type } from 'react-bootstrap-table2-editor' ;
+const columns = [
+ ..., {
+ dataField : 'type' ,
+ text : 'Job Type' ,
+ editor : {
+ type : Type.SELECT,
+ options : [{
+ value : 'A' ,
+ label : 'A'
+ }, {
+ value : 'B' ,
+ label : 'B'
+ }, {
+ value : 'C' ,
+ label : 'C'
+ }, {
+ value : 'D' ,
+ label : 'D'
+ }, {
+ value : 'E' ,
+ label : 'E'
+ }]
+ }
+}];
+It is much flexible which accept a function and you can assign the dropdown options dynamically.
+There are two case for getOptions:
+
+Synchronous : Just return the options array in getOptions callback functionAsynchronous : Call setOptions function argument when you get the options from remote.
+
+ const columns = [
+ ..., {
+ dataField : 'type' ,
+ text : 'Job Type' ,
+ editor : {
+ type : Type.SELECT,
+ getOptions : () =>const columns = [
+ ..., {
+ dataField : 'type' ,
+ text : 'Job Type' ,
+ editor : {
+ type : Type.SELECT,
+ getOptions : (setOptions ) => {
+ setTimeout(() =>1500 );
+ }
+ }
+}];
+getOptions have two arguments:
+
+setOptions: call it when you are ready to set the options asynchronous.params: An object which have row and column for current editing cell.
+Date editor is use <input type="date">, the configuration is very simple:
+const columns = [
+ ..., {
+ dataField : 'inStockDate' ,
+ text : 'Stock Date' ,
+ formatter : (cell ) => {
+ let dateObj = cell;
+ if (typeof cell !== 'object' ) {
+ dateObj = new Date (cell);
+ }
+ return `${('0' + dateObj.getUTCDate()).slice(-2 )} /${('0' + (dateObj.getUTCMonth() + 1 )).slice(-2 )} /${dateObj.getUTCFullYear()} ` ;
+ },
+ editor : {
+ type : Type.DATE
+ }
+}];
+Textarea editor is use <input type="textarea">, user can press ENTER to change line and in the react-bootstrap-table2, user allow to save result via press SHIFT + ENTER.
+const columns = [
+ ..., {
+ dataField : 'comment' ,
+ text : 'Product Comments' ,
+ editor : {
+ type : Type.TEXTAREA
+ }
+}];
+Checkbox editor allow you to have a pair value choice, the editor.value is required value to represent the actual value for check and uncheck.
+const columns = [
+ ..., {
+ dataField : 'comment' ,
+ text : 'Product Comments' ,
+ editor : {
+ type : Type.CHECKBOX,
+ value : 'Y:N'
+ }
+}];
+If you feel above predefined editors are not satisfied to your requirement, you can certainly custom the editor via column.editorRenderer . It accept a function and pass following arguments when function called:
+
+editorProps: Some useful attributes you can use on DOM editor, like class, style etc.value: Current cell valuerow: Current row datacolumn: Current column definitionrowIndex: Current row indexcolumnIndex: Current column index
+
+Note when implement a custom React editor component, this component should have a getValue function which return current value on editor
+
+
+Note when you want to save value, you can call editorProps.onUpdate function
+
+Following is a short example:
+class QualityRanger extends React .Component static propTypes = {
+ value : PropTypes.number,
+ onUpdate : PropTypes.func.isRequired
+ }
+ static defaultProps = {
+ value : 0
+ }
+ getValue() {
+ return parseInt (this .range.value, 10 );
+ }
+ render() {
+ const { value, onUpdate, ...rest } = this .props;
+ return [
+ <input
+ { ...rest }
+ key="range"
+ ref={ node => this.range = node }
+ type="range"
+ min="0"
+ max="100"
+ />,
+ <button
+ key="submit"
+ className="btn btn-default"
+ onClick={ () => onUpdate(this.getValue()) }
+ >
+ done
+ </button>
+ ];
+ }
+}
+
+const columns = [
+ ..., {
+ dataField: 'quality',
+ text: 'Product Quality',
+ editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
+ <QualityRanger { ...editorProps } value={ value } />
+ )
+}];
+Column Toggle · react-bootstrap-table2 react-bootstrap-table2 support a toggle list for user to toggle the column visibility.
+Live Demo For Column Toggle
+Please check How to start with table toolkit
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit' ;
+
+const { ToggleList } = ColumnToggle;
+
+
+<ToolkitProvider
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ columnToggle
+>
+ {
+ props => (
+ <div >
+ <ToggleList { ...props.columnToggleProps } />
+ <hr />
+ <BootstrapTable
+ { ...props.baseProps }
+ />
+ </div >
+ )
+ }
+</ToolkitProvider >
+
+Enable column toggle via columnToggle prop on ToolkitProvider.
ToolkitProvider is a wrapper of react context, you should wrap the BootstrapTable and ToggleList as the child of ToolkitProvider.
Rendering ToggleList with columnToggleProps. The position of ToggleList is depends on you.
+So far we only have limited customization on ToggleList component, following props is available for you:
+
+btnClassName: Add custom class on toggle button.className: Add custom class on toggle list.contextual: config bootstrap contextual, default is primary.
+However, you can custom the whole thing by yourself like following:
+
+
+const CustomToggleList = ({
+ columns,
+ onColumnToggle,
+ toggles
+}) => (
+ <div className ="btn-group btn-group-toggle btn-group-vertical" data-toggle ="buttons" >
+ {
+ columns
+ .map(column => ({
+ ...column,
+ toggle: toggles[column.dataField]
+ }))
+ .map(column => (
+ <button
+ type ="button"
+ key ={ column.dataField }
+ className ={ `btn btn-warning ${column.toggle ? 'active ' : ''}` }
+ data-toggle ="button"
+ aria-pressed ={ column.toggle ? 'true ' : 'false ' }
+ onClick ={ () => onColumnToggle(column.dataField) }
+ >
+ { column.text }
+ </button >
+ ))
+ }
+ </div > export const MyTable = () =>Following, we just explain how it work:
+ToolkitProvider will pass a props which have a property called columnToggleProps. columnToggleProps have following properties:
+
+columns: Column listtoggles: An object which describe current column visibilities. true is on and false is off.onColumnToggle: Call this method when user toggle a column.
+Work on Column · react-bootstrap-table2 Firstly, legacy react-bootstrap-table is hard to customize the DOM Event, Attributes on column or header column. In the react-bootstrap-table2, we make those bad design become more easy and flexible.
+Live Demo For Column Live Demo For Header Column API & Props Definition
+column.formatterreact-bootstrap-table2 have respective props to handle:
+
+In addition, we also give some useful props to let you have a quickly configuration:
+
+Formatting header column is almost same as column formatting, we got column.headerFormatterreact-bootstrap-table2 will take column.text
+Following, we list some useful props for customization:
+
+Export to CSV · react-bootstrap-table2 react-bootstrap-table2 support export table data to CSV.
+Live Demo For CSV Export API & Props Definition
+Please check How to start with table toolkit
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit' ;
+
+const { ExportCSVButton } = CSVExport;
+
+<ToolkitProvider
+ keyField ="id"
+ data ={ products }
+ columns ={ columns }
+ exportCSV
+>
+ {
+ props => (
+ <div >
+ <ExportCSVButton { ...props.csvProps }> Export CSV!!</ExportCSVButton >
+ <hr />
+ <BootstrapTable { ...props.baseProps } />
+ </div >
+ )
+ }
+</ToolkitProvider >
+
+Give exportCSVtrue on ToolkitProvider.
+Render ExportCSVButton with csvProps. The position of ExportCSVButton is depends on you.
+
+ExportCSVButton is a independent component, it's free to place this component in anywhere, just make sure it is inside of the ToolkitProvider.style and className prop on ExportCSVButton for styling it.
+However, if you feel ExportCSVButton can not fit your requirement or you want more customization, you can create your own button like following:
+
+const MyExportCSV = (props ) => {
+ const handleClick = () =>return (
+ <div >
+ <button className ="btn btn-success" onClick ={ handleClick }> Click me to export CSV</button >
+ </div > export const MyTable = () =>Following, we just explain how it work:
+ToolkitProvider will pass a props which have a property called csvProps. csvProps have following properties:
+
+onExport: Call this method will trigger export CSV.
+In the customization case, you just need to pass csvProps to your component and call csvProps.onExport when export action trigger.
+Please see available exportCSV
+Column Filter · react-bootstrap-table2 react-bootstrap-table2 separate the filter core code base to react-bootstrap-table2-filterreact-bootstrap-table. In the following, we are going to show you how to enable the column filter:
+Live Demo For Column Filter API & Props Definition
+$ npm install react-bootstrap-table2-filter --save
+
+require ('react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css' );
+
+
+import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css' ;
+You can get all types of filters via import and these filters are a factory function to create a individual filter instance. Currently, we support following filters:
+
+TextFilter
+SelectFilter
+MultiSelectFilter
+NumberFilter
+DateFilter
+CustomFilter
+Coming soon!
+Following is a quick demo for enable the column filter on Product Price column!!
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter' ;
+
+
+const columns = [
+ ..., {
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ filter : textFilter()
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+In addition, we preserve all of the filter features and functionality in legacy react-bootstrap-table, but in different way to do it:
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter' ;
+
+
+const priceFilter = textFilter({
+ placeholder : 'My Custom PlaceHolder' ,
+ className: 'my-custom-text-filter' ,
+ defaultValue: 'test' ,
+ comparator: Comparator.EQ,
+ caseSensitive: true ,
+ style: { ... },
+ delay: 1000 ,
+ getFilter: (f ) => { ... },
+ id: 'id' ,
+});
+
+
+A quick example:
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter' ;
+
+
+const selectOptions = {
+ 0 : 'good' ,
+ 1 : 'Bad' ,
+ 2 : 'unknown'
+};
+
+const columns = [
+ ..., {
+ dataField : 'quality' ,
+ text : 'Product Quailty' ,
+ formatter : cell =>filter : selectFilter({
+ options : selectOptions
+ })
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+Following is an example for custom select filter:
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter' ;
+
+
+const qualityFilter = selectFilter({
+ options : selectOptions,
+ placeholder : 'My Custom PlaceHolder' ,
+ className: 'my-custom-text-filter' ,
+ defaultValue: '2' ,
+ comparator: Comparator.LIKE,
+ caseSensitive: false ,
+ style: { ... },
+ withoutEmptyOption: true ,
+ getFilter: (f ) => { ... },
+ id: 'id' ,
+});
+
+
+
+Note, the selectOptions can be an array or a function as well:
+
+const selectOptions = [
+ { value : 0 , label : 'good' },
+ { value : 1 , label : 'Bad' },
+ { value : 2 , label : 'unknown' }
+];
+const columns = [
+ ..., {
+ dataField : 'quality' ,
+ text : 'Product Quailty' ,
+ formatter : cell =>opt =>filter : selectFilter({
+ options : selectOptions
+ })
+}];
+const selectOptions = [
+ { value : 0 , label : 'good' },
+ { value : 1 , label : 'Bad' },
+ { value : 2 , label : 'unknown' }
+];
+const columns = [
+ ..., {
+ dataField : 'quality' ,
+ text : 'Product Quailty' ,
+ formatter : cell =>opt =>filter : selectFilter({
+ options : () =>The benifit is react-bootstrap-table2 will render the select options by the order of array.
+Multi-select filter is almost same as regular select filterfilter :
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter' ;
+
+
+const selectOptions = {
+ 0 : 'good' ,
+ 1 : 'Bad' ,
+ 2 : 'unknown'
+};
+
+const columns = [
+ ..., {
+ dataField : 'quality' ,
+ text : 'Product Quailty' ,
+ formatter : cell =>filter : multiSelectFilter({
+ options : selectOptions
+ })
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+Following is an example for custom multi-select filter:
+import filterFactory, { multiSelectFilter, Comparator } from 'react-bootstrap-table2-filter' ;
+
+
+const qualityFilter = multiSelectFilter({
+ options : selectOptions,
+ placeholder : 'My Custom PlaceHolder' ,
+ className: 'my-custom-text-filter' ,
+ defaultValue: '2' ,
+ comparator: Comparator.LIKE,
+ style: { ... },
+ withoutEmptyOption: true ,
+ id: 'id' ,
+});
+
+
+import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter' ;
+
+const columns = [..., {
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ filter : numberFilter()
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+Numner filter is same as other filter, you can custom the number filter via numberFilter factory function:
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter' ;
+
+
+const numberFilter = numberFilter({
+ options : [2100 , 2103 , 2105 ],
+ delay: 600 ,
+ placeholder: 'custom placeholder' ,
+ withoutEmptyComparatorOption: true ,
+ withoutEmptyNumberOption: true ,
+ comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+ style: { display : 'inline-grid' },
+ className: 'custom-numberfilter-class' ,
+ comparatorStyle: { backgroundColor : 'antiquewhite' },
+ comparatorClassName: 'custom-comparator-class' ,
+ numberStyle: { backgroundColor : 'cadetblue' , margin : '0px' },
+ numberClassName: 'custom-number-class' ,
+ defaultValue: { number : 2103 , comparator : Comparator.GT },
+ getFilter: (f ) => { ... },
+ id: 'id' ,
+})
+
+
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter' ;
+
+const columns = [..., {
+ dataField : 'date' ,
+ text : 'Product date' ,
+ filter : dateFilter()
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+
+Notes: date filter accept a Javascript Date object in your raw data and you have to use column.formatter to make it as your prefer string result.
+
+Date filter is same as other filter, you can custom the date filter via dateFilter factory function:
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter' ;
+
+
+const dateFilter = dateFilter({
+ delay : 600 ,
+ placeholder: 'custom placeholder' ,
+ withoutEmptyComparatorOption: true ,
+ comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+ style: { display : 'inline-grid' },
+ className: 'custom-dateFilter-class' ,
+ comparatorStyle: { backgroundColor : 'antiquewhite' },
+ comparatorClassName: 'custom-comparator-class' ,
+ dateStyle: { backgroundColor : 'cadetblue' , margin : '0px' },
+ dateClassName: 'custom-date-class' ,
+ defaultValue: { date : new Date (2018 , 0 , 1 ), comparator : Comparator.GT },
+ id: 'id' ,
+});
+
+
+import filterFactory, { customFilter } from 'react-bootstrap-table2-filter' ;
+
+const columns = [..., {
+ dataField : 'date' ,
+ text : 'Product Name' ,
+ filter : customFilter(),
+ filterRenderer : (onFilter, column ) => .....
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+In custom filter case, you are suppose to finish following two steps:
+
+Call customFilter and pass to column.filter
+Give column.filterRenderer as a callback function and return your custom filter element.
+
+This function will pass two argument to you:
+
+onFilter: call it to trigger filter when you need.column: Just the column object!
+In the end, please remember to return your custom filter element!
+customFilter function just same as textFilter, selectFilter etc, it is for customization reason. However, in the custom filter case, there're only few props are valid:
+import filterFactory, { FILTER_TYPES, Comparator } from 'react-bootstrap-table2-filter' ;
+
+const customFilter = customFilter({
+ type : FILTER_TYPES.NUMBER,
+ comparator: Comparator.EQ,
+ caseSensitive: false ,
+})
+react-bootstrap-table2 allow you to control filter externally, which means user no need to type something on filter!!
+All the filters have a getFilter prop which accept a callback function and pass a filter object to you.
+class Table extends Components constructor (props) {
+ super (props);
+ this .filterPrice = this .filterPrice.bind(this );
+ const columns = [
+ ..., {
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ filter : textFilter({
+
+ getFilter: (filter ) => this .priceFilter = filter;
+ })
+ }];
+ }
+
+ filterPrice() {
+
+ this .priceFilter(100 );
+ }
+
+ render() {
+ return (
+ <div >
+ <button onClick ={ this.filterPrice }> Click to filter</button >
+ <BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+ </div >
+ );
+ }
+}
+
+Pagination · react-bootstrap-table2 react-bootstrap-table2 separate the pagination code base to react-bootstrap-table2-pagination
+Live Demo For Pagination API & Props Definition
+$ npm install react-bootstrap-table2-paginator --save
+
+require ('react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css' );
+
+
+import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css' ;
+Let's enable a pagination on your table:
+import paginationFactory from 'react-bootstrap-table2-paginator' ;
+
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginationFactory() } />
+react-bootstrap-table2 give some simple ways to customize something like text, styling etc, following is all the props we support for basic customization:
+
+You can check this online demo for above props usage.
+Sometime, you may feel above props is not satisfied with your requirement, don't worry, we provide following renderer for each part of pagination:
+
+If you want to customize the pagination component completely, you may get interesting on following solution:
+
+Standalone
+Non-standalone
+
+react-bootstrap-table2-paginator have a PaginationProvider which is a react context and you will be easier to customize the pagination components under the scope of PaginationProvider. Let's introduce it step by step:
+import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator' ;
+
+const paginationOption = {
+ custom : true ,
+ totalSize : products.length
+};
+<PaginationProvider
+ pagination={ paginationFactory(paginationOption) }
+>
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+ .....
+ )
+ }
+</PaginationProvider>
+PaginationProvider actually is a wrapper for the consumer of react context so that you are able to get the props from context then render to your compoennt and BootstrapTable:
+
+paginationProps: this include everything about pagination, you will use it when you render standalone component or your custom component.paginationTableProps: you don't need to know about this, but you have to give it as props when render BootstrapTable.
+So far, your customization pagination should look like it:
+<PaginationProvider
+ pagination={ paginationFactory(paginationOption) }
+>
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+ <div >
+ <BootstrapTable
+ keyField ="id"
+ data ={ products }
+ columns ={ columns }
+ { ...paginationTableProps }
+ />
+ </div >
+ )
+ }
+</PaginationProvider > Now, you have two choices
+
+Use Standalone Component
+Customize everything by yourself
+
+react-bootstrap-table2-paginator provider three standalone components:
+
+Size Per Page Dropdown Standalone
+Pagination List Standalone
+Pagination Total Standalone
+
+When render each standalone, you just need to pass the paginationProps props to standalone component:
+import paginationFactory, {
+ PaginationProvider,
+ PaginationListStandalone,
+ PaginationTotalStandalone,
+ SizePerPageDropdownStandalone
+} from 'react-bootstrap-table2-paginator' ;
+
+<PaginationProvider
+ pagination={ paginationFactory(options) }
+>
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+ <div>
+ <SizePerPageDropdownStandalone
+ { ...paginationProps }
+ />
+ <PaginationTotalStandalone
+ { ...paginationProps }
+ />
+ <BootstrapTable
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ { ...paginationTableProps }
+ />
+ <PaginationListStandalone
+ { ...paginationProps }
+ />
+ </div>
+ )
+ }
+</PaginationProvider>
+That's it!! The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying style, className etc on standalone components.
+
Customizable props on PaginationListStandalone
Customizable props on SizePerPageDropdownStandalone
+open: true to make dropdown show.hidden: true to hide the size per page dropdown.btnContextual: Set the button contextual.variation: Variation for dropdown, available value is dropdown and dropup.className: Custom the class on size per page dropdown
+
Customizable props on SizePerPageDropdownStandalone If you choose to custom the pagination component by yourself, the paginationProps will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Therefore, following is all the props in paginationProps object:
+page,
+sizePerPage,
+pageStartIndex,
+hidePageListOnlyOnePage,
+hideSizePerPage,
+alwaysShowAllBtns,
+withFirstAndLast,
+dataSize,
+sizePerPageList,
+paginationSize,
+showTotal,
+pageListRenderer,
+pageButtonRenderer,
+sizePerPageRenderer,
+paginationTotalRenderer,
+sizePerPageOptionRenderer,
+firstPageText,
+prePageText,
+nextPageText,
+lastPageText,
+prePageTitle,
+nextPageTitle,
+firstPageTitle,
+lastPageTitle,
+disablePageTitle,
+onPageChange,
+onSizePerPageChange
+In most of case, page, sizePerPage, onPageChange and onSizePerPageChange are most important properties for you:
+
+page: Current page.sizePerPage: Current size per page.onPageChange: Call it when you nede to change page. This function accept one number argument which indicate the new pageonSizePerPageChange: Call it when you nede to change size per page. This function accept two number argument which indicate the new sizePerPage and new page
+This is a online example for showing how to custom pagination completely.
+Remote Table · react-bootstrap-table2 By default, react-bootstrap-table2 always handle the data changes internally, such as sorting, paging, filtering etc. However, you may want to handle those logic or sync up to backend or Redux store so that remote can help you on it as well.
+Live Demo for Remote Table
+Make sure you already see remoteBootstrapTable firstly. In the beginning, you can assign true to enable the remote mode on table but few people doing like that, because it will enable all the functionalities(sort, filter etc) become remote mode.
+In the most of case, you probably only need some functionalites handled on the remote, so remote allow you to pass an object to control it.
+It's the key point that you need to know something changed so that you can handle your data or logic externally. In the remote mode, you are supposed to give onTableChangeBootstrapTable and it will being called when table have any changes if you enable the remote mode.
+
+All the changes are go though onTableChange listener,
+it's only way that table give fully control to you
+
+Please read onTableChange
+Pagination remote is a particular case in react-bootstrap-table2. If you enable the pagination remote mode, react-bootstrap-table2 will not handle sort and filter internally, instead your application is supposed to handle it in the remote way.
+Because, sort and filter need to work on overall data. In the remote pagination, react-bootstrap-table2 doesn't know all the data, only have the data on current page. So that's why you need to handle the remote filtering or sorting also.
+You can see this example to see how it work for above case.
+A good news is we are consider to easing this limitation through partial sorting/filtering on current page.
+Expandable Row · react-bootstrap-table2 Live Demo For Row Expand API & Props Definition
+react-bootstrap-table2 allow support click to expand or collapse a row. When you enable row expandable functionality, you have to give expandRow.renderer
+const expandRow = {
+ renderer : row =><div > ....</div > 'id'
+ data={ products }
+ columns={ columns }
+ expandRow={ expandRow }
+/>
+
+Please check expandRow.expanded
+This is an example for manage on expands
+expandRow.renderer allow you to render everything in the content of expanding row. You can custom the style or class by yourself. However, a expand row is wrapped by a HTML tr element(Parent row). Currently, we support following way to custom the class/style on parent row element:
+
+In addition, the way to custom the class/style on expanding row element:
+
+react-bootstrap-table2 default doesn't render a additional indicator column, just like row selection. But if you want it, you can enable it via expandRow.showExpandColumn
+In addition, we allow you to custom the expand columns in following ways:
+
+You can render expand column at the right side of table via expandRow.expandColumnPosition
+Row Selection · react-bootstrap-table2 For the table row selection functionality, the usage is almost same as react-bootstrap-table. If you are a user from legacy react-bootstrap-table, you can consider to skip this part.
+Live Demo For Row Selection API & Props Definition
+We support the single and multiple selection on table, config the selectRow.modeBootstrapTable will enable the selection on the table.
+By default behavior, user need to click on the selection column or the checkbox/radio to select/unselect a row, for a user experience perspective, we have selectoRow.clickToSelect
+Please check selectoRow.selected
+This is an example for selection management .
+In addition, this is another example for selection management
+Like column, we support to custom the style, class on the selecting row easily via following selectRow props:
+
+If you configure some specific rows as non-selectable, you can also custom them via:
+
+Default we render selection column in the left side of table, you can use selectRow.selectColumnPosition
+
+In addition, react-bootstrap-table2 offer below props to hide selection column:
+
+selectRow.onSelectselectRow.onSelectAll
+Work on Row · react-bootstrap-table2 react-bootstrap-table2 allow you to custom the row style/class/attributes and event on row(tr)
+Live Demo For Rows
+Currently, react-bootstrap-table2 only wrapped up the following events to allow its callback to receive row and rowIndex, for example:
+
+onClickonDoubleClickonMouseEnteronMouseLeaveonContextMenuonAuxClick
+const rowEvents = {
+ onClick : (e, row, rowIndex ) => {
+ ....
+ }
+};
+<BootstrapTable data ={ data } columns ={ columns } rowEvents ={ rowEvents } />
+Anyway, it's welcome to ask us to add more wrapped events.
+Coming Soon!
+Table Search · react-bootstrap-table2 react-bootstrap-table2 support a table search function just like legacy search in react-bootstrap-table. However, new way will be more easier to custom.
+Live Demo For Table Search API & Props Definition
+Please check How to start with table toolkit
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit' ;
+
+const { SearchBar } = Search;
+
+
+<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 >
+
+Enable search via searchToolkitProvider.
ToolkitProvider is a wrapper of react context, you are supposed to wrap the BootstrapTable and SearchBar as the child of ToolkitProvider.
You should render SearchBar with searchProps as well. The SearchBar position is depends on you.
+SearchBar PropsCustom the class on input element.
+Custom the placeholder on input element.
+Custom the style on input element.
+milionsecond for debounce user input.
+Customize the screen reader text for the search input. (Default: "Search this table")
+SearchBar is a independent component, it's free to place this component in anywhere, just make sure it is inside of the ToolkitProvider.style and className prop on SearchBar for component styling
+In addition, following is some valid props on SearchBar component:
+
+delay: How long should trigger search after user enter the search text, default is 250 ms.placeholder: The placeholder on the input field, default is Search.
+
+However, if you feel SearchBar can not fit your requirement or you want more customization, you can create your own search bar like following:
+
+const MySearch = (props ) => {
+ let input;
+ const handleClick = () =>return (
+ <div>
+ <input
+ className="form-control"
+ style={ { backgroundColor: 'pink' } }
+ ref={ n => input = n }
+ type="text"
+ />
+ <button className="btn btn-warning" onClick={ handleClick }>Click to Search!!</button>
+ </div>
+ );
+};
+
+export const MyTable = () => (
+ <ToolkitProvider
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ search
+ >
+ {
+ props => (
+ <div>
+ <BootstrapTable
+ { ...props.baseProps }
+ />
+ <MySearch { ...props.searchProps } />
+ <br />
+ </div>
+ )
+ }
+ </ToolkitProvider>
+);
+Following, we just explain how it work:
+ToolkitProvider will pass a props which have a property called searchProps. searchProps have following properties:
+
+onSearch: Call this method with search text when you want to do the search.
+In the customization case, you just need to pass searchProps to your component and call searchProps.onSearch when search trigger.
+react-bootstrap-table2 default is search on your raw data. If you define a column.formatter
+Therefore, we support searchFormatted
+Sometime, you hope react-bootstrap-table2 to search another value instead of raw data, you can use column.filterValuecolumn.filterValue for searching.
+..., {
+ dataField : 'type' ,
+ text : 'Job Type' ,
+ formatter : (cell, row ) => types[cell],
+ filterValue : (cell, row ) => types[cell]
+}
+We have a built-in clear search function which allow user to clear search status via clicking button:
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit' ;
+
+const { SearchBar, ClearSearchButton } = Search;
+
+<ToolkitProvider
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ search
+>
+ {
+ props => (
+ <div>
+ <SearchBar { ...props.searchProps } />
+ <ClearSearchButton { ...props.searchProps } />
+ ....
+ </div>
+ )
+ }
+</ToolkitProvider>
+
+className: Add custom class name on clear search button.
+Table Sort · react-bootstrap-table2 react-bootstrap-table2 allow you to configure columns to be sortable. Currently, we don't support the multi-column sort, but it will be implemented in the future.
+Live Demo For Table Sort
+Firstly, you need to know what column you allow user to sort and give the sorttrue in the column definition.
+const columns = [{
+ dataField : 'id' ,
+ text : 'Product ID' ,
+ sort : true
+}, {
+ dataField : 'name' ,
+ text : 'Product Name' ,
+ sort : true
+}, {
+ dataField : 'price' ,
+ text : 'Product Price'
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } />
+After table rendered, you can see the Product ID and Product Name will have a caret icon beside the column name:
+
+react-bootstrap-table2 will only apply the default sort at first time rendering, you can achieve the default sorting on table easily via defaultSorted
+Defined onSort
+{
+ dataField : 'id' ,
+ text : 'Product ID' ,
+ sort : true ,
+ onSort : (field, order ) => {
+
+ }
+}
+You can configure sort props and give dataField and order on BootstrapTable component to set the sorting state:
+Please refer this docs.
+Usually you will need it when you want to control the sorting state externally, like clicking on a button outside the table to force to sort a specified column.
+It's simple!! configure sortFunc
+{
+ dataField : 'id' ,
+ text : 'Product ID' ,
+ sort : true
+
+ sortFunc: (a, b, order, dataField, rowA, rowB ) => {
+ if (order === 'asc' ) {
+ return b - a;
+ }
+ return a - b;
+ }
+}
+There're two way you can change or prettify the header when sorting: headerSortingClassesheaderSortingStyle
+See column.sortCaret
+Bootstrap 4 · react-bootstrap-table2 react-bootstrap-table2 default support bootstrap 3.
+Add bootstrap4BootstrapTable or ToolkitProvider to enable the Bootstrap 4.
+Cell Editing Props · react-bootstrap-table2 Following we list all props for cellEditFactory from react-bootstrap-table2-editor
+import cellEditFactory from 'react-bootstrap-table2-editor' ;
+
+const cellEdit = cellEditFactory({
+ mode : 'click' ,
+ ...
+});
+
+<BootstrapTable cellEdit ={ cellEdit } ... />
+cellEdit.mode possible value is click and dbclick. It's required value that tell react-bootstrap-table2 how to trigger the cell editing.
+Default is false, enable it will be able to save the cell automatically when blur from the cell editor.
+cellEdit.nonEditableRows accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(keyField)
+If a column.validatorreact-bootstrap-table2 will popup a alert at the bottom of editor. cellEdit.timeToCloseMessage is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
+Default is false, when enable it, react-bootstrap-table2 will help you to select the text in the text input automatically when editing.
+
+NOTE: This props only work for text and textarea.
+
+This callback function will be called before triggering cell update.
+const cellEdit = {
+
+ beforeSaveCell: (oldValue, newValue, row, column ) => { ... }
+}
+If you want to perform a async beforeSaveCell, you can do it like that:
+const cellEdit: {
+
+ beforeSaveCell(oldValue, newValue, row, column, done) {
+ setTimeout(() =>if (confirm('Do you want to accep this change?' )) {
+ done();
+ } else {
+ done(false );
+ }
+ }, 0 );
+ return { async : true };
+ }
+};
+This callback function will be called after updating cell.
+const cellEdit = {
+
+ afterSaveCell: (oldValue, newValue, row, column ) => { ... }
+};
+This callback function will be called after editor component mounted
+const cellEdit = {
+
+ onStartEdit: (row, column, rowIndex, columnIndex ) => { ... }
+};
+This prop is not often used. Only used when you want to keep the error message in your application state and also handle the cell editing on remote
+This callback function will be called when error message discard so that you can sync the newest error message to your state if you have.
+cellEdit - [Object]
-Assign a valid `cellEdit` object can enable the cell editing on the cell. The default usage is click/dbclick to trigger cell editing and press `ENTER` to save cell or press `ESC` to cancel editing.
-
-> Note: The `keyField` column can't be edited
-
-Following is the shape of `cellEdit` object:
-```js
-{
- mode: 'click',
- blurToSave: true,
- timeToCloseMessage: 2500,
- editing: false|true,
- errorMessage: '',
- onUpdate: (rowId, dataField, newValue) => { ... },
- beforeSaveCell: (oldValue, newValue, row, column) => { ... },
- afterSaveCell: (oldValue, newValue, row, column) => { ... },
- onErrorMessageDisappear: () => { ... },
- nonEditableRows: () => { ... }
-}
-```
-
-### cellEdit.mode - [String]
-`cellEdit.mode` possible value is `click` and `dbclick`. **It's required value** that tell `react-bootstrap-table2` how to trigger the cell editing.
-
-### cellEdit.blurToSave - [Bool]
-Default is `false`, enable it will be able to save the cell automatically when blur from the cell editor.
-
-### cellEdit.nonEditableRows - [Function]
-`cellEdit.nonEditableRows` accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(`keyField`)
-
-### cellEdit.timeToCloseMessage - [Function]
-If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
-
-### cellEdit.beforeSaveCell - [Function]
-This callback function will be called before triggering cell update.
-
-```js
-const cellEdit = {
- // omit...
- beforeSaveCell: (oldValue, newValue, row, column) => { ... }
-}
-```
-
-### cellEdit.afterSaveCell - [Function]
-This callback function will be called after updating cell.
-
-```js
-const cellEdit = {
- // omit...
- afterSaveCell: (oldValue, newValue, row, column) => { ... }
-};
-```
-
-### cellEdit.onUpdate - [Function]
-If you want to control the cell updating process by yourself, for example, connect with `Redux` or saving data to backend database, `cellEdit.onUpdate` is a great chance you can work on it.
-
-Firsylt, `react-bootstrap-table2` allow `cellEdit.onUpdate` to return a promise:
-
-```js
-const cellEdit = {
- // omit...
- onUpdate: (rowId, dataField, newValue) => {
- return apiCall().then(response => {
- console.log('update cell to backend successfully');
- // Actually, you dont do any thing here, we will update the new value when resolve your promise
- })
- .catch(err => throw new Error(err.message));
- }
-};
-```
-
-If your promise is resolved successfully, `react-bootstrap-table2` will default help you to update the new cell value.
-If your promise is resolved failure, you can throw an `Error` instance, `react-bootstrap-table2` will show up the error message (Same behavior like [`column.validator`](./columns.md#validator)).
-
-In some case, backend will return a new value to client side and you want to apply this new value instead of the value that user input. In this situation, you can return an object which contain a `value` property:
-
-```js
-const cellEdit = {
- // omit...
- onUpdate: (rowId, dataField, newValue) => {
- return apiCall().then(response => {
- return { value: response.value }; // response.value is from your backend api
- })
- .catch(err => throw new Error(err.message));
- }
-};
-```
-
-If your application integgrate with `Redux`, you may need to dispatch an action in `cellEdit.onUpdate` callback. In this circumstances, you need to return `false` explicity which `react-bootstrap-table2` will stop any operation internally and wait rerender by your application.
-
-In a simple redux application, you probably need to handle those props by your application:
-
-* [`cellEdit.editing`](#editing): Is cell still on editing or not? This value should always be `true` when saving cell failure.
-* [`cellEdit.errorMessage`](#errorMessage): Error message when save the cell failure.
-* [`cellEdit.onErrorMessageDisappear`](#onErrorMessageDisappear): This callback will be called when error message alert closed automatically.
-* `cellEdit.onUpdate`
-
-```js
-const cellEdit = {
- editing: this.props.editing,
- errorMessage: this.props.errorMessage,
- onErrorMessageDisappear: () => {
- // cleanErrorMessage is an action creator
- this.props.dispatch(cleanErrorMessage());
- },
- onUpdate: (rowId, dataField, newValue) => {
- // updateCell is an action creator
- this.props.dispatch(updateCell(rowId, dataField, newValue)));
- return false; // Have to return false here
- }
-};
-```
-
-Please check [this](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/develop/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js) exmaple to learn how use `cellEdit` with a redux application
-
-### cellEdit.editing - [Bool]
-This only used when you want to control cell saving externally, `cellEdit.editing` will be a flag to tell `react-bootstrap-table2` whether currecnt editing cell is still editing or not. Because, it's possible that some error happen when you saving cell, in this situation, you need to configre this value as `false` to keep the cell as edtiable and show up an error message.
-
-### cellEdit.errorMessage - [String]
-Same as [`cellEdit.editing`](#editing). This prop is not often used. Only used when you keep the error message in your application state.
-
-### cellEdit.onErrorMessageDisappear - [Function]
-This callback function will be called when error message discard.
-
diff --git a/docs/column-props.html b/docs/column-props.html
new file mode 100644
index 000000000..d9a3e7850
--- /dev/null
+++ b/docs/column-props.html
@@ -0,0 +1,778 @@
+Columns Props · react-bootstrap-table2 Definition of columns props on BootstrapTable
+required ) - [String]Use dataField to specify what field should be apply on this column. If your raw data is nested, for example:
+const row = {
+ id : 'A001' ,
+ address : {
+ postal : '1234-12335' ,
+ city : 'Chicago'
+ }
+}
+You can use dataField with dot(.) to describe nested object:
+dataField: 'address.postal'
+dataField: 'address.city'
+required ) - [String]text will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check column.headerFormatter
+Specify the data type on column. Available value so far is string, number, bool and date. Default is string.column.type can be used when you enable the cell editing and want to save your cell data with correct data type.
+Sometime, you just want to have a column which is not perform any data but just some action components. In this situation, we suggest you to use isDummyField. If column is dummy, the column.dataFielddataField as unique as possible.
+There's only one different for dummy column than normal column, which is dummy column will compare the whole row value instead of cell value when call shouldComponentUpdate.
+hidden allow you to hide column when true given.
+formatter allow you to customize the table column and only accept a callback function which take four arguments and a JSX/String are expected for return.
+
+
+Attention:
+Don't use any state data or any external data in formatter function, please pass them via formatExtraData
+
+headerFormatter allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return.
+
+column: current column object itselfcolIndex: index of current columncomponents: an object which contain all of other react element, like sort caret or filter etc.
+The third argument: components have following specified properties:
+{
+ sortElement,
+ filterElement
+}
+It's only used for column.formattercolumn.formatter
+Enable the column sort via a true value given.
+column.sortValue only work when column.sort enabled. This prop allow you to replace the value when table sorting.
+For example, consider following data:
+const types = ['Cloud Service' , 'Message Service' , 'Add Service' , 'Edit Service' , 'Money' ];
+const data = [{id : 1 , type : 2 }, {id : 2 , type : 1 }, {id : 3 , type :0 }];
+const columns = [{
+ dataField : 'id' ,
+ text : 'Job ID'
+}, {
+ dataField : 'type' ,
+ text : 'Job Type'
+ sort: true ,
+ formatter : (cell, row ) => types[cell]
+}]
+In above case, when user try to sort Job Type column which will sort the original value: 0, 1, 2 but we display the type name via column.formattersortValue is a way for you to decide what kind of value should be adopted when sorting on a specify column:
+const columns = [{
+ dataField : 'id' ,
+ text : 'Job ID'
+}, {
+ dataField : 'type' ,
+ text : 'Job Type'
+ sort: true ,
+ formatter : (cell, row ) => types[cell],
+ sortValue : (cell, row ) => types[cell]
+}]
+column.sortFunc only work when column.sort is enable. sortFunc allow you to define your sorting algorithm. This callback function accept six arguments:
+{
+
+ sort: true ,
+ sortFunc : (a, b, order, dataField, rowA, rowB ) => {
+ if (order === 'asc' ) return a - b;
+ else return b - a;
+ }
+}
+
+The possible value of order argument is ascdesc
+
+Usecolumn.sortCaret to custom the sort caret. This callback function accept two arguments: order and column
+{
+
+ sort: true ,
+ sortCaret : (order, column ) => {
+ return
+ }
+}
+
+The possible value of order argument is ascdescundefined
+
+column.onSort is an event listener for subscribing the event of sort:
+{
+
+ sort: true ,
+ onSort : (field, order ) => {
+
+ }
+}
+It's available to have custom class on table column:
+{
+
+ classes: 'id-custom-cell'
+}
+In addition, classes also accept a callback function which have more power to custom the css class on each columns. This callback function take 4 arguments and a String is expected to return:
+{
+ classes : function callback (cell, row, rowIndex, colIndex ) Parameters
+
+cell: The value of current cell.row: The value of row being processed in the BootstrapTable.rowIndex: The index of the current row being processed in the BootstrapTable.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new String will be the result as element class.
+It's similar to column.classesheaderClasses is available to have customized class on table header column:
+{
+
+ headerClasses: 'id-custom-cell'
+}
+Furthermore, it also accept a callback function which takes 2 arguments and a String is expect to return:
+{
+ headerClasses : function callback (column, colIndex ) Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new String will be the result of element headerClasses.
+It's available to have custom style on table column:
+{
+
+ style: { backgroundColor : 'green' }
+}
+In addition, similar to column.classesstyle also accept a callback function which have more power to customize the inline style on each columns. This callback function takes 4 arguments and an Object is expect to return:
+{
+ style : function callback (cell, row, rowIndex, colIndex ) Parameters
+
+cell: The value of current cell.row: The value of row being processed in the BootstrapTable.rowIndex: The index of the current row being processed in the BootstrapTable.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new Object will be the result of element style.
+It's available to have customized inline-style on table header column:
+{
+
+ headerStyle: { backgroundColor : 'green' }
+}
+Moreover, it also accept a callback function which takes 2 arguments and an Object is expect to return:
+{
+ headerStyle : function callback (column, colIndex ) Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new Object will be the result of element headerStyle.
+react-bootstrap-table2 is disable HTML titletitle as true to enable the HTML title on table column and take cell content as default value. Additionally, you could customize title via a callback. It takes 4 arguments and a String is expect to return:
+{
+
+ title: function callback (cell, row, rowIndex, colIndex ) Parameters
+
+cell: The value of current cell.row: The value of row being processed in the BootstrapTable.rowIndex: The index of the current row being processed in the BootstrapTable.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new String will be the result of element title.
+headerTitle is only for the title on header column, default is disable. The usage almost same as column.title
+{
+
+ headerTitle: true
+}
+It's also available to custom via a callback function:
+{
+ headerTitle : function callback (column, colIndex ) Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new String will be the result of element headerTitle.
+You can configure the CSS text-align for table column by align property.
+Besides, align also accept a callback function for dynamically setting text align. It takes 4 arguments and a String is expect to return:
+{
+
+ align: function callback (cell, row, rowIndex, colIndex ) Parameters
+
+cell: The value of current cell.row: The value of row being processed in the BootstrapTable.rowIndex: The index of the current row being processed in the BootstrapTable.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new String will be the result of element text alignment.
+It's almost same as column.alignCSS text-align on header column.
+{
+
+ headerAlign: 'center'
+}
+Also, you can custom the align by a callback function:
+{
+
+ headerAlign: (column, colIndex ) => {
+
+
+ }
+}
+Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new String will be the result of element headerAlign.
+You can assign any HTML Event on table column via events property.
+react-bootstrap-table2 currently only support following events which will receive some specific information:
+
+onClick
+onDoubleClick
+onMouseEnter
+onMouseLeave
+onContextMenu
+
+{
+
+ events: {
+ onClick : (e, column, columnIndex, row, rowIndex ) => { ... },
+ }
+}
+If the events is not listed above, the callback function will only receive the event object.
+headerEvents same as column.events
+{
+
+ headerEvents: {
+ onClick : (e, column, columnIndex ) => { ... }
+ }
+}
+Via attrs property, You can customize table column HTML attribute which allow user to configure the elements or adjust their behavior.
+{
+
+ attrs: {
+ title : 'bar' ,
+ 'data-test' : 'foo'
+ }
+}
+Not only Object, callback function is also acceptable. It takes 4 arguments and an Object is expect to return:
+{
+ attrs : function callback (cell, row, rowIndex, colIndex ) Parameters
+
+cell: The value of current cell.row: The value of row being processed in the BootstrapTable.rowIndex: The index of the current row being processed in the BootstrapTable.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new Object will be the result of element HTML attributes.
+
+Caution:column.classes, column.style, column.title, column.hidden or column.align was given at the same time, property attrs has lower priority and it will be overwritten:
+
+{
+
+ title: true ,
+ attrs: { title : 'test' }
+}
+headerAttrs is similar to column.attrs
+{
+
+ headerAttrs: {
+ title : 'bar' ,
+ 'data-test' : 'foo'
+ }
+}
+Additionally, customize the header attributes by a 2 arguments callback function:
+{
+
+ headerAttrs: (column, colIndex ) => ({
+
+ })
+}
+Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+Return value
+A new Object will be the result of element headerAttrs.
+
+Caution:column.attrs , it has lower priority and will be
+overwrited when other props related to HTML attributes were given.
+
+headerSortingClasses allows to customize class for header cell when this column is sorting.
+const headerSortingClasses = 'demo-sorting' ;
+Furthermore, it also accepts a callback which takes 4 arguments and String is expected to return:
+const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex ) => { ... }
+
+column: The value of current column.sortOrder: The order of current sortingisLastSorting: Is the last one of sorted columns.colIndex: The index of the current column being processed in BootstrapTable.
+It's similiar to headerSortingClasses . It allows to customize the style of header cell when this column is sorting. A style Object and callback are acceptable. callback takes 4 arguments and an Object is expected to return:
+const sortingHeaderStyle = {
+ backgroundColor : 'red'
+};
+Give a string to render the string value on the footer column.
+const columns = [{
+ dataField : 'id' ,
+ text : 'Product ID' ,
+ footerAlign : 'center' ,
+ footer : 'Footer 1'
+}, .....];
+This prop also accept a function:
+{
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ footer : (columnData, column, columnIndex ) => columnData.reduce((acc, item ) => acc + item, 0 )
+}
+footerFormatter allow you to customize the table footer column and only accept a callback function which take two arguments and a JSX/String are expected for return.
+
+It's similar to column.classesfooterClasses is available to have customized class on table footer column:
+{
+
+ footerClasses: 'id-custom-cell'
+}
+Furthermore, it also accept a callback function which takes 2 arguments and a String is expect to return:
+{
+ footerClasses : function callback (column, colIndex ) Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+Customized the inline-style on table footer column:
+{
+
+ footerStyle: { backgroundColor : 'green' }
+}
+Moreover, it also accept a callback function which takes 2 arguments and an Object is expect to return:
+{
+ footerStyle : function callback (column, colIndex ) Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+Configure the title on footer column, default is disable. The usage is almost same as column.title
+{
+
+ footerTitle: true
+}
+It's also available to custom via a callback function:
+{
+ footerTitle : function callback (column, colIndex ) Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+footerEvents same as column.events
+{
+
+ footerEvents: {
+ onClick : (e, column, columnIndex ) => { ... }
+ }
+}
+It's almost same as column.alignCSS text-align on footer column.
+{
+
+ footerAlign: 'center'
+}
+Also, you can custom the align by a callback function:
+{
+
+ footerAlign: (column, colIndex ) => {
+
+
+ }
+}
+Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+footerAttrs is similar to column.attrs
+{
+
+ footerAttrs: {
+ title : 'bar' ,
+ 'data-test' : 'foo'
+ }
+}
+Additionally, customize the header attributes by a 2 arguments callback function:
+{
+
+ footerAttrs: (column, colIndex ) => ({
+
+ })
+}
+Parameters
+
+column: The value of current column.colIndex: The index of the current column being processed in BootstrapTable.
+column.editable default is true, means every column is editable if you configure cellEditfalse.
+If a callback function given, you can control the editable level as cell level:
+{
+
+ editable: (cell, row, rowIndex, colIndex ) => {
+
+ }
+}
+column.validator used for validate the data when cell on updating. it's should accept a callback function with following argument:
+newValue, row and column:
+{
+
+ validator: (newValue, row, column ) => {
+ return ...;
+ }
+}
+The return value can be a bool or an object. If your validation is pass, return true explicitly. If your validation is invalid, return following object instead:
+{
+ valid : false ,
+ message : 'SOME_REASON_HERE'
+}
+If you want to perform a asycn validation, you can do it like this:
+{
+
+ validator: (newValue, row, column, done ) => {
+ settimeout(() =>return done();
+
+
+ return done({
+ valid : false ,
+ message : 'SOME_REASON_HERE'
+ });
+
+ }, 2000 );
+ return { async : true };
+ }
+}
+You can use column.editCellStyle to custom the style of <td> when cell editing. It like most of customizable functionality, it also accept a callback function with following params:
+Parameters
+
+cell: The value of current cell.row: The object of row being processed in the BootstrapTable.rowIndex: The index of the current row being processed in the BootstrapTable.colIndex: The index of the current column being processed in BootstrapTable.
+{
+ editCellStyle : { ... }
+}
+Or take a callback function
+{
+ editCellStyle : (cell, row, rowIndex, colIndex ) => {
+
+ }
+}
+You can use column.editCellClasses to add custom class on <td> when cell editing. It's same as column.editCellStylecell, row, rowIndex, colIndex.
+{
+ editCellClasses : 'custom-class'
+}
+Or take a callback function
+{
+ editCellClasses : (cell, row, rowIndex, colIndex ) => {
+
+ }
+}
+This is almost same as column.editCellStylecolumn.editorStyle is for custom the style on editor instead of cell(td).
+This is almost same as column.editCellClassescolumn.editorClasses is for custom the class on editor instead of cell(td).
+column.editor allow you to custom the type of cell editor by following predefined type:
+
+Text(Default)
+Dropdown
+Date
+Textarea
+Checkbox
+
+Following is a quite example:
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor' ;
+
+const columns = [
+
+ , {
+ dataField : 'done' ,
+ text : 'Done' ,
+ editor : {
+ type : Type.CHECKBOX,
+ value : 'Y:N'
+ }
+ }
+];
+Please check here for more detail about rich editors.
+If you feel above predefined editors are not satisfied to your requirement, you can totally custom the editor via column.editorRenderer:
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor' ;
+
+
+class QualityRanger extends React .Component static propTypes = {
+ value : PropTypes.number,
+ onUpdate : PropTypes.func.isRequired
+ }
+ static defaultProps = {
+ value : 0
+ }
+ getValue() {
+ return parseInt (this .range.value, 10 );
+ }
+ render() {
+ const { value, onUpdate, ...rest } = this .props;
+ return [
+ <input
+ { ...rest }
+ key="range"
+ ref={ node => this.range = node }
+ type="range"
+ min="0"
+ max="100"
+ />,
+ <button
+ key="submit"
+ className="btn btn-default"
+ onClick={ () => onUpdate(this.getValue()) }
+ >
+ done
+ </button>
+ ];
+ }
+}
+
+
+const columns = [
+ //...
+ , {
+ dataField: 'done',
+ text: 'Done',
+ editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) =>
+ <QualityRanger { ...editorProps } value={ value } />;
+ }
+];
+Please check here for more detail.
+Configure column.filter will able to setup a column level filter on the header column. Currently, react-bootstrap-table2 support following filters:
+
+Text Filter
+Select Filter
+Number Filter
+Date Filter
+
+We have a quick example to show you how to use column.filter:
+import { textFilter } from 'react-bootstrap-table2-filter' ;
+
+
+{
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ filter : textFilter()
+}
+For some reason of simple customization, react-bootstrap-table2 allow you to pass some props to filter factory function. Please check here for more detail tutorial.
+Sometimes, if the cell/column value that you don't want to filter on them, you can define filterValue to return a actual value you wanna be filtered:
+Parameters
+
+cell: The value of current cell.row: The value of current row.
+Return value
+A final String value you want to be filtered.
+
+{
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ filter : textFilter(),
+ filterValue : (cell, row ) => owners[cell]
+}
+Default the column is searchable. Give false to disable search functionality on specified column.
+Default is String. Currently, the available value is String and Number. If Number assigned, the cell value will not wrapped with double quote.
+This is same as column.formattercsvFormatter only for CSV export and called when export CSV.
+Custom the CSV header cell, Default is column.text
+Default is true, false will hide this column when export CSV.
+column.dataField (**required**) - [String]
-Use `dataField` to specify what field should be apply on this column. If your raw data is nested, for example:
-
-```js
-const row = {
- id: 'A001',
- address: {
- postal: '1234-12335',
- city: 'Chicago'
- }
-}
-```
-You can use `dataField` with dot(`.`) to describe nested object:
-
-```js
-dataField: 'address.postal'
-dataField: 'address.city'
-```
-
-## column.text (**required**) - [String]
-`text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter)
-
-## column.hidden - [Bool]
-`hidden` allow you to hide column when `true` given.
-
-## column.formatter - [Function]
-`formatter` allow you to customize the table column and only accept a callback function which take four arguments and a JSX/String are expected for return.
-
-* `cell`
-* `row`
-* `rowIndex`
-* [`formatExtraData`](#formatExtraData)
-
-## column.headerFormatter - [Function]
-`headerFormatter` allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return.
-
-* `column`: column object itself
-* `colIndex`
-* `components`: it's an object which contain all of other react element, like sort caret or filter etc.
-
-The third argument: `components` have following specified properties:
-```js
-{
- sortElement, // sort caret element, it will not be undefined when you enable sort on this column
- filterElement // filter element, it will not be undefined when you enable column.filter on this column
-}
-```
-
-## column.formatExtraData - [Any]
-It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
-
-## column.sort - [Bool]
-Enable the column sort via a `true` value given.
-
-## column.sortFunc - [Function]
-`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept four arguments:
-
-```js
-{
- // omit...
- sort: true,
- sortFunc: (a, b, order, dataField) => {
- if (order === 'asc') return a - b;
- else return b - a;
- }
-}
-```
-> The possible value of `order` argument is **`asc`** and **`desc`**.
-
-## column.classes - [String | Function]
-It's availabe to have custom class on table column:
-
-```js
-{
- // omit...
- classes: 'id-custom-cell'
-}
-```
-In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take `4` arguments and a `string` is expect to return:
-
-
-```js
-{
- classes: function callback(cell, row, rowIndex, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `cell`: The value of current cell.
-* `row`: The value of `row` being processed in the `BootstrapTable`.
-* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `String` will be the result of element class.
-
-## column.headerClasses - [String | Function]
-It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column:
-
-```js
-{
- // omit...
- headerClasses: 'id-custom-cell'
-}
-```
-Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return:
-
-```js
-{
- headerClasses: function callback(column, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `column`: The value of current column.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `String` will be the result of element headerClasses.
-
-## column.style - [Object | Function]
-It's availabe to have custom style on table column:
-
-```js
-{
- // omit...
- style: { backgroundColor: 'green' }
-}
-```
-
-In addition, similar to [`column.classes`](#classes), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes `4` arguments and an `Object` is expect to return:
-
-
-```js
-{
- style: function callback(cell, row, rowIndex, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `cell`: The value of current cell.
-* `row`: The value of `row` being processed in the `BootstrapTable`.
-* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `Object` will be the result of element style.
-
-
-## column.headerStyle - [Object | Function]
-It's availabe to have customized inline-style on table header column:
-
-```js
-{
- // omit...
- headerStyle: { backgroundColor: 'green' }
-}
-```
-
-Moreover, it also accept a callback function which takes 2 arguments and an `Object` is expect to return:
-
-```js
-{
- headerStyle: function callback(column, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `column`: The value of current column.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `Object` will be the result of element headerStyle.
-
-
-## column.title - [Bool | Function]
-`react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column and take `cell content` as default value. Additionally, you could customize title via a callback. It takes `4` arguments and a `String` is expect to return:
-
-
-```js
-{
- // omit...
- title: function callback(cell, row, rowIndex, colIndex) { ... }
- // return custom title here
-}
-```
-
-**Parameters**
-* `cell`: The value of current cell.
-* `row`: The value of `row` being processed in the `BootstrapTable`.
-* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `String` will be the result of element title.
-
-## column.headerTitle - [Bool | Function]
-`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title),
-
-```js
-{
- // omit...
- headerTitle: true
-}
-```
-
-It's also availabe to custom via a callback function:
-```js
-{
- headerTitle: function callback(column, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `column`: The value of current column.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `String` will be the result of element headerTitle.
-
-## column.align - [String | Function]
-You can configure the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) for table column by `align` property.
-
-Besides, `align` also accept a callback function for dynamically setting text align. It takes `4` arguments and a `String` is expect to return:
-
-```js
-{
- // omit...
- align: function callback(cell, row, rowIndex, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `cell`: The value of current cell.
-* `row`: The value of `row` being processed in the `BootstrapTable`.
-* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `String` will be the result of element text alignment.
-
-## column.headerAlign - [String | Function]
-It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on header column.
-
-```js
-{
- // omit...
- headerAlign: 'center'
-}
-```
-
-Also, you can custom the align by a callback function:
-
-```js
-{
- // omit...
- headerAlign: (column, colIndex) => {
- // column is an object and perform itself
- // return custom title here
- }
-}
-```
-**Parameters**
-* `column`: The value of current column.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `String` will be the result of element headerAlign.
-
-
-## column.events - [Object]
-You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property:
-
-```js
-{
- // omit...
- events: {
- onClick: e => { ... }
- }
-}
-```
-
-## column.headerEvents - [Object]
-`headerEvents` same as [`column.events`](#events) but this is for header column.
-
-```js
-{
- // omit...
- headerEvents: {
- onClick: e => { ... }
- }
-}
-```
-
-## column.attrs - [Object | Function]
-Via `attrs` property, You can customize table column [HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) which allow user to configure the elements or adjust their behavior.
-
-```js
-{
- // omit...
- attrs: {
- title: 'bar',
- 'data-test': 'foo'
- }
-}
-```
-Not only `Object`, `callback function` is also acceptable. It takes `4` arguments and an `Object` is expect to return:
-
-```js
-{
- attrs: function callback(cell, row, rowIndex, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `cell`: The value of current cell.
-* `row`: The value of `row` being processed in the `BootstrapTable`.
-* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `Object` will be the result of element HTML attributes.
-
-#### * Caution
-
-If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited.
-
-```js
-{
- // omit...
- title: true, // it will be chosen.
- attrs: { title: 'test' }
-}
-```
-
-## column.headerAttrs - [Object | Function]
-`headerAttrs` is similiar to [`column.attrs`](#attrs) but it works for header column.
-```js
-{
- // omit...
- headerAttrs: {
- title: 'bar',
- 'data-test': 'foo'
- }
-}
-```
-
-Additionally, customize the header attributes by a `2-arguments` callback function:
-
-```js
-{
- // omit...
- headerAttrs: (column, colIndex) => ({
- // return customized HTML attribute here
- })
-}
-```
-
-**Parameters**
-* `column`: The value of current column.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-**Return value**
-
-A new `Object` will be the result of element headerAttrs.
-
-> Caution:
-> Same as [column.attrs](#attrs), it has lower priority and will be
-> overwrited when other props related to HTML attributes were given.
-
-### headerSortingClasses - [String | Function]
-
-`headerSortingClasses` allows to customize `class` for header cell when this column is sorting.
-
-```js
-const headerSortingClasses = 'demo-sorting';
-```
-
-Furthermore, it also accepts a callback which takes **4** arguments and `String` is expected to return:
-
-```js
-const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { ... }
-```
-
-* `column`: The value of current column.
-* `sortOrder`: The order of current sorting
-* `isLastSorting`: Is the last one of sorted columns.
-* `colIndex`: The index of the current column being processed in BootstrapTable.
-
-### headerSortingStyle - [Object | Function]
-
-It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
-
-```js
-const sortingHeaderStyle = {
- backgroundColor: 'red'
-};
-```
-
-## column.editable - [Bool | Function]
-`column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`.
-
-If a callback function given, you can control the editable level as cell level:
-
-```js
-{
- // omit...
- editable: (cell, row, rowIndex, colIndex) => {
- // return true or false;
- }
-}
-```
-
-## column.validator - [Function]
-`column.validator` used for validate the data when cell on updating. it's should accept a callback function with following argument:
-`newValue`, `row` and `column`:
-
-```js
-{
- // omit...
- validator: (newValue, row, column) => {
- return ...;
- }
-}
-```
-
-The return value can be a bool or an object. If your valiation is pass, return `true` explicitly. If your valiation is invalid, return following object instead:
-```js
-{
- valid: false,
- message: 'SOME_REASON_HERE'
-}
-```
-
-## column.editCellStyle - [Object | Function]
-You can use `column.editCellStyle` to custom the style of `` when cell editing. It like most of customizable functionality, it also accept a callback function with following params:
-
-**Parameters**
-* `cell`: The value of current cell.
-* `row`: The object of `row` being processed in the `BootstrapTable`.
-* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-```js
-{
- editCellStyle: { ... }
-}
-```
-Or take a callback function
-
-```js
-{
- editCellStyle: (cell, row, rowIndex, colIndex) => {
- // it is suppose to return an object
- }
-}
-```
-
-## column.editCellClasses - [String | Function]
-You can use `column.editCellClasses` to add custom class on ` ` when cell editing. It's same as [`column.editCellStyle`](#editCellStyle) which also accept a callback function to able to custom your class more flexible. Following is the arguments of this callback function: `cell`, `row`, `rowIndex`, `colIndex`.
-
-```js
-{
- editCellClasses: 'custom-class'
-}
-```
-Or take a callback function
-
-```js
-{
- editCellClasses: (cell, row, rowIndex, colIndex) => {
- // it is suppose to return a string
- }
-}
-```
-
-## column.filter - [Object]
-Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters:
-
-* Text(`textFilter`)
-
-We have a quick example to show you how to use `column.filter`:
-
-```
-import { textFilter } from 'react-bootstrap-table2-filter';
-
-// omit...
-{
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter()
-}
-```
-
-For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
\ No newline at end of file
diff --git a/docs/development.md b/docs/development.md
deleted file mode 100644
index 372bfa901..000000000
--- a/docs/development.md
+++ /dev/null
@@ -1,28 +0,0 @@
-## Development Guide
-
-### Setup
-```bash
-$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
-$ cd react-bootstrap-table
-$ npm install
-$ lerna bootstrap # ./node_modules/.bin/lerna bootstrap
-```
-### Development
-```bash
-$ npm start
-```
-
-### Launch StoryBook
-We use [storybook](https://storybook.js.org/) to list our examples and it also has hot reload from source code. Sometimes, it is also a good entry point to development.
-
-```bash
-$ cd packages/react-bootstrap-table2-example
-$ npm run storybook
-```
-
-### Testing
-```bash
-$ npm test
-$ npm run test:watch # for watch mode
-$ npm run test:coverage # generate coverage report
-```
\ No newline at end of file
diff --git a/docs/export-csv-props.html b/docs/export-csv-props.html
new file mode 100644
index 000000000..db9a0be0a
--- /dev/null
+++ b/docs/export-csv-props.html
@@ -0,0 +1,61 @@
+Export CSV Props · react-bootstrap-table2
› Export to CSV Definition Export CSV in one of features supported by react-bootstrap-table2-toolkit. By passing exportCSV prop to ToolkitProvider for enabling this functionality.
+N/A
+<ToolkitProvider
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ exportCSV={ {
+ fileName: 'custom.csv',
+ separator: '|',
+ ignoreHeader: true,
+ noAutoBOM: false
+ } }
+>
+ //...
+</ToolkitProvider>
+Custom the csv file name.
+Custom the csv file separator.
+Default is false. Give true to avoid to attach the csv header.
+Default is true. Give false to attach the table footer if enabled.
+Default is true.
+Default is text/plain;charset=utf-8. Change to update the blob type of the exported file.
+Default is true. false will only export current display data on table.
+Default is false. true will only export the data which is selected
+Default is false. true will only export the data which is filtered/searched.
+
+
+Note: When you configure this prop as true, you must turn off exportAll.
+
+
+Introduction Exposed API · react-bootstrap-table2 react-bootstrap-table2 support some hooks function that you can use to know what state changes, for example: a row is select or unselect.
+In addition, we also allow you use React Refs to directly access the components so that you can easier to get some table states.
+Live Demo
+BootstrapTable<BootstrapTable
+ ref={ n => this .node = n }
+ ...
+/>
+this.node.table.props.data
+this.node.selectionContext.selected
+this.node.rowExpandContext.state.expanded
+this.node.paginationContext.currPage
+this.node.paginationContext.currSizePerPage
+this.node.sortContext.state.sortColumn
+this.node.sortContext.state.sortOrder
+this.node.filterContext.currFilters
+this.node.cellEditContext.startEditing(0, 1); // rowindex, columnindex
+Column Filter Props · react-bootstrap-table2
› Column Filter Definition react-bootstrap-table2 separate the filter core code base to react-bootstrap-table2-filter . The following are guideline about how to use and the details of props of filterFactory and filters . For more information, please take refer to the samples as link here.
+Content Table Getting Started Please check Getting Started Guide
+How to use You should apply following two props to enable filter functionality:
+
+Give filter prop on BootstrapTable which value is the return value from calling filterFactory function
+Add filter property on column object:
+
+textFilter
+selectFilter
+multiSelectFilter
+numberFilter
+dateFilter
+customFilter
+
+
+For example:
+import BootstrapTable from 'react-bootstrap-table-next' ;
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter' ;
+
+const columns = [{
+ dataField : 'id' ,
+ text : 'Product ID'
+}, {
+ dataField : 'name' ,
+ text : 'Product Name'
+}, {
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ filter : textFilter()
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+Props of FilterFactory No Any Available Props Yet
+Props of Filters Required : NONE
+Optional :
+
+custom element HTML id for filter
+
+
+custom the input placeholder
+
+
+custom class name on input
+
+
+default filtering value
+
+
+Specify what kind of comparator to compare. Default is Comparator.LIKE
+
+
+default is false, and true will only work when comparator is LIKE.
+
+
+your custom inline styles on input
+
+
+Debounce time, which means how long will trigger filtering after user typing. Default is 500ms.
+
+
+export filter function to allow users to access. For textFilter, filter(value) to filter columns dynamically.
+
+
+Register a listener which will be called when column filter being triggered. If you return an array value, react-bootstrap-table2 will adopt this value as final filted result.
+
+Example
+import BootstrapTable from 'react-bootstrap-table-next' ;
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter' ;
+
+const columns = [{
+ dataField : 'id' ,
+ text : 'Product ID' ,
+}, {
+ dataField : 'name' ,
+ text : 'Product Name' ,
+ filter : textFilter({
+ placeholder : 'My Custom PlaceHolder' ,
+ className: 'my-custom-text-filter' ,
+ defaultValue: 'test' ,
+ comparator: Comparator.EQ,
+ caseSensitive: true ,
+ style: { backgroundColor : 'yellow' },
+ delay: 1000 ,
+ onClick: e =>console .log(e),
+ getFilter : (filter ) => {
+ nameFilter = filter;
+ },
+ onFilter : (filterValue ) => { filter listener
+
+ }
+ })
+}, {
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ filter : textFilter()
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+Required :
+
+(Required) the options for the list of drop down.
+
+Optional :
+
+custom element HTML id for filter
+
+
+custom class name on input
+
+
+When it was set to true, the drop down list would hide the default selection.
+
+
+default filtering value
+
+
+Specify what kind of comparator to compare. Default is Comparator.EQ
+
+
+your custom inline styles on input
+
+
+export filter function to allow users to access. For selectFilter, filter(value) to filter columns dynamically.
+
+
+Register a listener which will be called when column filter being triggered. If you return an array value, react-bootstrap-table2 will adopt this value as final filted result.
+
+Example
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+// options as Object
+const selectOptions = {
+ 0: 'good',
+ 1: 'Bad',
+ 2: 'unknown'
+};
+
+// options as Array
+const selectOptions = [
+ { value: 0, label: 'good' },
+ { value: 1, label: 'Bad' },
+ { value: 2, label: 'unknown' }
+];
+
+// options as Function
+function selectOptions = (column) => [
+ { value: 0, label: 'good' },
+ { value: 1, label: 'Bad' },
+ { value: 2, label: 'unknown' }
+];
+
+
+const columns = [
+ { ... }, { ... }, {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions[cell],
+ filter: selectFilter({
+ options: selectOptions,
+ className: 'test-classname',
+ withoutEmptyOption: true,
+ defaultValue: 2,
+ comparator: Comparator.LIKE, // default is Comparator.EQ
+ style: { backgroundColor: 'pink' },
+ getFilter: (filter) => { // qualityFilter was assigned once the component has been mounted.
+ qualityFilter = filter;
+ },
+ onFilter: (filterValue) => { filter listener
+ //...
+ }
+ })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+Required :
+
+(Required) the options for the list of drop down.
+
+Optional :
+
+custom element HTML id for filter
+
+
+custom class name on input
+
+
+When it was set to true, the drop down list would hide the default selection.
+
+
+default filtering value
+
+
+Specify what kind of comparator to compare. Default is Comparator.EQ
+
+
+your custom inline styles on input
+
+
+export filter function to allow users to access. For multiSelectFilter, filter(value) to filter columns dynamically.
+
+
+Register a listener which will be called when column filter being triggered. If you return an array value, react-bootstrap-table2 will adopt this value as final filted result.
+
+Example
+import BootstrapTable from 'react-bootstrap-table-next' ;
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter' ;
+
+const selectOptions = {
+ 0 : 'good' ,
+ 1 : 'Bad' ,
+ 2 : 'unknown'
+};
+
+const columns = [
+ { ... }, { ... }, {
+ dataField : 'quality' ,
+ text : 'Product Quailty' ,
+ formatter : cell =>filter : multiSelectFilter({
+ options : selectOptions,
+ className : 'test-classname' ,
+ withoutEmptyOption : true ,
+ defaultValue : [0 , 2 ],
+ comparator : Comparator.LIKE,
+ style: { backgroundColor : 'pink' },
+ getFilter : (filter ) => {
+ qualityFilter = filter;
+ },
+ onFilter : (filterValue ) => { filter listener
+
+ }
+ })
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+Required : NONE
+Optional :
+
+custom element HTML id for filter
+
+
+Once the options has been defined, it will render number select drop down instead of number input field.
+
+
+Debounce time, which means how long will trigger filtering after user typing. Default is 500ms.
+
+
+customized placeholder for number input.
+
+
+When it was set to true, the drop down list of comparator would hide the default selection.
+
+
+When it was set to true, the drop down list of number would hide the default selection. Besides, before picking up this prop, please make sure that you've defined the props.options correctly.
+
+
+It is the default filtering value. Furthermore, it accepts 2 attributes:
+
+number: filter value
+comparator: what kind of comparator to compare
+
+
+
+Specify what kind of comparator to compare. Default is to list all of comparators.
+
+
+custom class name on the wrapper of number input and comparator drop down.
+
+
+custom class name on the comparator drop down.
+
+
+custom class name on the number input.
+
+
+custom inline styles on the wrapper of number input and comparator drop down.
+
+
+custom inline styles on the comparator drop down.
+
+
+custom inline styles on the number input.
+
+
+export filter function to allow users to access. For numberFilter,filter({ number, comparator }) to filter columns dynamically.
+
+
+Register a listener which will be called when column filter being triggered. If you return an array value, react-bootstrap-table2 will adopt this value as final filted result.
+
+Example :
+import BootstrapTable from 'react-bootstrap-table-next' ;
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter' ;
+
+const columns = [{ ... }, { ... }, {
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ filter : numberFilter({
+ options : [2100 , 2103 , 2105 ],
+ delay: 600 ,
+ placeholder: 'custom placeholder' ,
+ withoutEmptyComparatorOption: true ,
+ withoutEmptyNumberOption: true ,
+ comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+ style: { display : 'inline-grid' },
+ className: 'custom-numberfilter-class' ,
+ comparatorStyle: { backgroundColor : 'antiquewhite' },
+ comparatorClassName: 'custom-comparator-class' ,
+ numberStyle: { backgroundColor : 'cadetblue' , margin : '0px' },
+ numberClassName: 'custom-number-class' ,
+ defaultValue: { number : 2103 , comparator : Comparator.GT },
+ getFilter: (filter ) => {
+ priceFilter = filter;
+ },
+ onFilter : (filterValue ) => { filter listener
+
+ }
+ })
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+Required : NONE
+Optional :
+
+custom element HTML id for filter
+
+
+Debounce time, which means how long will trigger filtering after user typing. Default is 0.
+
+
+customized placeholder for date input.
+
+
+When it was set to true, the drop down list of comparator would hide the default selection.
+
+
+It is the default filtering value. Furthermore, it accepts 2 attributes:
+
+date: a date object which need to be filtered
+comparator: what kind of comparator to compare
+
+
+
+Specify what kind of comparator to compare. Default is to list all of comparators.
+
+
+custom class name on the wrapper of date input and comparator drop down.
+
+
+custom class name on the comparator drop down.
+
+
+custom class name on the date input.
+
+
+custom inline styles on the wrapper of date input and comparator drop down.
+
+
+custom inline styles on the comparator drop down.
+
+
+custom inline styles on the date input.
+
+
+export filter function to allow users to access. For dateFilter,filter({ date, comparator }) to filter columns dynamically.
+
+
+Register a listener which will be called when column filter being triggered. If you return an array value, react-bootstrap-table2 will adopt this value as final filted result.
+
+Example :
+import BootstrapTable from 'react-bootstrap-table-next' ;
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter' ;
+
+const columns = [{ ... }, { ... }, {
+ dataField : 'date' ,
+ text : 'Product Date' ,
+ filter : dateFilter({
+ delay : 600 ,
+ placeholder: 'custom placeholder' ,
+ withoutEmptyComparatorOption: true ,
+ comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+ style: { display : 'inline-grid' },
+ className: 'custom-dateFilter-class' ,
+ comparatorStyle: { backgroundColor : 'antiquewhite' },
+ comparatorClassName: 'custom-comparator-class' ,
+ dateStyle: { backgroundColor : 'cadetblue' , margin : '0px' },
+ dateClassName: 'custom-date-class' ,
+ defaultValue: { date : new Date (2018 , 0 , 1 ), comparator : Comparator.GT },
+ getFilter: (filter ) => {
+ prodDateFilter = filter;
+ },
+ onFilter : (filterValue ) => { filter listener
+
+ }
+ });
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+Required : NONE
+Optional :
+
+Assign the filter mode when react-bootstrap-table filering your data, please check FILTER_TYPES for available values.
+
+
+Specify what kind of comparator to compare. Default is Comparator.LIKE. But if customFilter.type is FILTER_TYPES.SELECT, this default value will be Comparator.EQ
+
+
+default is false, and true will only work when comparator is LIKE.
+
+Comparator We support the following ways to do the comparison. Each filter has its default comparator. For more information, please take refer to the introduction of props above.
+
+
+Comparator Symbol description
+
+1 Comparator.LIKE N/A To include filter value 2 Comparator.EQ = 3 Comparator.NE != 4 Comparator.GT > 5 Comparator.GE >= 6 Comparator.LT < 7 Comparator.LE <=
+
+FILTER_TYPES Following properties is valid in FILTER_TYPES:
+
+TEXT
+SELECT
+MULTISELECT
+NUMBER
+DATE
+
+You will only need the FILTER_TYPES when you are customize the filter component and you want to assign a specify filter mode.
+Position Default filter is rendered inside the table column header, but you can choose to render them as a row by filterPosition:
+<BootstrapTable
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ filter={ filterFactory() }
+ filterPosition="top"
+/>
+<BootstrapTable
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ filter={ filterFactory() }
+ filterPosition="bottom"
+/>
+filterFactory is a factory function for initializing some internal config. Below is available options for filterFactory:
+This hook function will be called with two arguments(new filter result and filter object) when filtering completed.
+function afterFilter (newResult, newFilters ) console .log(newResult);
+ console .log(newFilters);
+}
+export default () => (
+ <div >
+ <BootstrapTable
+ keyField ="id"
+ data ={ products }
+ columns ={ columns }
+ filter ={ filterFactory ({ afterFilter }) }
+ />
+ </div >
+);
+Getting Started · react-bootstrap-table2
+Due to react-bootstrap-table2 already taken on npm our module is called react-bootstrap-table-nextreact-bootstrap-table2 in any our git repository, official website and documentation - only the npm name is different!
+
+$ npm install react-bootstrap-table-next --save
+
+You first need to add bootstrap css in your application. After v1.0.0 , we start to suport bootstrap@4.
+
+Finish above step, then add the react-bootstrap-table2 styles:
+
+require ('react-bootstrap-table-next/dist/react-bootstrap-table2.min.css' );
+
+
+import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css' ;
+import BootstrapTable from 'react-bootstrap-table-next' ;
+
+const products = [ ... ];
+const columns = [{
+ dataField : 'id' ,
+ text : 'Product ID'
+}, {
+ dataField : 'name' ,
+ text : 'Product Name'
+}, {
+ dataField : 'price' ,
+ text : 'Product Price'
+}];
+
+export default () =>
+ <BootstrapTable keyField ='id' data ={ products } columns ={ columns } />
+
+The namespace of react-bootstrap-table-next is ReactBootstrapTable2
+The namespace of react-bootstrap-table2-editor is ReactBootstrapTable2Editor
+The namespace of react-bootstrap-table2-filter is ReactBootstrapTable2Filter
+The namespace of react-bootstrap-table2-paginator is ReactBootstrapTable2Paginator
+The namespace of react-bootstrap-table2-overlay is ReactBootstrapTable2Overlay
+The namespace of react-bootstrap-table2-toolkit is ReactBootstrapTable2Toolkit
+
+After install from npm, your can get UMD module from the dist.
+
+Downloadreact-bootstrap-table-next from here
+Download react-bootstrap-table2-editor from here
+Download react-bootstrap-table2-filter from here
+Download react-bootstrap-table2-paginator from here
+Download react-bootstrap-table2-overlay from here
+Download react-bootstrap-table2-toolkit from here
+
+Migration · react-bootstrap-table2
+Please see the CHANGELOG for react-bootstrap-table2 first drop.
+Feel free to see the official docs , we list all the basic usage here!!
+
+Currently, I still can't implement all the mainly features in legacy react-bootstrap-table , so please watch our github repo or blog to make sure the legacy features you wanted are already implemented on react-bootstrap-table2. Anyway, ask me by open issue is ok.
+react-bootstrap-table2 separate some functionalities from core modules to other modules like following:
+
+This can help your application with less bundled size and also help react-bootstrap-table2 have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
+There is a big change is that there's no TableHeaderColumn in the react-bootstrap-table2, instead you are supposed to be define the columns prop on BootstrapTable:
+import BootstrapTable from 'react-bootstrap-table-next' ;
+
+const columns = [{
+ dataField : 'id' ,
+ text : 'Product ID'
+}, {
+ dataField : 'name' ,
+ text : 'Product Name'
+}, {
+ dataField : 'price' ,
+ text : 'Product Price'
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } />
+The text property is just same as the children for the TableHeaderColumn, if you want to custom the header, there's a new property is: headerFormatter
+
+Please see Work with table sort .
+
+[v] Basic sorting
+[v] Custom sort function
+[v] Default Sort
+[v] Remote mode
+[v] Custom the sorting header
+[v] Sort event listener
+[v] Custom the sort caret
+[v] Sort management
+[ ] Multi sort
+
+Due to no TableHeaderColumn so that no dataSort here, please add sort
+Please see Work with selection .available selectRow configurations .
+No huge changes in row selection.
+Please see Work with column filter .available filter configuration .
+
+[v] Text Filter
+[v] Remote Filter
+[v] Custom Filter Component
+[ ] Regex Filter
+[v] Select Filter
+[v] Number Filter
+[v] Date Filter
+[v] Array Filter
+[v] Programmatically Filter
+
+Remember to install react-bootstrap-table2-filter
+Due to no TableHeaderColumn so that no filter here, please add filterfilterBootstrapTable.
+Please see Work with cell edit .available cell edit configurations .
+Remember to install react-bootstrap-table2-editor
+No big changes for cell editing, validator
+Please see Work with pagination .available pagination configurations .
+Remember to install react-bootstrap-table2-paginator
+In newest react-bootstrap-table2-paginator@2.0.0, we allow you to custom any part of pagination component more flexible.
+Please see Work with table search .Search configurations .
+The usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
+
+[v] Custom search component and position
+[v] Custom search value
+[v] Clear search
+[ ] Multiple search
+[ ] Strict search
+
+Please see Work with expandable row .Row expand configurations .
+
+[v] Expand Row Events
+[v] Expand Row Indicator
+[v] Expand Row Management
+[v] Custom Expand Row Indicators
+[v] Compatiable with Row Selection
+[v] Expand Column position
+[v] Expand Column Style/Class
+
+Please see Work with export to CSV .Export CSV configurations .
+Export CSV functionality is like search, which is one of functionality in the react-bootstrap-table2-toolkit. All of the legacy functions we already implemented.
+
+It's totally different in react-bootstrap-table2. Please see .
+
+Not support yet
+Not support yet
+Remote Loading/Overlay · react-bootstrap-table2 In react-bootstrap-table2, you will be easier to custom the loading or overlay on table no matter if remote enabled or not. In the following, we have two way to do it:
+noDataIndicationreact-bootstrap-table2 will call the noDataIndication prop and get the result to display on the table.
+Here noDataIndication.
+In the most of case for remote mode, you need the loading animation to tell the user the table is loading or doing some action in the background. Hence, you can lervarge overlay
+Here overlay
+Pagination Props · react-bootstrap-table2 Following we list all props for paginationFactory from react-bootstrap-table2-paginator
+import paginationFactory from 'react-bootstrap-table2-paginator' ;
+
+const pagination = paginationFactory({
+ page : 2 ,
+ ...
+});
+
+<BootstrapTable pagination ={ pagination } ... />
+NONE
+Default is false, you will enable it only when you need to implement a customization completely .
+Use pagination.page specify the current page when table render.
+
+It's necessary value when remote pagination is enabled.
+
+Use pagination.sizePerPage specify the current size per page when table render.
+
+It's necessary value when remote pagination is enabled.
+
+This props will be necessary value for below two cases:
+Because react-bootstrap-table2 will never know the totally data size actually. Remeber to assign totalSize when you enable the remote pagination.
+When you need to implement a customization completely . You have to give props.
+Default is 1 , which means the first page index is start from 1. If your first page want to start from 0 , you can control it via pageStartIndex.
+Default is 5 , which means the size of pagination.
+Default size per page have 10 , 25 , 30 , 50 . You can assign a number of array to replace this default list. However, sizePerPageList is flexible to let you decide the text display on the dropdown list:
+[ {
+ text : '5th' , value : 5
+}, {
+ text : '10th' , value : 10
+}, {
+ text : 'All' , value : data.length
+} ]
+Default is true, you can disable it if you don't want to show the "Go to first" and "Go to last" page buttons.
+Default is false, which means react-bootstrap-table2 will hide the next or previouse page button if unnecessary. Anyway, you can still show them always via alwaysShowAllBtns prop.withFirstAndLast, this prop also keep to show first and last page when you enable it.
+A quick way to specify the text on the first page button.
+A quick way to specify the text on the previous page button.
+A quick way to specify the text on the next page button.
+A quick way to specify the text on the last page button.
+A quick way to specify the title on the first page button.
+A quick way to specify the title on the previous page button.
+A quick way to specify the title on the next page button.
+A quick way to specify the title on the last page button.
+You can hide the size per page dropdown.
+You can hide the pagination when there's only one page in table. Default is false.
+Default is false, if enable will display a text to indicate the row range of current page.
+Default is false, if enable will remove the title attribute from each page button.
+Custom the page button inside the pagination list. This callback function have one argument which is an object and contain following props:
+
+page: Page numberactive: If this page is current page or not.disabled: If this page is disabled or not.title: Page titleonPageChange: Call it when you need to change page
+Following is a minimal example:
+const pageButtonRenderer = ({
+ page,
+ active,
+ disabled,
+ title,
+ onPageChange
+}) => {
+ const handleClick = (e ) => {
+ e.preventDefault();
+ onPageChange(page);
+ };
+
+ return (
+ <li className ="page-item" >
+ <a href ="#" onClick ={ handleClick } .... > { page }</a >
+ </li > const options = {
+ pageButtonRenderer
+};
+
+<BootstrapTable keyField ="id" data ={ products } columns ={ columns } pagination ={ paginationFactory (options ) } />
+Custom the pagination list component, this callback function have one argument which is an object and contain following props:
+
+pages: Current pageonPageChange: Call it when you need to change page
+Below is a minimal example:
+const pageListRenderer = ({
+ pages,
+ onPageChange
+}) => {
+
+ const pageWithoutIndication = pages.filter(p =>typeof p.page !== 'string' );
+ return (
+ <div >
+ {
+ pageWithoutIndication.map(p => (
+ <button className ="btn btn-success" onClick ={ () => onPageChange(p.page) }>{ p.page }</button >
+ ))
+ }
+ </div > const options = {
+ pageListRenderer
+};
+
+<BootstrapTable keyField ="id" data ={ products } columns ={ columns } pagination ={ paginationFactory (options ) } />
+Custom the size per page dropdown component, this callback function have one argument which is an object and contain following props:
+
+options: Dropdown option.currSizePerPage: Current size per page.onSizePerPageChange: Call it when you need to change size per page.
+Below is a minimal example:
+const sizePerPageRenderer = ({
+ options,
+ currSizePerPage,
+ onSizePerPageChange
+}) => (
+ <div className ="btn-group" role ="group" >
+ {
+ options.map(option => (
+ <button
+ key ={ option.text }
+ type ="button"
+ onClick ={ () => onSizePerPageChange(option.page) }
+ className={ `btn ${currSizePerPage === `${option.page}` ? 'btn-secondary' : 'btn-warning'}` }
+ >
+ { option.text }
+ </button >
+ ))
+ }
+ </div > const options = {
+ sizePerPageRenderer
+};
+
+<BootstrapTable keyField ="id" data ={ products } columns ={ columns } pagination ={ paginationFactory (options ) } />
+Custom the option of size per page dropdown component, this callback function have one argument which is an object and contain following props:
+
+text: The text of option.page: The size per page of option.onSizePerPageChange: Call it when you need to change size per page.
+Below is a minimal example:
+const sizePerPageOptionRenderer = ({
+ text,
+ page,
+ onSizePerPageChange
+}) => (
+ <li
+ key ={ text }
+ role ="presentation"
+ className ="dropdown-item"
+ >
+ <a
+ href ="#"
+ tabIndex ="-1"
+ role ="menuitem"
+ data-page ={ page }
+ onMouseDown ={ (e ) => {
+ e.preventDefault();
+ onSizePerPageChange(page);
+ } }
+ style={ { color: 'red' } }
+ >
+ { text }
+ </a >
+ </li > const options = {
+ sizePerPageOptionRenderer
+};
+
+<BootstrapTable keyField ="id" data ={ products } columns ={ columns } pagination ={ paginationFactory (options ) } />
+Custom the total information, this callbacok function have three arguments: from, to and size. Following is an example:
+const customTotal = (from , to, size (
+ <span className ="react-bootstrap-table-pagination-total" >
+ Showing { from } to { to } of { size } Results
+ </span > Accept a callback function and will be called when page changed. This callback function get below arguments:
+Arguments
+
+Accept a callback function and will be called when size per page changed. This callback function get below arguments:
+Arguments
+
+Row Expand Props · react-bootstrap-table2 react-bootstrap-table2 supports the row expand feature. By passing prop expandRow to enable this functionality.
+
+Default is click to expand/collapse a row. In addition, we don't support any way to chagne this mechanism!
+
+Specify the content of expand row, react-bootstrap-table2 will pass the two arguments and expect to return a react element:
+
+row: Currnet row data.rowIndex: Currnet row index.
+const expandRow = {
+ renderer : (row, rowIndex ) => (
+ <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 > <BootstrapTable
+ keyField ='id'
+ data ={ products }
+ columns ={ columns }
+ expandRow ={ expandRow }
+/>
+expandRow.expanded is useful to manage the row expand on table, for example: you can use it to perform the default expands.
+const expandRow = {
+ renderer : (row ) => ...
+ expanded: [1 , 3 ]
+};
+This prop allow you to restrict some rows which can not be expanded by user. expandRow.nonExpandable accept an rowkeys array.
+const expandRow = {
+ renderer : (row ) => ...
+ nonExpandable: [1 , 3 ,5 ]
+};
+This prop accept a callback function which will be called when a row is expand/collapse and pass following four arguments:
+row, isExpand, rowIndex and e.
+const expandRow = {
+ renderer : (row ) => ...
+ onExpand: (row, isExpand, rowIndex, e ) => {
+
+ }
+};
+This prop accept a callback function which will be called when expand/collapse all. It only work when you configure expandRow.showExpandColumntrue.
+const expandRow = {
+ renderer : (row ) => ...,
+ showExpandColumn : true ,
+ onExpandAll : (isExpandAll, results, e ) => {
+
+ }
+};
+Default is false, if you want to have a expand indicator, give this prop as true.
+const expandRow = {
+ renderer : (row ) => ...
+ showExpandColumn: true
+};
+Default is false. Enable this will only allow one row get expand at the same time.
+const expandRow = {
+ renderer : (row ) => ...
+ onlyOneExpanding: true
+};
+Default is false. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it.
+const expandRow = {
+ renderer : (row ) => ...,
+ showExpandColumn : true ,
+ expandByColumnOnly : true
+};
+Default is left. You can give this as right for rendering expand column in the right side.
+const expandRow = {
+ renderer: (row) => ...,
+ showExpandColumn: true,
+ expandColumnPosition: 'right'
+};
+
+## expandRow.expandByColumnOnly - [Bool]
+Default is `false`. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it.
+
+```js
+const expandRow = {
+ renderer: (row) => ...,
+ showExpandColumn: true,
+ expandByColumnOnly: true
+};
+Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain these properties:
+
+expanded: If current row is expanded or notrowKey: Current row keyexpandable: If currnet row is expandable or not
+const expandRow = {
+ renderer : (row ) => ...
+ expandColumnRenderer: ({ expanded, rowKey, expandable } ) => (
+
+ )
+};
+Provide a callback function which allow you to custom the expand indicator in the expand header column. This callback only have one argument which is an object and contain one property isAnyExpands to indicate if there are any expanded rows:
+const expandRow = {
+ renderer : (row ) => ...,
+ showExpandColumn : true ,
+ expandHeaderColumnRenderer : ({ isAnyExpands } ) => (
+
+ )
+};
+Apply the custom class name on the expanding row. For example:
+const expandRow = {
+ renderer : (row ) => ...,
+ className : 'foo'
+};
+Following case is more flexible way to custom the class name:
+const expandRow = {
+ renderer : (row ) => ...,
+ className : (isExpanded, row, rowIndex ) => {
+ if (rowIndex > 2 ) return 'foo' ;
+ return 'bar' ;
+ }
+};
+Apply the custom class name on parent row of expanded row. For example:
+const expandRow = {
+ renderer : (row ) => ...,
+ parentClassName : 'foo'
+};
+Below case is more flexible way to custom the class name:
+const expandRow = {
+ renderer : (row ) => ...,
+ parentClassName : (isExpanded, row, rowIndex ) => {
+ if (rowIndex > 2 ) return 'foo' ;
+ return 'bar' ;
+ }
+};
+Row Selection Props · react-bootstrap-table2 Following we list all props for selectRow props
+const selectRow = {
+ mode : 'checkbox' ,
+ ...
+});
+
+<BootstrapTable selectRow ={ selectRow } ... />
+Specifying the selection way for single(radio) or multiple(checkbox). If radio was assigned, there will be a radio button in the selection column; otherwise, the checkbox instead.
+Following is a quick example for single selection:
+const selectRow = {
+ mode : 'radio'
+};
+
+<BootstrapTable
+ keyField ='id'
+ data ={ products }
+ columns ={ columns }
+ selectRow ={ selectRowProp }
+/>
+selectRow.selected allow you have default selections on table.
+const selectRow = {
+ mode : 'checkbox' ,
+ selected : [1 , 3 ]
+};
+selectRow.style allow you to have custom style on selected rows:
+const selectRow = {
+ mode : 'checkbox' ,
+ style : { background : 'red' }
+};
+If you wanna more flexible customization, selectRow.style also accept a function:
+const selectRow = {
+ mode : 'checkbox' ,
+ style : (row, rowIndex ) => { return ...; }
+};
+selectRow.classes allow you to add css class on selected rows:
+const selectRow = {
+ mode : 'checkbox' ,
+ classes : 'custom-class'
+};
+If you wanna more flexible customization, selectRow.classes also accept a function:
+const selectRow = {
+ mode : 'checkbox' ,
+ classes : (row, rowIndex ) => { return ...; }
+};
+A quick way to specify the background color when row is selected
+const selectRow = {
+ mode : 'checkbox' ,
+ bgColor : 'red'
+};
+There's also a more good way to custom it:
+const selectRow = {
+ mode : 'checkbox' ,
+ bgColor : (row, rowIndex ) => {
+ return ....;
+ }
+};
+This prop allow you to restrict some rows which can not be selected by user. selectRow.nonSelectable accept an rowkeys array.
+const selectRow = {
+ mode : 'checkbox' ,
+ nonSelectable : [1 , 3 ,5 ]
+};
+This prop allow you to customize the non selectable rows. selectRow.nonSelectableStyle accepts an style object
+and a callback function for more flexible customization.
+const selectRow = {
+ mode : 'checkbox' ,
+ nonSelectable : [1 , 3 ,5 ],
+ nonSelectableStyle : { backgroundColor : 'gray' }
+};
+const selectRow = {
+ mode : 'checkbox' ,
+ nonSelectable : [1 , 3 ,5 ],
+ nonSelectableStyle : (row, rowIndex ) => { return ...; }
+};
+This prop allow you to set a custom class for the non selectable rows, or use a callback function for more
+flexible customization
+const selectRow = {
+ mode : 'checkbox' ,
+ nonSelectable : [1 , 3 ,5 ],
+ nonSelectableClasses : 'my-class'
+};
+const selectRow = {
+ mode : 'checkbox' ,
+ nonSelectable : [1 , 3 ,5 ],
+ nonSelectableClasses : (row, rowIndex ) => { return ...; }
+};
+Allow user to select row by clicking on the row.
+const selectRow = {
+ mode : 'checkbox' ,
+ clickToSelect : true
+};
+
+Note: When you also enable cellEdit , the selectRow.clickToSelect will deactivate the functionality of cell editing. If you want to click on row to select row and edit cell simultaneously, you are suppose to enable selectRow.clickToEdit
+
+Default is false, enable it will let user able to expand and select row when user clicking on the row.
+const selectRow = {
+ mode : 'checkbox' ,
+ clickToExpand : true
+};
+Able to click to edit cell and select row at the same time.
+const selectRow = {
+ mode : 'checkbox' ,
+ clickToSelect : true
+ clickToEdit: true
+};
+This callback function will be called when a row is select/unselect and pass following four arguments:
+row, isSelect, rowIndex and e.
+const selectRow = {
+ mode : 'checkbox' ,
+ onSelect : (row, isSelect, rowIndex, e ) => {
+
+ }
+};
+
+If you want to reject current select action, just return false:
+
+const selectRow = {
+ mode : 'checkbox' ,
+ onSelect : (row, isSelect, rowIndex, e ) => {
+ if (SOME_CONDITION) {
+ return false ;
+ }
+ }
+};
+This callback function will be called when select/unselect all and it only work when you configure selectRow.modecheckbox.
+const selectRow = {
+ mode : 'checkbox' ,
+ onSelectAll : (isSelect, rows, e ) => {
+
+ }
+};
+
+If you want to control the final selection result, just return a row key array:
+
+const selectRow = {
+ mode : 'checkbox' ,
+ onSelectAll : (isSelect, rows, e ) => {
+ if (isSelect && SOME_CONDITION) {
+ return [1 , 3 , 4 ];
+ }
+ }
+};
+Default is left. You can give this as right for rendering selection column in the right side.
+const selectRow = {
+ mode : 'checkbox' ,
+ selectColumnPosition : 'right'
+};
+Default is false, if you don't want to have a selection column, give this prop as true
+const selectRow = {
+ mode : 'radio' ,
+ hideSelectColumn : true ,
+ clickToSelect : true ,
+ bgColor : 'red'
+};
+Default is false, if you don't want to render the select all checkbox ine the header of selection column, give this prop as true!
+const selectRow = {
+ mode : 'checkbox' ,
+ hideSelectAll : true
+};
+Provide a callback function which allow you to custom the checkbox/radio box. This callback only have one argument which is an object and contain following properties:
+const selectRow = {
+ mode : 'checkbox' ,
+ selectionRenderer : ({ mode, checked, disabled } ) => (
+
+ )
+};
+Provide a callback function which allow you to custom the checkbox/radio box in the selection header column. This callback only have one argument which is an object and contain following properties:
+const selectRow = {
+ mode : 'checkbox' ,
+ selectionHeaderRenderer : ({ mode, checked, indeterminate } ) => (
+
+ )
+};
+A way to custome the selection header cell. headerColumnStyle not only accept a simple style object but also a callback function for more flexible customization:
+const selectRow = {
+ mode : 'checkbox' ,
+ headerColumnStyle : { backgroundColor : 'blue' }
+};
+const selectRow = {
+ mode : 'checkbox' ,
+ headerColumnStyle : (status ) => (
+
+ return { backgroundColor : 'blue' };
+ )
+};
+A way to custome the selection cell. selectColumnStyle not only accept a simple style object but also a callback function for more flexible customization:
+const selectRow = {
+ mode : 'checkbox' ,
+ selectColumnStyle : { backgroundColor : 'blue' }
+};
+If a callback function present, you can get below information to custom the selection cell:
+
+checked: Whether current row is seleccted or notdisabled: Whether current row is disabled or notrowIndex: Current row indexrowKey: Current row key
+const selectRow = {
+ mode : 'checkbox' ,
+ selectColumnStyle : ({
+ checked,
+ disabled,
+ rowIndex,
+ rowKey
+ }) => (
+
+ return { backgroundColor : 'blue' };
+ )
+};
+selectRow.mode - [String]
-
-Specifying the selection way for `single(radio)` or `multiple(checkbox)`. If `radio` was assigned, there will be a radio button in the selection column; otherwise, the `checkbox` instead.
-
-#### values
-* `radio`
-* `checkbox`
-
-#### examples
-
-```js
-const selectRow = {
- mode: 'radio' // single row selection
-};
-selectRow.style - [Object | Function]
-`selectRow.style` allow you to have custom style on selected rows:
-
-```js
-const selectRow = {
- mode: 'checkbox',
- style: { background: 'red' }
-};
-```
-
-If you wanna more flexible customization, `selectRow.style` also accept a function:
-
-```js
-const selectRow = {
- mode: 'checkbox',
- style: (row, rowIndex) => { return ...; }
-};
-```
-
-## selectRow.classes - [String | Function]
-`selectRow.classes` allow you to add css class on selected rows:
-
-```js
-const selectRow = {
- mode: 'checkbox',
- classes: 'custom-class'
-};
-```
-
-If you wanna more flexible customization, `selectRow.classes` also accept a function:
-
-```js
-const selectRow = {
- mode: 'checkbox',
- classes: (row, rowIndex) => { return ...; }
-};
-```
-
-## selectRow.bgColor - [String | Function]
-The backgroud color when row is selected
-
-```js
-const selectRow = {
- mode: 'checkbox',
- bgColor: 'red'
-};
-```
-
-There's also a more good way to custom it:
-
-```js
-const selectRow = {
- mode: 'checkbox',
- bgColor: (row, rowIndex) => {
- return ....; // return a color code
- }
-};
-```
-
-## selectRow.nonSelectable - [Array]
-This prop allow you to restrict some rows which can not be selected by user. `selectRow.nonSelectable` accept an rowkeys array.
-
-```js
-const selectRow = {
- mode: 'checkbox',
- nonSelectable: [1, 3 ,5]
-};
-```
-
-## selectRow.clickToSelect - [Bool]
-Able to select row when clicking on row.
-
-```js
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true
-};
-```
-
-> Note: if you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
-> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
-
-## selectRow.clickToEdit - [Bool]
-Able to click to edit cell and select row
-
-```js
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true
- clickToEdit: true
-};
-```
-
-## selectRow.onSelect - [Function]
-This callback function will be called when a row is select/unselect and pass following three arguments:
-`row`, `isSelect` and `rowIndex`.
-
-```js
-const selectRow = {
- mode: 'checkbox',
- onSelect: (row, isSelect, rowIndex) => {
- // ...
- }
-};
-```
-
-## selectRow.onSelectAll - [Function]
-This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
-
-```js
-const selectRow = {
- mode: 'checkbox',
- onSelectAll: (isSelect, results) => {
- // ...
- }
-};
-```
-
-## selectRow.hideSelectColumn - [Bool]
-Default is `false`, if you don't want to have a selection column, give this prop as `true`
-
-```js
-const selectRow = {
- mode: 'radio',
- hideSelectColumn: true,
- clickToSelect: true,
- bgColor: 'red'
-};
-```
diff --git a/docs/search-props.html b/docs/search-props.html
new file mode 100644
index 000000000..59c1487c9
--- /dev/null
+++ b/docs/search-props.html
@@ -0,0 +1,81 @@
+Search Props · react-bootstrap-table2 Table search in one of features supported by react-bootstrap-table2-toolkit. By passing search prop to ToolkitProvider for enabling this functionality.
+N/A
+If you want to search on the formatted data, you are supposed to enable this prop. react-bootstrap-table2 will check if you define the column.formatter when doing search.
+<ToolkitProvider
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ search={ {
+ searchFormatted: true
+ } }
+>
+ // ...
+</ToolkitProvider>
+Accept a string that will be used for default searching when first time table render.
+<ToolkitProvider
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ search={ {
+ defaultSearch: 'search something here'
+ } }
+>
+ // ...
+</ToolkitProvider>
+Acccpt a function which will be called when table try to match every cells when search happening. This function accept an object like below example:
+function onColumnMatch({
+ searchText,
+ value,
+ column,
+ row
+}) {
+ // implement your custom match logic on every cell value
+}
+ <ToolkitProvider
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ search={ {
+ onColumnMatch
+ } }
+>
+ // ...
+</ToolkitProvider>
+
+Notes: You have to return true when your match logic is positive and vice versa.
+
+After search done, this callback function will be called with newest result.
+<ToolkitProvider
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ search={ {
+ afterSearch: (newResult) => console.log(newResult)
+ } }
+>
+ // ...
+</ToolkitProvider>
+BootstrapTable Props · react-bootstrap-table2 required ) - [String]Tells react-bootstrap-table2 which column of the data is unique. This should be the name of a property that is unique for each item in your dataset
+required ) - [Array]Provides data for your table. It accepts a single Array object.
+Each item in this array is an object that represents a row in the table. Each "Row" object should have a key-value pair for each column in the table, whose key matches that column's dataField value.
+For example, if your column definitions look like:
+columns = [
+ { dataField : 'id' , text : 'Id' },
+ { dataField : 'name' , text : 'Name' },
+ { dataField : 'animal' , text : 'Animal' },
+]
+Then your data might look like:
+data = [
+ { id : 1 , name : 'George' , animal : 'Monkey' }
+ { id : 2 , name : 'Jeffrey' , animal : 'Giraffe' }
+ { id : 3 , name : 'Alice' , animal : 'Giraffe' }
+ { id : 4 , name : 'Alice' , animal : 'Tiger' }
+]
+And your "keyField" would be id
+required ) - [Object]Accepts a single Array object, please see columns definition for more detail.
+Default is false, if enable remote, you are supposed to be handle all the table change events, like: pagination, insert, filtering etc.
+This is a chance that you can connect to your remote server or database to manipulate your data.
+remote={ {
+ filter : true ,
+ pagination : false ,
+ sort : false ,
+ cellEdit : false
+} }
+In above case, only column filter will be handled on remote because we enable it by giving true.
+
+Note: when remote is enable, you are suppose to give onTableChangeBootstrapTable
+It's the only way to communicate to your remote server and update table states.
+
+A special case for remote pagination:
+remote={ { pagination : true , filter : false , sort : false } }
+There is a special case for remote pagination, even you only specified the pagination need to handle as remote, react-bootstrap-table2 will handle all the table changes(filter, sort etc) as remote mode, because react-bootstrap-table2 only know the data of current page, but filtering, searching or sort need to work on overall data.
+true to indicate your bootstrap version is 4. Default version is 3.
+noDataIndication should be a callback function which return anything that will be showed in the table when data is empty .
+Telling if table is loading or not, for example: waiting data loading, filtering etc. It's only valid when remoteloading is true, react-bootstrap-table2 will attend to render a overlay on table via overlayoverlayreact-bootstrap-table2 will ignore the overlay rendering.
+overlay accept a factory function which should returning a higher order component. By default, react-bootstrap-table2-overlay can be a good option for you:
+$ npm install react-bootstrap-table2-overlay
+import overlayFactory from 'react-bootstrap-table2-overlay' ;
+
+<BootstrapTable
+ data ={ data }
+ columns ={ columns }
+ loading ={ true } //only loading is true , react-bootstrap-table will render overlay
+ overlay ={ overlayFactory () }
+/>
+Actually, react-bootstrap-table2-overlay is depends on react-loading-overlayoverlayFactory just a factory function and you can pass any props which available for react-loading-overlay:
+overlay={ overlayFactory({ spinner : true , background : 'rgba(192,192,192,0.3)' }) }
+Same as HTML caption tag , you can set it as String or a React JSX.
+Same as bootstrap .table-striped class for adding zebra-stripes to a table.
+Same as bootstrap .table-bordered class for adding borders to a table and table cells.
+Same as bootstrap .table-hover class for adding mouse hover effect (grey background color) on table rows.
+Same as bootstrap .table-condensed class for making a table more compact by cutting cell padding in half.
+Customize id on table element.
+Enable the tabIndex attribute on <td> element.
+Customize class on table element.
+Customize class on the outer element which wrap up the table element.
+Customize class on the header row(tr).
+Customize class on thead.
+Customize class on tbody.
+Makes table cells editable, please see cellEdit definition for more detail.
+Makes table rows selectable, please see selectRow definition for more detail.
+Custom the style of table rows:
+<BootstrapTable data={ data } columns={ columns } rowStyle={ { backgroundColor : 'red' } } />
+This prop also accept a callback function for flexible to custom row style:
+const rowStyle = (row, rowIndex ) => {
+ return { ... };
+};
+
+<BootstrapTable data ={ data } columns ={ columns } rowStyle ={ rowStyle } />
+Custom the style of table rows:
+<BootstrapTable data={ data } columns={ columns } rowClasses="custom-row-class" />
+This prop also accept a callback function for flexible to custom row style:
+const rowClasses = (row, rowIndex ) => {
+ return 'custom-row-class' ;
+};
+
+<BootstrapTable data ={ data } columns ={ columns } rowClasses ={ rowClasses } />
+Custom the events on row:
+const rowEvents = {
+ onClick : (e, row, rowIndex ) => {
+ ....
+ }
+};
+<BootstrapTable data ={ data } columns ={ columns } rowEvents ={ rowEvents } />
+Hide rows, this props accept an array of row keys:
+const hiddenRows = [1 , 4 ];
+<BootstrapTable data ={ data } columns ={ columns } hiddenRows ={ hiddenRows } />
+Two cases you probably need to configure sort prop:
+You can give dataField and order to specify the sorting state in table, For example
+<BootstrapTable sort={ { dataField : 'price' , order : 'asc' } }>
+In earily version, we only can configure sortCaretsortFunc
+<BootstrapTable sort={ {
+ sortCaret : ...
+ sortFunc: ...
+} }>
+defaultSorted accept an object array which allow you to define the default sort columns when first render.
+const defaultSorted = [{
+ dataField : 'name' ,
+ order: 'desc'
+}];
+Default sort direction when user click on header column at first time, available value is asc and desc. Default is desc.
+pagination allow user to render a pagination panel on the bottom of table. But pagination functionality is separated from core of react-bootstrap-table2 so that you are suppose to install react-bootstrap-table2-paginator additionally.
+$ npm install react-bootstrap-table2-paginator --save
+After installation of react-bootstrap-table2-paginator, you can enable pagination on react-bootstrap-table2 easily:
+import paginationFactory from 'react-bootstrap-table2-paginator' ;
+
+
+
+<BootstrapTable data={ data } columns={ columns } pagination={ paginationFactory() } />
+paginationFactory is a function actually and allow to pass some pagination options, following we list all the available options:
+paginationFactory({
+ page,
+ sizePerPage,
+ totalSize,
+ pageStartIndex: 0 ,
+ paginationSize: 3 ,
+ showTotal: true ,
+ sizePerPageList: [ {
+ text : '5' , value : 5
+ }, {
+ text : '10' , value : 10
+ }, {
+ text : 'All' , value : products.length
+ } ],
+ withFirstAndLast: false ,
+ alwaysShowAllBtns: true ,
+ firstPageText: 'First' ,
+ prePageText: 'Prev' ,
+ nextPageText: 'Next' ,
+ lastPageText: 'Last' ,
+ nextPageTitle: 'Go to next' ,
+ prePageTitle: 'Go to previous' ,
+ firstPageTitle: 'Go to first' ,
+ lastPageTitle: 'Go to last' ,
+ hideSizePerPage: true ,
+ hidePageListOnlyOnePage: true ,
+ onPageChange: (page, sizePerPage ) => {},
+ onSizePerPageChange: (sizePerPage, page ) => {},
+ paginationTotalRenderer: (from , to, size { ... }
+})
+filter allows users to filter data by columns. For more information, please navigate to filter-props .
+Getting Started
+$ npm install react-bootstrap-table2-filter
+After installing react-bootstrap-table2-filter, you could easily enable the functionality of filter.
+Example
+import BootstrapTable from 'react-bootstrap-table-next' ;
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter' ;
+
+const columns = [{
+ dataField : 'id' ,
+ text : 'Product ID'
+}, {
+ dataField : 'name' ,
+ text : 'Product Name'
+}, {
+ dataField : 'price' ,
+ text : 'Product Price' ,
+ filter : textFilter()
+}];
+
+<BootstrapTable keyField ='id' data ={ products } columns ={ columns } filter ={ filterFactory () } />
+Available value is inline, top and bottom, default is inline. This prop decide where react-bootstrap-table render column filter.
+This callback function will be called when remote
+const onTableChange = (type, newState ) => {
+
+}
+<BootstrapTable data={ data } columns={ columns } onTableChange={ onTableChange } />
+There's only two arguments will be passed to onTableChange: type and newState:
+type is tell you what kind of functionality to trigger this table's change: available values at the below:
+
+filterpaginationsortcellEdit
+Following is a all available properties in newState object:
+{
+ page,
+ sizePerPage,
+ sortField,
+ sortOrder,
+ filters,
+ data,
+ cellEdit: {
+ rowId,
+ dataField,
+ newValue
+ }
+}
+This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
+
+dataSize: The new data size
+handleDataChange = ({ dataSize } ) => {
+ this .setState({ rowCount : dataSize });
+}
+
+<BootstrapTable
+ onDataSizeChange={ handleDataChange }
+ ....
+/>
+Getting Started · react-bootstrap-table2 react-bootstrap-table2 support following features in react-bootstrap-table2-toolkit package:
+
+Export CSV
+Table Search
+Column Toggle
+
+$ npm install react-bootstrap-table2-toolkit --save
+
+require ('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css' );
+
+
+import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css' ;
+react-bootstrap-table2-toolkit default give you a react context wrapper: ToolkitProvider. When you use any toolkit functionalities, you are supposed to render toolkit component and BootstrapTable as the children of ToolkitProvider:
+import ToolkitProvider from 'react-bootstrap-table2-toolkit' ;
+
+
+<ToolkitProvider
+ keyField ="id"
+ data ={ products }
+ columns ={ columns }
+>
+ {
+ props =>
+ <BootstrapTable { ...props.baseProps } />
+ }
+</ToolkitProvider >
+In addition, You have to move following required props from BootstraTable to ToolkitProvider and inject them to BootstrapTable from the baseProps provided by ToolkitProvider:
+
+
+search : For enabling search.exportCSV : For enabling export CSV.columnToggle : For enabling column toggle.
+ToolkitProvider will pass following props to the childrens:
+
+baseProps: It have the basic props from ToolkitProvider and also contain few internal data.searchProps: props for search component.csvProps: props for export csv component.columnToggleProps: props for column toggle component.
+document number 2 · react-bootstrap-table2 react-bootstrap-table2 · Next Generation of react-bootstrap-table This project is maintained by a dedicated group of people
react-bootstrap-table2 · Next Generation of react-bootstrap-table react-bootstrap-table2Next Generation of react-bootstrap-table Sortable, Row Selection, Cell Editor, Row Expand, Column Filter Pagination etc.
+Configurable and customizable table
+Satisfy for Redux/Mobx or any other state management tool.
+Intuitive to use.
+react-bootstrap-table2 · Next Generation of react-bootstrap-table Who's Using This? This project is used by many folks
Are you using this project?
Add your company react-bootstrap-table2 · Next Generation of react-bootstrap-table This project is maintained by a dedicated group of people
+
diff --git a/img/icon/store.svg b/img/icon/store.svg
new file mode 100644
index 000000000..cecd62e71
--- /dev/null
+++ b/img/icon/store.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/img/icon/tool.svg b/img/icon/tool.svg
new file mode 100644
index 000000000..1ee229783
--- /dev/null
+++ b/img/icon/tool.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/img/language.svg b/img/language.svg
new file mode 100644
index 000000000..66195932a
--- /dev/null
+++ b/img/language.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/img/logo/hybrid-white-large.svg b/img/logo/hybrid-white-large.svg
new file mode 100644
index 000000000..e63f010b1
--- /dev/null
+++ b/img/logo/hybrid-white-large.svg
@@ -0,0 +1 @@
+logo color logo square react-bootstrap-table2 · Next Generation of react-bootstrap-table react-bootstrap-table2Next Generation of react-bootstrap-table Sortable, Row Selection, Cell Editor, Row Expand, Column Filter Pagination etc.
+Configurable and customizable table
+Satisfy for Redux/Mobx or any other state management tool.
+Intuitive to use.
+/packages"
- ],
- "setupFiles": [
- "/enzyme-setup.js"
- ],
- "modulePaths": [
- "/packages/react-bootstrap-table2"
- ],
- "testEnvironment": "node",
- "testMatch": [
- "**/test/**/*.test.js"
- ]
- }
-}
diff --git a/packages/react-bootstrap-table2-example/.storybook/addons.js b/packages/react-bootstrap-table2-example/.storybook/addons.js
deleted file mode 100644
index afebf4721..000000000
--- a/packages/react-bootstrap-table2-example/.storybook/addons.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-console';
diff --git a/packages/react-bootstrap-table2-example/.storybook/config.js b/packages/react-bootstrap-table2-example/.storybook/config.js
deleted file mode 100644
index f50d2461d..000000000
--- a/packages/react-bootstrap-table2-example/.storybook/config.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-import React from 'react';
-import { configure, addDecorator } from '@storybook/react';
-import { withConsole } from '@storybook/addon-console';
-
-function loadStories() {
- require('stories');
-}
-
-const styles = {
- margin: '15px',
-};
-
-const componentDecorator = (story) => (
-
- { story() }
-
-);
-
-
-// prepend the story name to log messages
-addDecorator((storyFn, context) => withConsole()(storyFn)(context));
-
-addDecorator(componentDecorator);
-
-configure(loadStories, module);
diff --git a/packages/react-bootstrap-table2-example/.storybook/preview-head.html b/packages/react-bootstrap-table2-example/.storybook/preview-head.html
deleted file mode 100644
index edb92313b..000000000
--- a/packages/react-bootstrap-table2-example/.storybook/preview-head.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
deleted file mode 100644
index 25f09d8fe..000000000
--- a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const path = require('path');
-
-const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
-const paginationSourcePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/src');
-const overlaySourcePath = path.join(__dirname, '../../react-bootstrap-table2-overlay/src');
-const filterSourcePath = path.join(__dirname, '../../react-bootstrap-table2-filter/src');
-const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
-const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
-const storyPath = path.join(__dirname, '../stories');
-const examplesPath = path.join(__dirname, '../examples');
-const srcPath = path.join(__dirname, '../src');
-const aliasPath = {
- examples: examplesPath,
- stories: storyPath,
- src: srcPath,
- components: path.join(srcPath, 'components'),
- utils: path.join(srcPath, 'utils'),
-};
-
-const loaders = [{
- enforce: 'pre',
- test: /\.js?$/,
- exclude: /node_modules/,
- include: [examplesPath, storyPath],
- loader: 'eslint-loader',
-}, {
- test: /\.js?$/,
- use: ['babel-loader'],
- exclude: /node_modules/,
- include: [sourcePath, paginationSourcePath, overlaySourcePath, filterSourcePath, storyPath],
-}, {
- test: /\.css$/,
- use: ['style-loader', 'css-loader'],
-}, {
- test: /\.scss$/,
- use: ['style-loader', 'css-loader', 'sass-loader'],
- include: [storyPath, sourceStylePath, paginationStylePath],
-}, {
- test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
- loader: 'url-loader?limit=100000',
-}];
-
-// Export a function. Accept the base config as the only param.
-module.exports = (storybookBaseConfig, configType) => {
- // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
- // You can change the configuration based on that.
- // 'PRODUCTION' is used when building the static version of storybook.
-
- // loaders
- loaders.forEach(value => {
- storybookBaseConfig.module.rules.push(value);
- })
-
- // alias
- storybookBaseConfig.resolve.alias = aliasPath;
-
- // Return the altered config
- return storybookBaseConfig;
-};
diff --git a/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js b/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
deleted file mode 100644
index 5c424e891..000000000
--- a/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/basic/caption-table.js b/packages/react-bootstrap-table2-example/examples/basic/caption-table.js
deleted file mode 100644
index 7f84142c8..000000000
--- a/packages/react-bootstrap-table2-example/examples/basic/caption-table.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const CaptionElement = () => Component as Header ;
-
-Component as Header ;
-
-export default () => (
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/basic/index.js b/packages/react-bootstrap-table2-example/examples/basic/index.js
deleted file mode 100644
index 91a658801..000000000
--- a/packages/react-bootstrap-table2-example/examples/basic/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
deleted file mode 100644
index 44d8662f6..000000000
--- a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js b/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
deleted file mode 100644
index 97b4879fc..000000000
--- a/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js
deleted file mode 100644
index db6818c18..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const cellEdit = {
- mode: 'click',
- blurToSave: true
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js
deleted file mode 100644
index 34867004f..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- editCellClasses: 'editing-name'
-}, {
- dataField: 'price',
- text: 'Product Price',
- editCellClasses: (cell, row, rowIndex, colIndex) =>
- (cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- editCellClasses: 'editing-name'
-}, {
- dataField: 'price',
- text: 'Product Price',
- editCellClasses: (cell, row, rowIndex, colIndex) =>
- (cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
-}];
-
-const cellEdit = {
- mode: 'click'
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js
deleted file mode 100644
index 24779fc9e..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint no-console: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const cellEdit = {
- mode: 'click',
- beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
- afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js
deleted file mode 100644
index 2101bd33f..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- editCellStyle: {
- backgroundColor: '#20B2AA'
- }
-}, {
- dataField: 'price',
- text: 'Product Price',
- editCellStyle: (cell, row, rowIndex, colIndex) => {
- const backgroundColor = cell > 2101 ? '#00BFFF' : '#00FFFF';
- return { backgroundColor };
- }
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- editCellStyle: {
- backgroundColor: '#20B2AA'
- }
-}, {
- dataField: 'price',
- text: 'Product Price',
- editCellStyle: (cell, row, rowIndex, colIndex) => {
- const backgroundColor = cell > 2101 ? '#00BFFF' : '#00FFFF';
- return { backgroundColor };
- }
-}];
-
-const cellEdit = {
- mode: 'click'
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js
deleted file mode 100644
index 6b31c5d5b..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-/* eslint no-unused-vars: 0 */
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price',
- validator: (newValue, row, column) => {
- if (isNaN(newValue)) {
- return {
- valid: false,
- message: 'Price should be numeric'
- };
- }
- if (newValue < 2000) {
- return {
- valid: false,
- message: 'Price should bigger than 2000'
- };
- }
- return true;
- }
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price',
- validator: (newValue, row, column) => {
- if (isNaN(newValue)) {
- return {
- valid: false,
- message: 'Price should be numeric'
- };
- }
- if (newValue < 2000) {
- return {
- valid: false,
- message: 'Price should bigger than 2000'
- };
- }
- return true;
- }
-}];
-
-const cellEdit = {
- mode: 'click',
- blurToSave: true
-};
-
-
-
Product Price should bigger than $2000
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-promise-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-promise-table.js
deleted file mode 100644
index c66e3bd97..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-promise-table.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint arrow-body-style: 0 */
-import React, { Component } from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator, sleep } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-class CellEditWithPromise extends Component {
- handleCellEditing = (rowId, dataField, newValue) => {
- return sleep(1000).then(() => {
- if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
- throw new Error('Product Price should bigger than $2000');
- }
- });
- }
-
- render() {
- const cellEdit = {
- mode: 'click',
- blurToSave: true,
- onUpdate: this.handleCellEditing
- };
-
- return (
-
- { sourceCode }
-
- );
- }
-}
-`;
-
-class CellEditWithPromise extends Component {
- handleCellEditing = (rowId, dataField, newValue) => {
- return sleep(1000).then(() => {
- if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
- throw new Error('Product Price should bigger than $2000');
- }
- });
- }
-
- render() {
- const cellEdit = {
- mode: 'click',
- blurToSave: true,
- onUpdate: this.handleCellEditing
- };
-
- return (
-
- { sourceCode }
-
- );
- }
-}
-
-export default CellEditWithPromise;
-
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js
deleted file mode 100644
index 760c6d979..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js
+++ /dev/null
@@ -1,212 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint react/prop-types: 0 */
-/* eslint arrow-body-style: 0 */
-/* eslint consistent-return: 0 */
-/* eslint no-class-assign: 0 */
-import React, { Component } from 'react';
-import thunk from 'redux-thunk';
-import { Provider, connect } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-/////////////////////// Action Creator ///////////////////////
-const setErrorMessage = (errorMessage = null) => {
- return { type: 'SET_ERR_MESSAGE', errorMessage };
-};
-
-// Async Action, using redux-thunk
-const cellEditingAsync = (rowId, dataField, newValue) => {
- return (dispatch) => {
- setTimeout(() => {
- if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
- dispatch(setErrorMessage('Product Price should bigger than $2000'));
- } else {
- dispatch({ type: 'ADD_SUCCESS', rowId, dataField, newValue });
- }
- }, 1200);
- };
-};
-
-/////////////////////// Component ///////////////////////
-class CellEditWithRedux extends Component {
- // dispatch a async action
- handleCellEditing = (rowId, dataField, newValue) => {
- this.props.dispatch(cellEditingAsync(rowId, dataField, newValue));
- return false;
- }
-
- handleErrorMsgDisappear = () => {
- this.props.dispatch(setErrorMessage());
- }
-
- render() {
- const cellEdit = {
- mode: 'click',
- editing: this.props.cellEditing,
- errorMessage: this.props.errorMessage,
- onUpdate: this.handleCellEditing,
- onErrorMessageDisappear: this.handleErrorMsgDisappear
- };
-
- return (
-
- { sourceCode }
-
- );
- }
-}
-// connect
-CellEditWithRedux = connect(state => state)(CellEditWithRedux);
-
-/////////////////////// Reducer ///////////////////////
-// initial state object and simple reducers
-const initialState = {
- data: productsGenerator(),
- cellEditing: false,
- errorMessage: null
-};
-
-const reducers = (state, action) => {
- switch (action.type) {
- case 'ADD_SUCCESS': {
- const { rowId, dataField, newValue } = action;
- const data = [...state.data];
- const rowIndex = data.findIndex(r => r.id === rowId);
- data[rowIndex][dataField] = newValue;
- return {
- data,
- cellEditing: false,
- errorMessage: null
- };
- }
- case 'SET_ERR_MESSAGE': {
- const { errorMessage } = action;
- return {
- ...state,
- cellEditing: true,
- errorMessage
- };
- }
- default: {
- return { ...state };
- }
- }
-};
-
-/////////////////////// Index ///////////////////////
-const store = createStore(reducers, initialState, applyMiddleware(thunk));
-
-const Index = () => (
-
-
-);
-`;
-
-const setErrorMessage = (errorMessage = null) => {
- return { type: 'SET_ERR_MESSAGE', errorMessage };
-};
-
-// Async Action, using redux-thunk
-const cellEditingAsync = (rowId, dataField, newValue) => {
- return (dispatch) => {
- setTimeout(() => {
- if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
- dispatch(setErrorMessage('Product Price should bigger than $2000'));
- } else {
- dispatch({ type: 'ADD_SUCCESS', rowId, dataField, newValue });
- }
- }, 1200);
- };
-};
-
-class CellEditWithRedux extends Component {
- // dispatch a async action
- handleCellEditing = (rowId, dataField, newValue) => {
- this.props.dispatch(cellEditingAsync(rowId, dataField, newValue));
- return false;
- }
-
- handleErrorMsgDisappear = () => {
- this.props.dispatch(setErrorMessage());
- }
-
- render() {
- const cellEdit = {
- mode: 'click',
- editing: this.props.cellEditing,
- errorMessage: this.props.errorMessage,
- onUpdate: this.handleCellEditing,
- onErrorMessageDisappear: this.handleErrorMsgDisappear
- };
-
- return (
-
- { sourceCode }
-
- );
- }
-}
-// connect
-CellEditWithRedux = connect(state => state)(CellEditWithRedux);
-
-// initial state object and simple reducers
-const initialState = {
- data: productsGenerator(),
- cellEditing: false,
- errorMessage: null
-};
-
-const reducers = (state, action) => {
- switch (action.type) {
- case 'ADD_SUCCESS': {
- const { rowId, dataField, newValue } = action;
- const data = JSON.parse(JSON.stringify(state.data));
- const rowIndex = data.findIndex(r => r.id === rowId);
- data[rowIndex][dataField] = newValue;
- return {
- data,
- cellEditing: false,
- errorMessage: null
- };
- }
- case 'SET_ERR_MESSAGE': {
- const { errorMessage } = action;
- return {
- ...state,
- cellEditing: true,
- errorMessage
- };
- }
- default: {
- return { ...state };
- }
- }
-};
-
-const store = createStore(reducers, initialState, applyMiddleware(thunk));
-
-const Index = () => (
-
-
-);
-
-export default Index;
-
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js
deleted file mode 100644
index 331792a83..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price',
- editable: (content, row, rowIndex, columnIndex) => content > 2101
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price',
- editable: (content, row, rowIndex, columnIndex) => content > 2101
-}];
-
-const cellEdit = {
- mode: 'click'
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js
deleted file mode 100644
index f48e6e4fa..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const cellEdit = {
- mode: 'click'
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js
deleted file mode 100644
index 02429114d..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- editable: false
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
- // Product Name column can't be edit anymore
- editable: false
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const cellEdit = {
- mode: 'click',
- blurToSave: true
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js
deleted file mode 100644
index c51a15575..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const cellEdit = {
- mode: 'dbclick'
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js
deleted file mode 100644
index 99f177a70..000000000
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const cellEdit = {
- mode: 'click',
- blurToSave: true,
- // Product ID: 0, 3 will be non-editable
- nonEditableRows: () => [0, 3]
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js
deleted file mode 100644
index 55158e0ab..000000000
--- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-import BootstrapTable from 'react-bootstrap-table2';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { jobsGenerator } from 'utils/common';
-
-const jobs = jobsGenerator(5);
-
-const owners = ['Allen', 'Bob', 'Cat'];
-const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
-
-const columns = [{
- dataField: 'id',
- text: 'Job ID'
-}, {
- dataField: 'name',
- text: 'Job Name',
- filter: textFilter()
-}, {
- dataField: 'owner',
- text: 'Job Owner',
- filter: textFilter(),
- formatter: (cell, row) => owners[cell],
- filterValue: (cell, row) => owners[cell]
-}, {
- dataField: 'type',
- text: 'Job Type',
- filter: textFilter(),
- formatter: (cell, row) => types[cell],
- filterValue: (cell, row) => types[cell]
-}];
-
-const sourceCode = `\
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-
-const owners = ['Allen', 'Bob', 'Cat'];
-const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
-const columns = [{
- dataField: 'id',
- text: 'Job ID'
-}, {
- dataField: 'name',
- text: 'Job Name',
- filter: textFilter()
-}, {
- dataField: 'owner',
- text: 'Job Owner',
- filter: textFilter(),
- formatter: (cell, row) => owners[cell],
- filterValue: (cell, row) => owners[cell]
-}, {
- dataField: 'type',
- text: 'Job Type',
- filter: textFilter(),
- filterValue: (cell, row) => types[cell]
-}];
-
-// shape of job: { id: 0, name: 'Job name 0', owner: 1, type: 3 }
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
deleted file mode 100644
index 84edd0be8..000000000
--- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint no-console: 0 */
-import React from 'react';
-import BootstrapTable from 'react-bootstrap-table2';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(8);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter()
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter({
- delay: 1000, // default is 500ms
- style: {
- backgroundColor: 'yellow'
- },
- className: 'test-classname',
- placeholder: 'Custom PlaceHolder',
- onClick: e => console.log(e)
- })
-}];
-
-const sourceCode = `\
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter()
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter({
- delay: 1000, // default is 500ms
- style: {
- backgroundColor: 'yellow'
- },
- className: 'test-classname',
- placeholder: 'Custom PlaceHolder',
- onClick: e => console.log(e)
- })
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
deleted file mode 100644
index edbf0b7a8..000000000
--- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import BootstrapTable from 'react-bootstrap-table2';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(8);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter()
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter({
- defaultValue: '2103'
- })
-}];
-
-const sourceCode = `\
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter()
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter({
- defaultValue: '2103'
- })
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
deleted file mode 100644
index d06217820..000000000
--- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import BootstrapTable from 'react-bootstrap-table2';
-import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(8);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter({
- comparator: Comparator.EQ // default is Comparator.LIKE
- })
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter()
-}];
-
-const sourceCode = `\
-import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter({
- comparator: Comparator.EQ
- })
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter()
-}];
-
-
-
Product Name filter apply Equal Comparator
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
deleted file mode 100644
index 03de391a6..000000000
--- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import BootstrapTable from 'react-bootstrap-table2';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(8);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter()
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter()
-}];
-
-const sourceCode = `\
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter()
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter()
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
deleted file mode 100644
index 3385a6ea7..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- align: 'center'
-}, {
- dataField: 'name',
- text: 'Product Name',
- align: (cell, row, rowIndex, colIndex) => {
- if (rowIndex % 2 === 0) return 'right';
- return 'left';
- }
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- align: 'center'
-}, {
- dataField: 'name',
- text: 'Product Name',
- align: (cell, row, rowIndex, colIndex) => {
- if (rowIndex % 2 === 0) return 'right';
- return 'left';
- }
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js
deleted file mode 100644
index 044622595..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- attrs: { title: 'id column' }
-}, {
- dataField: 'name',
- text: 'Product Name',
- attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': `customized data ${rowIndex}` })
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- attrs: { title: 'id column' }
-}, {
- dataField: 'name',
- text: 'Product Name',
- attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': \`customized data \${rowIndex}\` })
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
deleted file mode 100644
index d1c6057e9..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- classes: 'demo-key-row'
-}, {
- dataField: 'name',
- text: 'Product Name',
- classes: (cell, row, rowIndex, colIndex) => {
- if (rowIndex % 2 === 0) return 'demo-row-even';
- return 'demo-row-odd';
- }
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- classes: 'demo-key-row'
-}, {
- dataField: 'name',
- text: 'Product Name',
- classes: (cell, row, rowIndex, colIndex) => {
- if (rowIndex % 2 === 0) return 'demo-row-even';
- return 'demo-row-odd';
- }
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
deleted file mode 100644
index 3403a21c7..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint no-alert: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- events: {
- onClick: () => alert('Click on Product ID field')
- }
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- events: {
- onClick: () => alert('Click on Product ID field')
- }
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
-
Try to Click on Product ID columns
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
deleted file mode 100644
index 6542af324..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-function priceFormatter(cell, row) {
- if (row.onSale) {
- return (
- $ { cell } NTD(Sales!!) $ { cell } NTD
- );
-}
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price',
- formatter: priceFormatter
-}];
-
-const sourceCode = `\
-function priceFormatter(cell, row) {
- if (row.onSale) {
- return (
-
- $ { cell } NTD(Sales!!)
-
- );
- }
-
- return (
- $ { cell } NTD
- );
-}
-
-const columns = [
-// omit...
-{
- dataField: 'price',
- text: 'Product Price',
- formatter: priceFormatter
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
deleted file mode 100644
index ba902f0b1..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/* eslint no-console: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(5, (value, index) => ({
- id: index,
- name: `User Name ${index}`,
- rank: Math.random() < 0.5 ? 'down' : 'up'
-}));
-
-function rankFormatter(cell, row, rowIndex, formatExtraData) {
- return (
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
deleted file mode 100644
index 57f72d37a..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- hidden: true
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- hidden: true
-},
-// omit...
-];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
deleted file mode 100644
index c559317bd..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- style: {
- fontWeight: 'bold',
- fontSize: '18px'
- }
-}, {
- dataField: 'name',
- text: 'Product Name',
- style: (cell, row, rowIndex, colIndex) => {
- if (rowIndex % 2 === 0) {
- return {
- backgroundColor: '#81c784'
- };
- }
- return {
- backgroundColor: '#c8e6c9'
- };
- }
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- style: {
- fontWeight: 'bold',
- fontSize: '18px'
- }
-}, {
- dataField: 'name',
- text: 'Product Name',
- style: (cell, row, rowIndex, colIndex) => {
- if (rowIndex % 2 === 0) {
- return {
- backgroundColor: '#81c784'
- };
- }
- return {
- backgroundColor: '#c8e6c9'
- };
- }
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
deleted file mode 100644
index e92d3df65..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- title: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- title: (cell, row, rowIndex, colIndex) => `this is custom title for ${cell}`
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- title: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- title: (cell, row, rowIndex, colIndex) => \`this is custom title for \${cell}\`
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
deleted file mode 100644
index 8876d0692..000000000
--- a/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(5, (value, index) => ({
- id: index,
- name: `User Name ${index}`,
- phone: 21009831 + index,
- address: {
- city: 'New York',
- postCode: '1111-4512'
- }
-}));
-
-const columns = [{
- dataField: 'id',
- text: 'User ID'
-}, {
- dataField: 'name',
- text: 'User Name'
-}, {
- dataField: 'phone',
- text: 'Phone'
-}, {
- dataField: 'address.city',
- text: 'City'
-}, {
- dataField: 'address.postCode',
- text: 'PostCode'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'User ID'
-}, {
- dataField: 'name',
- text: 'User Name'
-}, {
- dataField: 'phone',
- text: 'Phone'
-}, {
- dataField: 'address.city',
- text: 'City'
-}, {
- dataField: 'address.postCode',
- text: 'PostCode'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
deleted file mode 100644
index 013a44385..000000000
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- headerAlign: 'center'
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerAlign: (column, colIndex) => 'right'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- headerAlign: 'center'
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerAlign: (column, colIndex) => 'right'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js
deleted file mode 100644
index 4318fb6f7..000000000
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- headerAttrs: { title: 'ID header column' }
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerAttrs: (column, colIndex) => ({ 'data-test': `customized data ${colIndex}` })
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- headerAttrs: { title: 'ID header column' }
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerAttrs: (column, colIndex) => ({ 'data-test': \`customized data \${colIndex}\` })
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
deleted file mode 100644
index 031e2392b..000000000
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerClasses: 'demo-row-odd'
-}, {
- dataField: 'price',
- text: 'Product Price',
- headerClasses: (column, colIndex) => {
- if (colIndex % 2 === 0) return 'demo-row-even';
- return 'demo-row-odd';
- }
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerClasses: 'demo-row-odd'
-}, {
- dataField: 'price',
- text: 'Product Price',
- headerClasses: (column, colIndex) => {
- if (colIndex % 2 === 0) return 'demo-row-even';
- return 'demo-row-odd';
- }
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
deleted file mode 100644
index ca547ac5d..000000000
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint no-alert: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- headerEvents: {
- onClick: () => alert('Click on Product ID header column')
- }
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- events: {
- onClick: () => alert('Click on Product ID header column')
- }
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
-
Try to Click on Product ID header column
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js
deleted file mode 100644
index 5acb1435b..000000000
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint react/prefer-stateless-function: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-function priceFormatter(column, colIndex, { sortElement, filterElement }) {
- return (
-
- { filterElement }
- { column.text }
- { sortElement }
-
- );
-}
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true
-}, {
- dataField: 'price',
- text: 'Product Price',
- sort: true,
- filter: textFilter(),
- headerFormatter: priceFormatter
-}];
-
-const defaultSorted = [{
- dataField: 'name',
- order: 'desc'
-}];
-
-const sourceCode = `\
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-// ...
-function priceFormatter(column, colIndex, { sortElement, filterElement }) {
- return (
-
- { filterElement }
- { column.text }
- { sortElement }
-
- );
-}
-
-const columns = [
-// omit...
-{
- dataField: 'price',
- text: 'Product Price',
- sort: true,
- filter: textFilter(),
- headerFormatter: priceFormatter
-}];
-
-
- { sourceCode }
-
- );
- }
-}
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
deleted file mode 100644
index ddc554bd1..000000000
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-function priceFormatter(column, colIndex) {
- return (
- $$ { column.text } $$ $$ { column.text } $$
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
deleted file mode 100644
index 91e4b56bf..000000000
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerStyle: {
- backgroundColor: '#c8e6c9'
- }
-}, {
- dataField: 'price',
- text: 'Product Price',
- headerStyle: (column, colIndex) => {
- if (colIndex % 2 === 0) {
- return {
- backgroundColor: '#81c784'
- };
- }
- return {
- backgroundColor: '#c8e6c9'
- };
- }
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerStyle: {
- backgroundColor: '#c8e6c9'
- }
-}, {
- dataField: 'price',
- text: 'Product Price',
- headerStyle: (column, colIndex) => {
- if (colIndex % 2 === 0) {
- return {
- backgroundColor: '#81c784'
- };
- }
- return {
- backgroundColor: '#c8e6c9'
- };
- }
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
deleted file mode 100644
index ac2b9b91b..000000000
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- headerTitle: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerTitle: (column, colIndex) => `this is custom title for ${column.text}`
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- headerTitle: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerTitle: (column, colIndex) => \`this is custom title for \${column.text}\`
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js b/packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js
deleted file mode 100644
index 6366f16d2..000000000
--- a/packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/* eslint react/no-multi-comp: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(87);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-// ...
-const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
-
- { sourceCode }
-
-);
-
-class Container extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- page: 1,
- data: products.slice(0, 10),
- sizePerPage: 10
- };
- }
-
- handleTableChange = ({ page, sizePerPage }) => {
- const currentIndex = (page - 1) * sizePerPage;
- setTimeout(() => {
- this.setState(() => ({
- page,
- data: products.slice(currentIndex, currentIndex + sizePerPage),
- sizePerPage
- }));
- }, 2000);
- }
-
- render() {
- const { data, sizePerPage, page } = this.state;
- return (
-
- { sourceCode }
-
-);
-
-Table.propTypes = {
- data: PropTypes.array.isRequired,
- page: PropTypes.number.isRequired,
- totalSize: PropTypes.number.isRequired,
- sizePerPage: PropTypes.number.isRequired,
- onTableChange: PropTypes.func.isRequired
-};
-
-class EmptyTableOverlay extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- page: 1,
- data: products.slice(0, 10),
- sizePerPage: 10
- };
- }
-
- handleTableChange = ({ page, sizePerPage }) => {
- const currentIndex = (page - 1) * sizePerPage;
- setTimeout(() => {
- this.setState(() => ({
- page,
- data: products.slice(currentIndex, currentIndex + sizePerPage),
- sizePerPage
- }));
- }, 3000);
- this.setState(() => ({ data: [] }));
- }
-
- render() {
- const { data, sizePerPage, page } = this.state;
- return (
-
- );
- }
-}
-
-export default EmptyTableOverlay;
diff --git a/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js b/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js
deleted file mode 100644
index b0dca0482..000000000
--- a/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/* eslint react/no-multi-comp: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-import overlayFactory from 'react-bootstrap-table2-overlay';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(87);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-import overlayFactory from 'react-bootstrap-table2-overlay';
-
-// ...
-const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, totalSize }) => (
-
- { sourceCode }
-
-);
-
-RemotePagination.propTypes = {
- data: PropTypes.array.isRequired,
- page: PropTypes.number.isRequired,
- loading: PropTypes.bool.isRequired,
- totalSize: PropTypes.number.isRequired,
- sizePerPage: PropTypes.number.isRequired,
- onTableChange: PropTypes.func.isRequired
-};
-
-class Container extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- page: 1,
- loading: false,
- data: products.slice(0, 10),
- sizePerPage: 10
- };
- }
-
- handleTableChange = ({ page, sizePerPage }) => {
- const currentIndex = (page - 1) * sizePerPage;
- setTimeout(() => {
- this.setState(() => ({
- page,
- loading: false,
- data: products.slice(currentIndex, currentIndex + sizePerPage),
- sizePerPage
- }));
- }, 3000);
- this.setState(() => ({ loading: true }));
- }
-
- render() {
- const { data, sizePerPage, page, loading } = this.state;
- return (
-
- { sourceCode }
-
-);
-
-RemotePagination.propTypes = {
- data: PropTypes.array.isRequired,
- page: PropTypes.number.isRequired,
- loading: PropTypes.bool.isRequired,
- totalSize: PropTypes.number.isRequired,
- sizePerPage: PropTypes.number.isRequired,
- onTableChange: PropTypes.func.isRequired
-};
-
-class Container extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- page: 1,
- loading: false,
- data: products.slice(0, 10),
- sizePerPage: 10
- };
- }
-
- handleTableChange = ({ page, sizePerPage }) => {
- const currentIndex = (page - 1) * sizePerPage;
- setTimeout(() => {
- this.setState(() => ({
- page,
- loading: false,
- data: products.slice(currentIndex, currentIndex + sizePerPage),
- sizePerPage
- }));
- }, 3000);
- this.setState(() => ({ loading: true }));
- }
-
- render() {
- const { data, sizePerPage, page, loading } = this.state;
- return (
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/index.js b/packages/react-bootstrap-table2-example/examples/pagination/index.js
deleted file mode 100644
index 979d59baa..000000000
--- a/packages/react-bootstrap-table2-example/examples/pagination/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint react/prefer-stateless-function: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(87);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-// ...
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js b/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js
deleted file mode 100644
index 3ff1b15f3..000000000
--- a/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/* eslint react/prefer-stateless-function: 0 */
-/* eslint no-console: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(87);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-// ...
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const options = {
- onSizePerPageChange: (sizePerPage, page) => {
- console.log('Size per page change!!!');
- console.log('Newest size per page:' + sizePerPage);
- console.log('Newest page:' + page);
- },
- onPageChange: (page, sizePerPage) => {
- console.log('Page change!!!');
- console.log('Newest size per page:' + sizePerPage);
- console.log('Newest page:' + page);
- }
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-all.js b/packages/react-bootstrap-table2-example/examples/remote/remote-all.js
deleted file mode 100644
index c23d690e5..000000000
--- a/packages/react-bootstrap-table2-example/examples/remote/remote-all.js
+++ /dev/null
@@ -1,202 +0,0 @@
-/* eslint guard-for-in: 0 */
-/* eslint no-restricted-syntax: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(87);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter()
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter()
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table2';
-import paginator from 'react-bootstrap-table2-paginator';
-import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
-// ...
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter()
-}, {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter()
-}];
-
-const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
-
- { sourceCode }
-
-);
-
-RemoteAll.propTypes = {
- data: PropTypes.array.isRequired,
- page: PropTypes.number.isRequired,
- totalSize: PropTypes.number.isRequired,
- sizePerPage: PropTypes.number.isRequired,
- onTableChange: PropTypes.func.isRequired
-};
-
-class Container extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- page: 1,
- data: products.slice(0, 10),
- totalSize: products.length,
- sizePerPage: 10
- };
- this.handleTableChange = this.handleTableChange.bind(this);
- }
-
- handleTableChange = (type, { page, sizePerPage, filters }) => {
- const currentIndex = (page - 1) * sizePerPage;
- setTimeout(() => {
- const result = products.filter((row) => {
- let valid = true;
- for (const dataField in filters) {
- const { filterVal, filterType, comparator } = filters[dataField];
-
- if (filterType === 'TEXT') {
- if (comparator === Comparator.LIKE) {
- valid = row[dataField].toString().indexOf(filterVal) > -1;
- } else {
- valid = row[dataField] === filterVal;
- }
- }
- if (!valid) break;
- }
- return valid;
- });
- this.setState(() => ({
- page,
- data: result.slice(currentIndex, currentIndex + sizePerPage),
- totalSize: result.length,
- sizePerPage
- }));
- }, 2000);
- }
-
- render() {
- const { data, sizePerPage, page } = this.state;
- return (
-
-
When remote.pagination is enabled, the filtering,
- sorting and searching will also change to remote mode automatically
- { sourceCode }
-
-);
-
-RemoteAll.propTypes = {
- data: PropTypes.array.isRequired,
- page: PropTypes.number.isRequired,
- totalSize: PropTypes.number.isRequired,
- sizePerPage: PropTypes.number.isRequired,
- onTableChange: PropTypes.func.isRequired
-};
-
-class Container extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- page: 1,
- data: products.slice(0, 10),
- totalSize: products.length,
- sizePerPage: 10
- };
- this.handleTableChange = this.handleTableChange.bind(this);
- }
-
- handleTableChange = (type, { page, sizePerPage, filters }) => {
- const currentIndex = (page - 1) * sizePerPage;
- setTimeout(() => {
- const result = products.filter((row) => {
- let valid = true;
- for (const dataField in filters) {
- const { filterVal, filterType, comparator } = filters[dataField];
-
- if (filterType === 'TEXT') {
- if (comparator === Comparator.LIKE) {
- valid = row[dataField].toString().indexOf(filterVal) > -1;
- } else {
- valid = row[dataField] === filterVal;
- }
- }
- if (!valid) break;
- }
- return valid;
- });
- this.setState(() => ({
- page,
- data: result.slice(currentIndex, currentIndex + sizePerPage),
- totalSize: result.length,
- sizePerPage
- }));
- }, 2000);
- }
-
- render() {
- const { data, sizePerPage, page } = this.state;
- return (
-
- { sourceCode }
-
-);
-
-RemoteFilter.propTypes = {
- data: PropTypes.array.isRequired,
- onTableChange: PropTypes.func.isRequired
-};
-
-class Container extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- data: products
- };
- }
-
- handleTableChange = (type, { filters }) => {
- setTimeout(() => {
- const result = products.filter((row) => {
- let valid = true;
- for (const dataField in filters) {
- const { filterVal, filterType, comparator } = filters[dataField];
-
- if (filterType === 'TEXT') {
- if (comparator === Comparator.LIKE) {
- valid = row[dataField].toString().indexOf(filterVal) > -1;
- } else {
- valid = row[dataField] === filterVal;
- }
- }
- if (!valid) break;
- }
- return valid;
- });
- this.setState(() => ({
- data: result
- }));
- }, 2000);
- }
-
- render() {
- return (
-
- { sourceCode }
-
-);
-
-class Container extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- page: 1,
- data: products.slice(0, 10),
- sizePerPage: 10
- };
- }
-
- handleTableChange = ({ page, sizePerPage }) => {
- const currentIndex = (page - 1) * sizePerPage;
- setTimeout(() => {
- this.setState(() => ({
- page,
- data: products.slice(currentIndex, currentIndex + sizePerPage),
- sizePerPage
- }));
- }, 2000);
- }
-
- render() {
- const { data, sizePerPage, page } = this.state;
- return (
-
- { sourceCode }
-
-);
-
-RemotePagination.propTypes = {
- data: PropTypes.array.isRequired,
- page: PropTypes.number.isRequired,
- totalSize: PropTypes.number.isRequired,
- sizePerPage: PropTypes.number.isRequired,
- onTableChange: PropTypes.func.isRequired
-};
-
-class Container extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- page: 1,
- data: products.slice(0, 10),
- sizePerPage: 10
- };
- }
-
- handleTableChange = (type, { page, sizePerPage }) => {
- const currentIndex = (page - 1) * sizePerPage;
- setTimeout(() => {
- this.setState(() => ({
- page,
- data: products.slice(currentIndex, currentIndex + sizePerPage),
- sizePerPage
- }));
- }, 2000);
- }
-
- render() {
- const { data, sizePerPage, page } = this.state;
- return (
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js b/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js
deleted file mode 100644
index b792b43d5..000000000
--- a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true
-};
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js b/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js
deleted file mode 100644
index b6544114d..000000000
--- a/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true,
- hideSelectColumn: true,
- bgColor: '#00BFFF'
-};
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true,
- hideSelectColumn: true,
- bgColor: '#00BFFF'
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js b/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js
deleted file mode 100644
index b792b43d5..000000000
--- a/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true
-};
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js
deleted file mode 100644
index 69fbf0a2e..000000000
--- a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true,
- nonSelectable: [0, 2, 4]
-};
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true,
- nonSelectable: [0, 2, 4]
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js
deleted file mode 100644
index ede13e06b..000000000
--- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow1 = {
- mode: 'checkbox',
- clickToSelect: true,
- bgColor: '#00BFFF'
-};
-
-const selectRow2 = {
- mode: 'checkbox',
- clickToSelect: true,
- bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
-};
-
-const sourceCode1 = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true,
- bgColor: '#00BFFF'
-};
-
-
- { sourceCode1 }
- { sourceCode2 }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js
deleted file mode 100644
index 4c6b79478..000000000
--- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow1 = {
- mode: 'checkbox',
- clickToSelect: true,
- classes: 'selection-row'
-};
-
-const selectRow2 = {
- mode: 'checkbox',
- clickToSelect: true,
- classes: (row, rowIndex) =>
- (rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101')
-};
-
-const sourceCode1 = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true,
- classes: 'selection-row'
-};
-
-
- { sourceCode1 }
- { sourceCode2 }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
deleted file mode 100644
index fd94d6ba9..000000000
--- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
+++ /dev/null
@@ -1,66 +0,0 @@
-
-/* eslint no-console: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true,
- onSelect: (row, isSelect, rowIndex) => {
- console.log(row.id);
- console.log(isSelect);
- console.log(rowIndex);
- },
- onSelectAll: (isSelect, rows) => {
- console.log(isSelect);
- console.log(rows);
- }
-};
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js
deleted file mode 100644
index e347c1e75..000000000
--- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow1 = {
- mode: 'checkbox',
- clickToSelect: true,
- style: { backgroundColor: '#c8e6c9' }
-};
-
-const selectRow2 = {
- mode: 'checkbox',
- clickToSelect: true,
- style: (row, rowIndex) => {
- const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF';
- return { backgroundColor };
- }
-};
-
-const sourceCode1 = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'checkbox',
- clickToSelect: true,
- style: { backgroundColor: '#c8e6c9' }
-};
-
-
- { sourceCode1 }
- { sourceCode2 }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js b/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js
deleted file mode 100644
index 936dde49b..000000000
--- a/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'radio',
- clickToSelect: true
-};
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const selectRow = {
- mode: 'radio',
- clickToSelect: true
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-class.js b/packages/react-bootstrap-table2-example/examples/rows/row-class.js
deleted file mode 100644
index b17f6b141..000000000
--- a/packages/react-bootstrap-table2-example/examples/rows/row-class.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const rowClasses1 = 'custom-row-class';
-
-const sourceCode1 = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const rowClasses = 'custom-row-class';
-
-
- { sourceCode1 }
- { sourceCode2 }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-event.js b/packages/react-bootstrap-table2-example/examples/rows/row-event.js
deleted file mode 100644
index 1ec5022bb..000000000
--- a/packages/react-bootstrap-table2-example/examples/rows/row-event.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint no-console: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const rowEvents = {
- onClick: (e) => {
- console.log('click on row');
- }
-};
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const rowEvents = {
- onClick: (e) => {
- console.log('click on row');
- }
-};
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-style.js b/packages/react-bootstrap-table2-example/examples/rows/row-style.js
deleted file mode 100644
index 76de2eac1..000000000
--- a/packages/react-bootstrap-table2-example/examples/rows/row-style.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const rowStyle1 = { backgroundColor: '#c8e6c9' };
-
-const sourceCode1 = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID'
-}, {
- dataField: 'name',
- text: 'Product Name'
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const rowStyle = { backgroundColor: '#c8e6c9' };
-
-
- { sourceCode1 }
- { sourceCode2 }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js
deleted file mode 100644
index 1763a3e57..000000000
--- a/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/* eslint no-unused-vars: 0 */
-
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true,
- // here, we implement a custom sort which perform a reverse sorting
- sortFunc: (a, b, order, dataField) => {
- if (order === 'asc') {
- return b - a;
- }
- return a - b; // desc
- }
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true,
- // here, we implement a custom sort which perform a reverse sorting
- sortFunc: (a, b, order, dataField) => {
- if (order === 'asc') {
- return b - a;
- }
- return a - b; // desc
- }
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js
deleted file mode 100644
index 9cda0a41e..000000000
--- a/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/* eslint react/prefer-stateless-function: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true
-}, {
- dataField: 'price',
- text: 'Product Price',
- sort: true
-}];
-
-const defaultSorted = [{
- dataField: 'name',
- order: 'desc'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true
-}, {
- dataField: 'price',
- text: 'Product Price',
- sort: true
-}];
-
-const defaultSorted = [{
- dataField: 'name',
- order: 'desc'
-}];
-
-
- { sourceCode }
-
- );
- }
-}
-
-export default DefaultSortTable;
diff --git a/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js
deleted file mode 100644
index 45c7ff45d..000000000
--- a/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js
deleted file mode 100644
index d70bdd752..000000000
--- a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint
- no-unused-vars: 0
- arrow-body-style: 0
-*/
-
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
- sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
-);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true,
- headerSortingClasses
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true,
- headerSortingClasses
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-const sourceCode = `\
-const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
- sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
-);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true,
- headerSortingClasses
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true,
- headerSortingClasses
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js
deleted file mode 100644
index c39096542..000000000
--- a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const headerSortingStyle = { backgroundColor: '#c8e6c9' };
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true,
- headerSortingStyle
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true,
- headerSortingStyle
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
-const sourceCode = `\
-const headerSortingStyle = { backgroundColor: '#c8e6c9' };
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true,
- headerSortingStyle
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true,
- headerSortingStyle
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
- { sourceCode }
-
-);
diff --git a/packages/react-bootstrap-table2-example/examples/welcome.js b/packages/react-bootstrap-table2-example/examples/welcome.js
deleted file mode 100644
index 41f3547a8..000000000
--- a/packages/react-bootstrap-table2-example/examples/welcome.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import Typed from 'typed.js';
-
-export default class Welcome extends React.Component {
- componentDidMount() {
- // type.js config
- const options = {
- strings: ['It\'s a bootstrap table rebuilt for React.js ♥ '],
- typeSpeed: 50,
- backSpeed: 50
- };
- this.typed = new Typed(this.el, options);
- }
-
- componentWillUnmount() {
- // Make sure to destroy Typed instance on unmounting to prevent memory leaks
- this.typed.destroy();
- }
-
- render() {
- return (
-
-
-
react-bootstrap-table2
- { this.el = el; } }
- />
-
-
-
-
-
-
-
- { this.props.children }
-
-
react-bootstrap-table demo
-
-
-
diff --git a/packages/react-bootstrap-table2-example/src/index.js b/packages/react-bootstrap-table2-example/src/index.js
deleted file mode 100644
index 10b6085c4..000000000
--- a/packages/react-bootstrap-table2-example/src/index.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint no-debugger: 0 */
-/* eslint arrow-body-style: 0 */
-import React from 'react';
-import ReactDom from 'react-dom';
-
-import BootstrapTable from 'react-bootstrap-table2';
-
-require('react-bootstrap-table2/style/react-bootstrap-table.scss');
-
-const products = [];
-
-function addProducts(quantity) {
- const startId = products.length;
- for (let i = 0; i < quantity; i += 1) {
- const id = startId + i;
- products.push({
- id,
- name: `Item name ${id}`,
- price: 2100 + i,
- nest: {
- address: 'Address 1',
- postcal: '0922-1234'
- }
- });
- }
-}
-
-addProducts(5);
-
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- style: {
- backgroundColor: 'red'
- },
- classes: 'my-xxx'
-}, {
- dataField: 'name',
- text: 'Product Name',
- headerTitle: true,
- formatter: (cell, row) =>
- ({ cell }::: ${ row.price } ),
- validator: (newValue, row, column) => {
- const validationForm = {
- valid: true,
- message: null
- };
- validationForm.valid = false;
- validationForm.message = 'Invalid message';
- return validationForm;
- }
-}, {
- dataField: 'price',
- text: 'Product Price',
- validator: (newValue, row, column) => {
- if (newValue < 2000) {
- return {
- valid: false,
- message: 'Price should bigger than 2000'
- };
- }
- return true;
- }
-}, {
- dataField: 'nest.address',
- text: 'Address'
-}, {
- dataField: 'nest.postcal',
- text: 'Postal',
- editable: true,
- validator: (newValue, row, column) => true
-}];
-
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-const cellEdit = {
- mode: 'click',
- blurToSave: true,
- // beforeSaveCell: (oldValue, newValue, row, column) => {
- // console.log('beforeSavecell');
- // // console.log(oldValue);
- // // console.log(newValue);
- // // console.log(row);
- // // console.log(column);
- // },
- // afterSaveCell: (oldValue, newValue, row, column) => {
- // console.log('aftersavecell');
- // // console.log(oldValue);
- // // console.log(newValue);
- // // console.log(row);
- // // console.log(column);
- // }
- onUpdate: (rowId, dataField, newValue) => {
- return sleep(1000).then(() => {
- // return { forceUpdate: true };
- throw new Error('test is not successfully');
- });
- }
- // nonEditableRows: () => [1, 3, 7]
-};
-
-
-// let Table = withCellEdit({
-// mode: 'click',
-// blurToSave: true,
-// onEditing: (rowId, dataField, newValue) => {
-// return sleep(1000).then(() => {
-// // return { forceUpdate: true };
-// throw new Error('test is not successfully');
-// });
-// }
-// })(BootstrapTable);
-// Table = createTable(Table);
-
-ReactDom.render(
- { fragment }
);
- }
- };
-
- describe('default filter wrapper', () => {
- const props = createTableProps();
-
- beforeEach(() => {
- createFilterWrapper(props);
- });
-
- it('should rendering correctly', () => {
- expect(wrapper.length).toBe(1);
- });
-
- it('should initializing state correctly', () => {
- expect(instance.state.isDataChanged).toBeFalsy();
- expect(instance.state.currFilters).toEqual({});
- });
-
- it('should rendering BootstraTable correctly', () => {
- const table = wrapper.find(BootstrapTable);
- expect(table.length).toBe(1);
- expect(table.prop('onFilter')).toBeDefined();
- expect(table.prop('isDataChanged')).toEqual(instance.state.isDataChanged);
- });
- });
-
- describe('componentWillReceiveProps', () => {
- let nextProps;
-
- describe('when props.store.filters is same as current state.currFilters', () => {
- beforeEach(() => {
- nextProps = createTableProps();
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should setting isDataChanged as false (Temporary solution)', () => {
- expect(instance.state.isDataChanged).toBeFalsy();
- });
- });
-
- describe('when props.store.filters is different from current state.currFilters', () => {
- beforeEach(() => {
- nextProps = createTableProps();
- nextProps.store.filters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } };
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should setting states correctly', () => {
- expect(instance.state.isDataChanged).toBeTruthy();
- expect(instance.state.currFilters).toBe(nextProps.store.filters);
- });
- });
- });
-
- describe('onFilter', () => {
- let props;
-
- beforeEach(() => {
- props = createTableProps();
- createFilterWrapper(props);
- });
-
- describe('when filterVal is empty or undefined', () => {
- const filterVals = ['', undefined];
-
- it('should setting store object correctly', () => {
- filterVals.forEach((filterVal) => {
- instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
- expect(props.store.filtering).toBeFalsy();
- });
- });
-
- it('should setting state correctly', () => {
- filterVals.forEach((filterVal) => {
- instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
- expect(instance.state.isDataChanged).toBeTruthy();
- expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
- });
- });
- });
-
- describe('when filterVal is existing', () => {
- const filterVal = '3';
-
- it('should setting store object correctly', () => {
- instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
- expect(props.store.filters).toEqual(instance.state.currFilters);
- });
-
- it('should setting state correctly', () => {
- instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
- expect(instance.state.isDataChanged).toBeTruthy();
- expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
- });
- });
-
- describe('when remote filter is enabled', () => {
- const filterVal = '3';
-
- beforeEach(() => {
- props = createTableProps();
- props.remote = { filter: true };
- createFilterWrapper(props);
- instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
- });
-
- it('should not setting store object correctly', () => {
- expect(props.store.filters).not.toEqual(instance.state.currFilters);
- });
-
- it('should not setting state', () => {
- expect(instance.state.isDataChanged).toBeFalsy();
- expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
- });
-
- it('should calling props.onRemoteFilterChange correctly', () => {
- expect(onRemoteFilterChangeCB.calledOnce).toBeTruthy();
- });
- });
-
- describe('combination', () => {
- it('should setting store object correctly', () => {
- instance.onFilter(props.columns[1], '3', FILTER_TYPE.TEXT);
- expect(props.store.filters).toEqual(instance.state.currFilters);
- expect(instance.state.isDataChanged).toBeTruthy();
- expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
-
- instance.onFilter(props.columns[1], '2', FILTER_TYPE.TEXT);
- expect(props.store.filters).toEqual(instance.state.currFilters);
- expect(instance.state.isDataChanged).toBeTruthy();
- expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
-
- instance.onFilter(props.columns[2], '2', FILTER_TYPE.TEXT);
- expect(props.store.filters).toEqual(instance.state.currFilters);
- expect(instance.state.isDataChanged).toBeTruthy();
- expect(Object.keys(instance.state.currFilters)).toHaveLength(2);
-
- instance.onFilter(props.columns[2], '', FILTER_TYPE.TEXT);
- expect(props.store.filters).toEqual(instance.state.currFilters);
- expect(instance.state.isDataChanged).toBeTruthy();
- expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
-
- instance.onFilter(props.columns[1], '', FILTER_TYPE.TEXT);
- expect(props.store.filters).toEqual(instance.state.currFilters);
- expect(instance.state.isDataChanged).toBeTruthy();
- expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
- });
- });
- });
-});
diff --git a/packages/react-bootstrap-table2-overlay/package.json b/packages/react-bootstrap-table2-overlay/package.json
deleted file mode 100644
index d1cd57360..000000000
--- a/packages/react-bootstrap-table2-overlay/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "react-bootstrap-table2-overlay",
- "version": "0.0.1",
- "description": "it's a loading overlay component for react-bootstrap-table2",
- "main": "src/index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "author": "",
- "license": "ISC",
- "dependencies": {
- "react-loading-overlay": "0.2.8"
- }
-}
diff --git a/packages/react-bootstrap-table2-overlay/src/index.js b/packages/react-bootstrap-table2-overlay/src/index.js
deleted file mode 100644
index a5db87267..000000000
--- a/packages/react-bootstrap-table2-overlay/src/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint no-return-assign: 0 */
-import React from 'react';
-import LoadingOverlay from 'react-loading-overlay';
-
-export default options => (element, loading) =>
- class TableLoadingOverlayWrapper extends React.Component {
- componentDidMount() {
- if (loading) {
- const { wrapper } = this.overlay;
- const masker = wrapper.firstChild;
- const headerDOM = wrapper.parentElement.querySelector('thead');
- const bodyDOM = wrapper.parentElement.querySelector('tbody');
- masker.style.marginTop = window.getComputedStyle(headerDOM).height;
- masker.style.height = window.getComputedStyle(bodyDOM).height;
- }
- }
-
- render() {
- return (
- this.overlay = n }
- { ...options }
- active={ loading }
- >
- { element }
-
- );
- }
- };
diff --git a/packages/react-bootstrap-table2-overlay/test/index.test.js b/packages/react-bootstrap-table2-overlay/test/index.test.js
deleted file mode 100644
index a8fdacbb2..000000000
--- a/packages/react-bootstrap-table2-overlay/test/index.test.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import { shallow, render } from 'enzyme';
-import LoadingOverlay from 'react-loading-overlay';
-
-import overlayFactory from '../src';
-
-describe('overlayFactory', () => {
- let wrapper;
- // let instance;
-
- const createTable = () => (
-
-
-
- column1
- column2
-
-
-
- { [1, 2].map(row => (
- { row } test
-
- );
-
- describe('when loading is false', () => {
- beforeEach(() => {
- const tableElm = createTable();
- const Overlay = overlayFactory()(tableElm, false);
- wrapper = shallow(
- { page }
-
- );
- }
-}
-
-PageButton.propTypes = {
- onPageChange: PropTypes.func.isRequired,
- page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
- active: PropTypes.bool.isRequired,
- disabled: PropTypes.bool.isRequired,
- title: PropTypes.string
-};
-
-export default PageButton;
diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
deleted file mode 100644
index 931595f4a..000000000
--- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/* eslint no-mixed-operators: 0 */
-export default ExtendBase =>
- class PageResolver extends ExtendBase {
- backToPrevPage() {
- const { currPage, pageStartIndex } = this.props;
- return (currPage - 1) < pageStartIndex ? pageStartIndex : currPage - 1;
- }
-
- goToNextPage() {
- const { currPage } = this.props;
- const { lastPage } = this.state;
- return (currPage + 1) > lastPage ? lastPage : currPage + 1;
- }
-
- initialState() {
- const totalPages = this.calculateTotalPage();
- const lastPage = this.calculateLastPage(totalPages);
- return { totalPages, lastPage, dropdownOpen: false };
- }
-
- calculateTotalPage(sizePerPage = this.props.currSizePerPage, dataSize = this.props.dataSize) {
- return Math.ceil(dataSize / sizePerPage);
- }
-
- calculateLastPage(totalPages) {
- const { pageStartIndex } = this.props;
- return pageStartIndex + totalPages - 1;
- }
-
- calculatePages(
- totalPages = this.state.totalPages,
- lastPage = this.state.lastPage) {
- const {
- currPage,
- paginationSize,
- pageStartIndex,
- withFirstAndLast,
- firstPageText,
- prePageText,
- nextPageText,
- lastPageText,
- alwaysShowAllBtns
- } = this.props;
-
- let pages;
- let endPage = totalPages;
- if (endPage <= 0) return [];
-
- let startPage = Math.max(currPage - Math.floor(paginationSize / 2), pageStartIndex);
- endPage = startPage + paginationSize - 1;
-
- if (endPage > lastPage) {
- endPage = lastPage;
- startPage = endPage - paginationSize + 1;
- }
-
- if (startPage !== pageStartIndex && totalPages > paginationSize && withFirstAndLast) {
- pages = [firstPageText, prePageText];
- } else if (totalPages > 1 || alwaysShowAllBtns) {
- pages = [prePageText];
- } else {
- pages = [];
- }
-
- for (let i = startPage; i <= endPage; i += 1) {
- if (i >= pageStartIndex) pages.push(i);
- }
-
- if (endPage <= lastPage && pages.length > 1) {
- pages.push(nextPageText);
- }
- if (endPage !== lastPage && withFirstAndLast) {
- pages.push(lastPageText);
- }
- return pages;
- }
-
- calculatePageStatus(pages = [], lastPage = this.state.lastPage) {
- const {
- currPage,
- pageStartIndex,
- firstPageText,
- prePageText,
- nextPageText,
- lastPageText,
- alwaysShowAllBtns
- } = this.props;
- const isStart = page =>
- (currPage === pageStartIndex && (page === firstPageText || page === prePageText));
- const isEnd = page =>
- (currPage === lastPage && (page === nextPageText || page === lastPageText));
-
- return pages
- .filter((page) => {
- if (alwaysShowAllBtns) {
- return true;
- }
- return !(isStart(page) || isEnd(page));
- })
- .map((page) => {
- let title;
- const active = page === currPage;
- const disabled = (isStart(page) || isEnd(page));
-
- if (page === nextPageText) {
- title = this.props.nextPageTitle;
- } else if (page === prePageText) {
- title = this.props.prePageTitle;
- } else if (page === firstPageText) {
- title = this.props.firstPageTitle;
- } else if (page === lastPageText) {
- title = this.props.lastPageTitle;
- } else {
- title = `${page}`;
- }
-
- return { page, active, disabled, title };
- });
- }
-
- calculateSizePerPageStatus() {
- const { sizePerPageList } = this.props;
- return sizePerPageList.map((_sizePerPage) => {
- const pageText = _sizePerPage.text || _sizePerPage;
- const pageNumber = _sizePerPage.value || _sizePerPage;
- return {
- text: `${pageText}`,
- page: pageNumber
- };
- });
- }
- };
-
diff --git a/packages/react-bootstrap-table2-paginator/src/page.js b/packages/react-bootstrap-table2-paginator/src/page.js
deleted file mode 100644
index 1ea54e571..000000000
--- a/packages/react-bootstrap-table2-paginator/src/page.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export const getByCurrPage = store => (page, sizePerPage, pageStartIndex) => {
- const dataSize = store.data.length;
- if (!dataSize) return [];
- const getNormalizedPage = () => {
- const offset = Math.abs(1 - pageStartIndex);
- return page + offset;
- };
- const end = (getNormalizedPage() * sizePerPage) - 1;
- const start = end - (sizePerPage - 1);
-
- const result = [];
- for (let i = start; i <= end; i += 1) {
- result.push(store.data[i]);
- if (i + 1 === dataSize) break;
- }
- return result;
-};
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list.js b/packages/react-bootstrap-table2-paginator/src/pagination-list.js
deleted file mode 100644
index 805af5323..000000000
--- a/packages/react-bootstrap-table2-paginator/src/pagination-list.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import PageButton from './page-button';
-
-const PaginatonList = props => (
-
- {
- props.pages.map(pageProps => (
-
-);
-
-PaginatonList.propTypes = {
- pages: PropTypes.arrayOf(PropTypes.shape({
- page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- active: PropTypes.bool,
- disable: PropTypes.bool,
- title: PropTypes.string
- })).isRequired,
- onPageChange: PropTypes.func.isRequired
-};
-
-export default PaginatonList;
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
deleted file mode 100644
index d103e4bca..000000000
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/* eslint react/require-default-props: 0 */
-/* eslint arrow-body-style: 0 */
-import cs from 'classnames';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import pageResolver from './page-resolver';
-import SizePerPageDropDown from './size-per-page-dropdown';
-import PaginationList from './pagination-list';
-import Const from './const';
-
-class Pagination extends pageResolver(Component) {
- constructor(props) {
- super(props);
- this.closeDropDown = this.closeDropDown.bind(this);
- this.toggleDropDown = this.toggleDropDown.bind(this);
- this.handleChangePage = this.handleChangePage.bind(this);
- this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
- this.state = this.initialState();
- }
-
- componentWillReceiveProps(nextProps) {
- const { dataSize, currSizePerPage } = nextProps;
- if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
- const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);
- const lastPage = this.calculateLastPage(totalPages);
- this.setState({ totalPages, lastPage });
- }
- }
-
- toggleDropDown() {
- const dropdownOpen = !this.state.dropdownOpen;
- this.setState(() => {
- return { dropdownOpen };
- });
- }
-
- closeDropDown() {
- this.setState(() => {
- return { dropdownOpen: false };
- });
- }
-
- handleChangeSizePerPage(sizePerPage) {
- const { currSizePerPage, onSizePerPageChange } = this.props;
- const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage;
- let { currPage } = this.props;
- if (selectedSize !== currSizePerPage) {
- const newTotalPages = this.calculateTotalPage(selectedSize);
- const newLastPage = this.calculateLastPage(newTotalPages);
- if (currPage > newLastPage) currPage = newLastPage;
- onSizePerPageChange(selectedSize, currPage);
- }
- this.closeDropDown();
- }
-
- handleChangePage(newPage) {
- let page;
- const {
- currPage,
- pageStartIndex,
- prePageText,
- nextPageText,
- lastPageText,
- firstPageText,
- onPageChange
- // keepSizePerPageState
- } = this.props;
- const { lastPage } = this.state;
-
- if (newPage === prePageText) {
- page = this.backToPrevPage();
- } else if (newPage === nextPageText) {
- page = (currPage + 1) > lastPage ? lastPage : currPage + 1;
- } else if (newPage === lastPageText) {
- page = lastPage;
- } else if (newPage === firstPageText) {
- page = pageStartIndex;
- } else {
- page = parseInt(newPage, 10);
- }
-
- // if (keepSizePerPageState) { this.closeDropDown(); }
-
- if (page !== currPage) {
- onPageChange(page);
- }
- }
-
- render() {
- const { totalPages, lastPage, dropdownOpen: open } = this.state;
- const {
- sizePerPageList,
- currSizePerPage,
- hideSizePerPage,
- hidePageListOnlyOnePage
- } = this.props;
- const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage);
-
- const pageListClass = cs(
- 'react-bootstrap-table-pagination-list',
- 'col-md-6 col-xs-6 col-sm-6 col-lg-6', {
- 'react-bootstrap-table-pagination-list-hidden': (hidePageListOnlyOnePage && totalPages === 1)
- });
- return (
-
-
- {
- sizePerPageList.length > 1 && !hideSizePerPage ?
- (
-
-
-
-
- { currSizePerPage }
-
- { ' ' }
-
-
-
- {
- options.map(option => (
-
-
- );
-};
-
-SizePerPageDropDown.propTypes = {
- currSizePerPage: PropTypes.string.isRequired,
- options: PropTypes.array.isRequired,
- onClick: PropTypes.func.isRequired,
- onBlur: PropTypes.func.isRequired,
- onSizePerPageChange: PropTypes.func.isRequired,
- open: PropTypes.bool,
- hidden: PropTypes.bool,
- btnContextual: PropTypes.string,
- variation: PropTypes.oneOf(['dropdown', 'dropup']),
- className: PropTypes.string
-};
-SizePerPageDropDown.defaultProps = {
- open: false,
- hidden: false,
- btnContextual: 'btn-default btn-secondary',
- variation: 'dropdown',
- className: ''
-};
-
-
-export default SizePerPageDropDown;
diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js
deleted file mode 100644
index eba6ca629..000000000
--- a/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint jsx-a11y/href-no-hash: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const SizePerPageOption = ({
- text,
- page,
- onSizePerPageChange
-}) => (
-
- {
- e.preventDefault();
- onSizePerPageChange(page);
- } }
- >
- { text }
-
-
-);
-
-SizePerPageOption.propTypes = {
- text: PropTypes.string.isRequired,
- page: PropTypes.number.isRequired,
- onSizePerPageChange: PropTypes.func.isRequired
-};
-
-export default SizePerPageOption;
diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js
deleted file mode 100644
index e01cd516b..000000000
--- a/packages/react-bootstrap-table2-paginator/src/wrapper.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/* eslint react/prop-types: 0 */
-/* eslint arrow-body-style: 0 */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import Const from './const';
-import Pagination from './pagination';
-import { getByCurrPage } from './page';
-
-class PaginationWrapper extends Component {
- static propTypes = {
- store: PropTypes.object.isRequired,
- baseElement: PropTypes.func.isRequired,
- onRemotePageChange: PropTypes.func.isRequired
- }
-
- constructor(props) {
- super(props);
- this.handleChangePage = this.handleChangePage.bind(this);
- this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
-
- let currPage;
- let currSizePerPage;
- const { options } = props.pagination;
- const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
-
- // initialize current page
- if (typeof options.page !== 'undefined') {
- currPage = options.page;
- } else if (typeof options.pageStartIndex !== 'undefined') {
- currPage = options.pageStartIndex;
- } else {
- currPage = Const.PAGE_START_INDEX;
- }
-
- // initialize current sizePerPage
- if (typeof options.sizePerPage !== 'undefined') {
- currSizePerPage = options.sizePerPage;
- } else if (typeof sizePerPageList[0] === 'object') {
- currSizePerPage = sizePerPageList[0].value;
- } else {
- currSizePerPage = sizePerPageList[0];
- }
-
- this.state = { currPage, currSizePerPage };
- this.saveToStore(currPage, currSizePerPage);
- }
-
- componentWillReceiveProps(nextProps) {
- let needNewState = false;
- let { currPage, currSizePerPage } = this.state;
- const { page, sizePerPage, pageStartIndex, onPageChange } = nextProps.pagination.options;
-
- if (typeof page !== 'undefined' && currPage !== page) { // user defined page
- currPage = page;
- needNewState = true;
- } else if (nextProps.isDataChanged) { // user didn't defined page but data change
- currPage = typeof pageStartIndex !== 'undefined' ? pageStartIndex : Const.PAGE_START_INDEX;
- needNewState = true;
- }
-
- if (typeof sizePerPage !== 'undefined') {
- currSizePerPage = sizePerPage;
- needNewState = true;
- }
-
- this.saveToStore(currPage, currSizePerPage);
-
- if (needNewState) {
- if (onPageChange) {
- onPageChange(currPage, currSizePerPage);
- }
- this.setState(() => ({ currPage, currSizePerPage }));
- }
- }
-
- saveToStore(page, sizePerPage) {
- this.props.store.page = page;
- this.props.store.sizePerPage = sizePerPage;
- }
-
- isRemote() {
- const { remote } = this.props;
- return remote === true || (typeof remote === 'object' && remote.pagination);
- }
-
- handleChangePage(currPage) {
- const { currSizePerPage } = this.state;
- const { pagination: { options }, onRemotePageChange } = this.props;
- this.saveToStore(currPage, currSizePerPage);
-
- if (options.onPageChange) {
- options.onPageChange(currPage, currSizePerPage);
- }
- if (this.isRemote()) {
- onRemotePageChange();
- return;
- }
- this.setState(() => {
- return {
- currPage
- };
- });
- }
-
- handleChangeSizePerPage(currSizePerPage, currPage) {
- const { pagination: { options }, onRemotePageChange } = this.props;
- this.saveToStore(currPage, currSizePerPage);
-
- if (options.onSizePerPageChange) {
- options.onSizePerPageChange(currSizePerPage, currPage);
- }
- if (this.isRemote()) {
- onRemotePageChange();
- return;
- }
- this.setState(() => {
- return {
- currPage,
- currSizePerPage
- };
- });
- }
-
- render() {
- const { pagination: { options }, store, baseElement } = this.props;
- const { currPage, currSizePerPage } = this.state;
- const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
- Const.With_FIRST_AND_LAST : options.withFirstAndLast;
- const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
- Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
- const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
- Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
- const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
- Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
- const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
- Const.PAGE_START_INDEX : options.pageStartIndex;
-
- const data = this.isRemote() ?
- this.props.data :
- getByCurrPage(store)(currPage, currSizePerPage, pageStartIndex);
-
- const base = baseElement({
- ...this.props,
- key: 'table',
- data
- });
-
- return [
- base,
- { fragment }
);
- }
- };
-
- describe('default pagination', () => {
- const props = createTableProps();
-
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering correctly', () => {
- expect(wrapper.length).toBe(1);
- });
-
- it('should initializing state correctly', () => {
- expect(instance.state.currPage).toBeDefined();
- expect(instance.state.currPage).toEqual(Const.PAGE_START_INDEX);
- expect(instance.state.currSizePerPage).toBeDefined();
- expect(instance.state.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
- });
-
- it('should saving page and sizePerPage to store correctly', () => {
- expect(props.store.page).toBe(instance.state.currPage);
- expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
- });
-
- it('should rendering BootstraTable correctly', () => {
- const table = wrapper.find(BootstrapTable);
- expect(table.length).toBe(1);
- expect(table.prop('data').length).toEqual(instance.state.currSizePerPage);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('dataSize')).toEqual(props.store.data.length);
- expect(pagination.prop('currPage')).toEqual(instance.state.currPage);
- expect(pagination.prop('currSizePerPage')).toEqual(instance.state.currSizePerPage);
- expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
- expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
- expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
- expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
- expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
- expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
- expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
- expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
- expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
- expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
- expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
- expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
- expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
- expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
- expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
- expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
- });
-
- describe('componentWillReceiveProps', () => {
- let nextProps;
- beforeEach(() => {
- nextProps = createTableProps();
- });
-
- describe('when options.page is existing', () => {
- beforeEach(() => {
- nextProps.pagination.options.page = 2;
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should setting currPage state correctly', () => {
- expect(instance.state.currPage).toEqual(nextProps.pagination.options.page);
- });
-
- it('should saving store.page correctly', () => {
- expect(props.store.page).toEqual(instance.state.currPage);
- });
- });
-
- it('should not setting currPage state if options.page not existing', () => {
- const { currPage } = instance.state;
- instance.componentWillReceiveProps(nextProps);
- expect(instance.state.currPage).toBe(currPage);
- });
-
- describe('when options.sizePerPage is existing', () => {
- beforeEach(() => {
- nextProps.pagination.options.sizePerPage = 20;
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should setting currSizePerPage state correctly', () => {
- expect(instance.state.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
- });
-
- it('should saving store.sizePerPage correctly', () => {
- expect(props.store.sizePerPage).toEqual(instance.state.currSizePerPage);
- });
- });
-
- it('should not setting currSizePerPage state if options.sizePerPage not existing', () => {
- const { currSizePerPage } = instance.state;
- instance.componentWillReceiveProps(nextProps);
- expect(instance.state.currSizePerPage).toBe(currSizePerPage);
- });
-
- describe('when nextProps.isDataChanged is true', () => {
- beforeEach(() => {
- nextProps.isDataChanged = true;
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should setting currPage state correctly', () => {
- expect(instance.state.currPage).toBe(Const.PAGE_START_INDEX);
- });
-
- it('should saving store.page correctly', () => {
- expect(props.store.page).toEqual(instance.state.currPage);
- });
- });
-
- describe('when nextProps.isDataChanged is true and options.pageStartIndex is existing', () => {
- beforeEach(() => {
- nextProps.isDataChanged = true;
- nextProps.pagination.options.pageStartIndex = 0;
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should setting currPage state correctly', () => {
- expect(instance.state.currPage).toBe(nextProps.pagination.options.pageStartIndex);
- });
-
- it('should saving store.page correctly', () => {
- expect(props.store.page).toEqual(instance.state.currPage);
- });
- });
- });
- });
-
- describe('when options.page is defined', () => {
- const page = 3;
- const props = createTableProps({ options: { page } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should setting correct state.currPage', () => {
- expect(instance.state.currPage).toEqual(page);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('currPage')).toEqual(page);
- });
- });
-
- describe('when options.sizePerPage is defined', () => {
- const sizePerPage = 30;
- const props = createTableProps({ options: { sizePerPage } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should setting correct state.currPage', () => {
- expect(instance.state.currSizePerPage).toEqual(sizePerPage);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage);
- });
- });
-
- describe('when options.totalSize is defined', () => {
- const totalSize = 100;
- const props = createTableProps({ options: { totalSize } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('dataSize')).toEqual(totalSize);
- });
- });
-
- describe('when options.pageStartIndex is defined', () => {
- const pageStartIndex = -1;
- const props = createTableProps({ options: { pageStartIndex } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should setting correct state.currPage', () => {
- expect(instance.state.currPage).toEqual(pageStartIndex);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('pageStartIndex')).toEqual(pageStartIndex);
- });
- });
-
- describe('when options.sizePerPageList is defined', () => {
- const sizePerPageList = [10, 40];
- const props = createTableProps({ options: { sizePerPageList } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('sizePerPageList')).toEqual(sizePerPageList);
- });
- });
-
- describe('when options.paginationSize is defined', () => {
- const paginationSize = 10;
- const props = createTableProps({ options: { paginationSize } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('paginationSize')).toEqual(paginationSize);
- });
- });
-
- describe('when options.withFirstAndLast is defined', () => {
- const withFirstAndLast = false;
- const props = createTableProps({ options: { withFirstAndLast } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('withFirstAndLast')).toEqual(withFirstAndLast);
- });
- });
-
- describe('when options.alwaysShowAllBtns is defined', () => {
- const alwaysShowAllBtns = true;
- const props = createTableProps({ options: { alwaysShowAllBtns } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('alwaysShowAllBtns')).toEqual(alwaysShowAllBtns);
- });
- });
-
- describe('when options.firstPageText is defined', () => {
- const firstPageText = '1st';
- const props = createTableProps({ options: { firstPageText } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('firstPageText')).toEqual(firstPageText);
- });
- });
-
- describe('when options.prePageText is defined', () => {
- const prePageText = 'PRE';
- const props = createTableProps({ options: { prePageText } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('prePageText')).toEqual(prePageText);
- });
- });
-
- describe('when options.nextPageText is defined', () => {
- const nextPageText = 'NEXT';
- const props = createTableProps({ options: { nextPageText } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('nextPageText')).toEqual(nextPageText);
- });
- });
-
- describe('when options.lastPageText is defined', () => {
- const lastPageText = 'nth';
- const props = createTableProps({ options: { lastPageText } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('lastPageText')).toEqual(lastPageText);
- });
- });
-
- describe('when options.firstPageTitle is defined', () => {
- const firstPageTitle = '1st';
- const props = createTableProps({ options: { firstPageTitle } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('firstPageTitle')).toEqual(firstPageTitle);
- });
- });
-
- describe('when options.prePageTitle is defined', () => {
- const prePageTitle = 'PRE';
- const props = createTableProps({ options: { prePageTitle } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('prePageTitle')).toEqual(prePageTitle);
- });
- });
-
- describe('when options.nextPageTitle is defined', () => {
- const nextPageTitle = 'NEXT';
- const props = createTableProps({ options: { nextPageTitle } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('nextPageTitle')).toEqual(nextPageTitle);
- });
- });
-
- describe('when options.lastPageTitle is defined', () => {
- const lastPageTitle = 'nth';
- const props = createTableProps({ options: { lastPageTitle } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('lastPageTitle')).toEqual(lastPageTitle);
- });
- });
-
- describe('when options.hideSizePerPage is defined', () => {
- const hideSizePerPage = true;
- const props = createTableProps({ options: { hideSizePerPage } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('hideSizePerPage')).toEqual(hideSizePerPage);
- });
- });
-
- describe('when options.hidePageListOnlyOnePage is defined', () => {
- const hidePageListOnlyOnePage = true;
- const props = createTableProps({ options: { hidePageListOnlyOnePage } });
- beforeEach(() => {
- createPaginationWrapper(props);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(wrapper.length).toBe(1);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('hidePageListOnlyOnePage')).toEqual(hidePageListOnlyOnePage);
- });
- });
-
- describe('handleChangePage', () => {
- const newPage = 3;
- const props = createTableProps({ options: { onPageChange: sinon.stub() } });
- beforeEach(() => {
- createPaginationWrapper(props, false);
- instance.handleChangePage(newPage);
- });
-
- afterEach(() => {
- props.pagination.options.onPageChange.reset();
- });
-
- it('should setting state.currPage correctly', () => {
- expect(instance.state.currPage).toEqual(newPage);
- });
-
- it('should calling options.onPageChange correctly when it is defined', () => {
- const { onPageChange } = props.pagination.options;
- expect(onPageChange.calledOnce).toBeTruthy();
- expect(onPageChange.calledWith(newPage, instance.state.currSizePerPage)).toBeTruthy();
- });
-
- it('should saving page and sizePerPage to store correctly', () => {
- expect(props.store.page).toBe(newPage);
- expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
- });
-
- describe('when pagination remote is enable', () => {
- beforeEach(() => {
- props.remote = true;
- createPaginationWrapper(props, false);
- onRemotePageChangeCB.reset();
- instance.handleChangePage(newPage);
- });
-
- it('should not setting state.currPage', () => {
- expect(instance.state.currPage).not.toEqual(newPage);
- });
-
- it('should calling props.onRemotePageChange correctly', () => {
- expect(onRemotePageChangeCB.calledOnce).toBeTruthy();
- });
- });
- });
-
- describe('handleChangeSizePerPage', () => {
- const newPage = 2;
- const newSizePerPage = 30;
- const props = createTableProps({ options: { onSizePerPageChange: sinon.stub() } });
- beforeEach(() => {
- createPaginationWrapper(props, false);
- instance.handleChangeSizePerPage(newSizePerPage, newPage);
- });
-
- afterEach(() => {
- props.pagination.options.onSizePerPageChange.reset();
- });
-
- it('should setting state.currPage and state.currSizePerPage correctly', () => {
- expect(instance.state.currPage).toEqual(newPage);
- expect(instance.state.currSizePerPage).toEqual(newSizePerPage);
- });
-
- it('should calling options.onSizePerPageChange correctly when it is defined', () => {
- const { onSizePerPageChange } = props.pagination.options;
- expect(onSizePerPageChange.calledOnce).toBeTruthy();
- expect(onSizePerPageChange.calledWith(newSizePerPage, newPage)).toBeTruthy();
- });
-
- it('should saving page and sizePerPage to store correctly', () => {
- expect(props.store.page).toBe(newPage);
- expect(props.store.sizePerPage).toBe(newSizePerPage);
- });
-
- describe('when pagination remote is enable', () => {
- beforeEach(() => {
- props.remote = true;
- createPaginationWrapper(props, false);
- onRemotePageChangeCB.reset();
- instance.handleChangeSizePerPage(newSizePerPage, newPage);
- });
-
- it('should not setting state.currPage', () => {
- expect(instance.state.currPage).not.toEqual(newPage);
- expect(instance.state.currSizePerPage).not.toEqual(newSizePerPage);
- });
-
- it('should calling props.onRemotePageChange correctly', () => {
- expect(onRemotePageChangeCB.calledOnce).toBeTruthy();
- });
- });
- });
-
- describe('isRemote', () => {
- let result;
- describe('when options.remote is true', () => {
- const props = createTableProps();
- props.remote = true;
-
- beforeEach(() => {
- createPaginationWrapper(props, false);
- result = instance.isRemote();
- });
-
- it('should return true', () => {
- expect(result).toBeTruthy();
- });
- });
-
- describe('when options.remote is false', () => {
- const props = createTableProps();
- props.remote = false;
-
- beforeEach(() => {
- createPaginationWrapper(props, false);
- result = instance.isRemote();
- });
-
- it('should return false', () => {
- expect(result).toBeFalsy();
- });
- });
-
- describe('when options.remote.pagination is defined as true', () => {
- const props = createTableProps();
- props.remote = {};
- props.remote.pagination = true;
-
- beforeEach(() => {
- createPaginationWrapper(props, false);
- result = instance.isRemote();
- });
-
- it('should return true', () => {
- expect(result).toBeTruthy();
- });
- });
-
- describe('when options.remote.pagination is defined as false', () => {
- const props = createTableProps();
- props.remote = {};
- props.remote.pagination = false;
-
- beforeEach(() => {
- createPaginationWrapper(props, false);
- result = instance.isRemote();
- });
-
- it('should return false', () => {
- expect(result).toBeFalsy();
- });
- });
- });
-});
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
deleted file mode 100644
index f3e6f0643..000000000
--- a/packages/react-bootstrap-table2/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "name": "react-bootstrap-table2",
- "version": "0.0.1",
- "description": "Rebuilt for react-bootstrap-table",
- "main": "src/index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "author": "",
- "license": "ISC"
-}
diff --git a/packages/react-bootstrap-table2/src/body.js b/packages/react-bootstrap-table2/src/body.js
deleted file mode 100644
index b0182da0c..000000000
--- a/packages/react-bootstrap-table2/src/body.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/* eslint react/prop-types: 0 */
-/* eslint react/require-default-props: 0 */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import cs from 'classnames';
-
-import _ from './utils';
-import Row from './row';
-import RowSection from './row-section';
-import Const from './const';
-
-const Body = (props) => {
- const {
- columns,
- data,
- keyField,
- isEmpty,
- noDataIndication,
- visibleColumnSize,
- cellEdit,
- selectRow,
- selectedRowKeys,
- rowStyle,
- rowClasses,
- rowEvents
- } = props;
-
- const {
- bgColor,
- nonSelectable
- } = selectRow;
-
- let content;
-
- if (isEmpty) {
- const indication = _.isFunction(noDataIndication) ? noDataIndication() : noDataIndication;
- content = |
- );
- });
- }
-
- return (
- { content }
- );
-};
-
-Body.propTypes = {
- keyField: PropTypes.string.isRequired,
- data: PropTypes.array.isRequired,
- columns: PropTypes.array.isRequired,
- selectRow: PropTypes.object,
- selectedRowKeys: PropTypes.array
-};
-
-export default Body;
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
deleted file mode 100644
index 19e7afa02..000000000
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/* eslint arrow-body-style: 0 */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import cs from 'classnames';
-
-import Header from './header';
-import Caption from './caption';
-import Body from './body';
-import PropsBaseResolver from './props-resolver';
-import Const from './const';
-import { isSelectedAll } from './store/selection';
-
-class BootstrapTable extends PropsBaseResolver(Component) {
- constructor(props) {
- super(props);
- this.validateProps();
-
- this.state = {
- data: props.data
- };
- }
-
- componentWillReceiveProps(nextProps) {
- this.setState({
- data: nextProps.data
- });
- }
-
- render() {
- const { loading, overlay } = this.props;
- const table = this.renderTable();
- if (loading && overlay) {
- const LoadingOverlay = overlay(table, loading);
- return { props.children }
- );
-};
-
-Caption.propTypes = {
- children: PropTypes.oneOfType([
- PropTypes.node,
- PropTypes.string
- ])
-};
-
-export default Caption;
diff --git a/packages/react-bootstrap-table2/src/cell-edit/editing-cell.js b/packages/react-bootstrap-table2/src/cell-edit/editing-cell.js
deleted file mode 100644
index d35396027..000000000
--- a/packages/react-bootstrap-table2/src/cell-edit/editing-cell.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/* eslint arrow-body-style: 0 */
-/* eslint react/prop-types: 0 */
-/* eslint no-return-assign: 0 */
-/* eslint class-methods-use-this: 0 */
-/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
-import React, { Component } from 'react';
-import cs from 'classnames';
-import PropTypes from 'prop-types';
-
-import _ from '../utils';
-import Const from '../const';
-import TextEditor from './text-editor';
-import EditorIndicator from './editor-indicator';
-
-class EditingCell extends Component {
- constructor(props) {
- super(props);
- this.indicatorTimer = null;
- this.clearTimer = this.clearTimer.bind(this);
- this.handleBlur = this.handleBlur.bind(this);
- this.handleClick = this.handleClick.bind(this);
- this.handleKeyDown = this.handleKeyDown.bind(this);
- this.beforeComplete = this.beforeComplete.bind(this);
- this.state = {
- invalidMessage: null
- };
- }
-
- componentWillReceiveProps({ message }) {
- if (_.isDefined(message)) {
- this.createTimer();
- this.setState(() => {
- return { invalidMessage: message };
- });
- }
- }
-
- componentWillUnmount() {
- this.clearTimer();
- }
-
- clearTimer() {
- if (this.indicatorTimer) {
- clearTimeout(this.indicatorTimer);
- }
- }
-
- createTimer() {
- this.clearTimer();
- const { timeToCloseMessage, onErrorMessageDisappear } = this.props;
- this.indicatorTimer = _.sleep(() => {
- this.setState(() => {
- return { invalidMessage: null };
- });
- if (_.isFunction(onErrorMessageDisappear)) onErrorMessageDisappear();
- }, timeToCloseMessage);
- }
-
- beforeComplete(row, column, newValue) {
- const { onUpdate } = this.props;
- if (_.isFunction(column.validator)) {
- const validateForm = column.validator(newValue, row, column);
- if (_.isObject(validateForm) && !validateForm.valid) {
- this.setState(() => {
- return { invalidMessage: validateForm.message };
- });
- this.createTimer();
- return;
- }
- }
- onUpdate(row, column, newValue);
- }
-
- handleBlur() {
- const { onEscape, blurToSave, row, column } = this.props;
- if (blurToSave) {
- const value = this.editor.text.value;
- if (!_.isDefined(value)) {
- // TODO: for other custom or embed editor
- }
- this.beforeComplete(row, column, value);
- } else {
- onEscape();
- }
- }
-
- handleKeyDown(e) {
- const { onEscape, row, column } = this.props;
- if (e.keyCode === 27) { // ESC
- onEscape();
- } else if (e.keyCode === 13) { // ENTER
- const value = e.currentTarget.value;
- if (!_.isDefined(value)) {
- // TODO: for other custom or embed editor
- }
- this.beforeComplete(row, column, value);
- }
- }
-
- handleClick(e) {
- if (e.target.tagName !== 'TD') {
- // To avoid the row selection event be triggered,
- // When user define selectRow.clickToSelect and selectRow.clickToEdit
- // We shouldn't trigger selection event even if user click on the cell editor(input)
- e.stopPropagation();
- }
- }
-
- render() {
- const { invalidMessage } = this.state;
- const { row, column, className, style } = this.props;
- const { dataField } = column;
-
- const value = _.get(row, dataField);
- const editorAttrs = {
- onKeyDown: this.handleKeyDown,
- onBlur: this.handleBlur
- };
-
- const hasError = _.isDefined(invalidMessage);
- const editorClass = hasError ? cs('animated', 'shake') : null;
- return (
-
- this.editor = node }
- defaultValue={ value }
- className={ editorClass }
- { ...editorAttrs }
- />
- { hasError ?
- );
- }
-}
-
-EditingCell.propTypes = {
- row: PropTypes.object.isRequired,
- column: PropTypes.object.isRequired,
- onUpdate: PropTypes.func.isRequired,
- onEscape: PropTypes.func.isRequired,
- timeToCloseMessage: PropTypes.number,
- className: PropTypes.string,
- style: PropTypes.object
-};
-
-EditingCell.defaultProps = {
- timeToCloseMessage: Const.TIME_TO_CLOSE_MESSAGE,
- className: null,
- style: {}
-};
-
-export default EditingCell;
diff --git a/packages/react-bootstrap-table2/src/cell-edit/editor-indicator.js b/packages/react-bootstrap-table2/src/cell-edit/editor-indicator.js
deleted file mode 100644
index c19819d64..000000000
--- a/packages/react-bootstrap-table2/src/cell-edit/editor-indicator.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint no-return-assign: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const EditorIndicator = ({ invalidMessage }) =>
- (
-
- { invalidMessage }
-
- );
-
-EditorIndicator.propTypes = {
- invalidMessage: PropTypes.string
-};
-
-EditorIndicator.defaultProps = {
- invalidMessage: null
-};
-export default EditorIndicator;
diff --git a/packages/react-bootstrap-table2/src/cell-edit/text-editor.js b/packages/react-bootstrap-table2/src/cell-edit/text-editor.js
deleted file mode 100644
index 52233e7f4..000000000
--- a/packages/react-bootstrap-table2/src/cell-edit/text-editor.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/* eslint no-return-assign: 0 */
-import React, { Component } from 'react';
-import cs from 'classnames';
-import PropTypes from 'prop-types';
-
-class TextEditor extends Component {
- componentDidMount() {
- const { defaultValue } = this.props;
- this.text.value = defaultValue;
- this.text.focus();
- }
-
- render() {
- const { defaultValue, className, ...rest } = this.props;
- const editorClass = cs('form-control editor edit-text', className);
- return (
- { content }
- );
- }
-}
-
-Cell.propTypes = {
- row: PropTypes.object.isRequired,
- rowIndex: PropTypes.number.isRequired,
- column: PropTypes.object.isRequired,
- columnIndex: PropTypes.number.isRequired
-};
-
-export default Cell;
diff --git a/packages/react-bootstrap-table2/src/const.js b/packages/react-bootstrap-table2/src/const.js
deleted file mode 100644
index e9ebaa640..000000000
--- a/packages/react-bootstrap-table2/src/const.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
- SORT_ASC: 'asc',
- SORT_DESC: 'desc',
- UNABLE_TO_CELL_EDIT: 'none',
- CLICK_TO_CELL_EDIT: 'click',
- DBCLICK_TO_CELL_EDIT: 'dbclick',
- TIME_TO_CLOSE_MESSAGE: 3000,
- ROW_SELECT_SINGLE: 'radio',
- ROW_SELECT_MULTIPLE: 'checkbox',
- ROW_SELECT_DISABLED: 'ROW_SELECT_DISABLED',
- CHECKBOX_STATUS_CHECKED: 'checked',
- CHECKBOX_STATUS_INDETERMINATE: 'indeterminate',
- CHECKBOX_STATUS_UNCHECKED: 'unchecked',
- DELAY_FOR_DBCLICK: 200
-};
diff --git a/packages/react-bootstrap-table2/src/container.js b/packages/react-bootstrap-table2/src/container.js
deleted file mode 100644
index 8fb7959cf..000000000
--- a/packages/react-bootstrap-table2/src/container.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/* eslint no-return-assign: 0 */
-/* eslint react/prop-types: 0 */
-import React, { Component } from 'react';
-import Store from './store';
-
-import {
- wrapWithCellEdit,
- wrapWithSelection,
- wrapWithFilter,
- wrapWithSort,
- wrapWithPagination
-} from './table-factory';
-
-import _ from './utils';
-
-const withDataStore = Base =>
- class BootstrapTableContainer extends Component {
- constructor(props) {
- super(props);
- this.store = new Store(props.keyField);
- this.store.data = props.data;
- this.handleUpdateCell = this.handleUpdateCell.bind(this);
- this.handleRemotePageChange = this.handleRemotePageChange.bind(this);
- this.handleRemoteFilterChange = this.handleRemoteFilterChange.bind(this);
- }
-
- componentWillReceiveProps(nextProps) {
- this.store.data = nextProps.data;
- }
-
- getNewestState(state = {}) {
- return {
- page: this.store.page,
- sizePerPage: this.store.sizePerPage,
- filters: this.store.filters,
- ...state
- };
- }
-
- handleRemotePageChange() {
- this.props.onTableChange('pagination', this.getNewestState());
- }
-
- // refactoring later for isRemotePagination
- handleRemoteFilterChange(isRemotePagination) {
- const newState = {};
- if (isRemotePagination) {
- const options = this.props.pagination.options || {};
- newState.page = _.isDefined(options.pageStartIndex) ? options.pageStartIndex : 1;
- }
- this.props.onTableChange('filter', this.getNewestState(newState));
- }
-
- handleUpdateCell(rowId, dataField, newValue) {
- const { cellEdit } = this.props;
- // handle cell editing internal
- if (!cellEdit.onUpdate) {
- this.store.edit(rowId, dataField, newValue);
- return true;
- }
-
- // handle cell editing external
- const aPromise = cellEdit.onUpdate(rowId, dataField, newValue);
- if (_.isDefined(aPromise) && aPromise !== false) { // TODO: should be a promise here
- aPromise.then((result = true) => {
- const response = result === true ? {} : result;
- if (_.isObject(response)) {
- const { value } = response;
- this.store.edit(rowId, dataField, value || newValue);
- this.cellEditWrapper.completeEditing();
- }
- }).catch((e) => {
- this.cellEditWrapper.updateEditingWithErr(e.message);
- });
- }
- return false;
- }
-
- render() {
- const baseProps = {
- ...this.props,
- store: this.store
- };
-
- if (this.props.cellEdit) {
- return wrapWithCellEdit({
- ref: node => this.cellEditWrapper = node,
- onUpdateCell: this.handleUpdateCell,
- ...baseProps
- });
- } else if (this.props.selectRow) {
- return wrapWithSelection(baseProps);
- } else if (this.props.filter) {
- return wrapWithFilter({
- ...baseProps,
- onRemoteFilterChange: this.handleRemoteFilterChange,
- onRemotePageChange: this.handleRemotePageChange
- });
- } else if (this.props.columns.filter(col => col.sort).length > 0) {
- return wrapWithSort(baseProps);
- } else if (this.props.pagination) {
- return wrapWithPagination({
- ...baseProps,
- onRemotePageChange: this.handleRemotePageChange
- });
- }
-
- return React.createElement(Base, baseProps);
- }
- };
-
-export default withDataStore;
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
deleted file mode 100644
index d5dd47b92..000000000
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/* eslint react/require-default-props: 0 */
-import React from 'react';
-import cs from 'classnames';
-import PropTypes from 'prop-types';
-
-import Const from './const';
-import SortSymbol from './sort/symbol';
-import SortCaret from './sort/caret';
-import _ from './utils';
-
-
-const HeaderCell = (props) => {
- const {
- column,
- index,
- onSort,
- sorting,
- sortOrder,
- isLastSorting,
- onFilter
- } = props;
-
- const {
- text,
- sort,
- filter,
- hidden,
- headerTitle,
- headerAlign,
- headerFormatter,
- headerEvents,
- headerClasses,
- headerStyle,
- headerAttrs,
- headerSortingClasses,
- headerSortingStyle
- } = column;
-
- const cellAttrs = {
- ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
- ...headerEvents
- };
-
- let sortSymbol;
- let filterElm;
- let cellStyle = {};
- let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses;
-
- if (headerStyle) {
- cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle;
- }
-
- if (headerTitle) {
- cellAttrs.title = _.isFunction(headerTitle) ? headerTitle(column, index) : text;
- }
-
- if (headerAlign) {
- cellStyle.textAlign = _.isFunction(headerAlign) ? headerAlign(column, index) : headerAlign;
- }
-
- if (hidden) {
- cellStyle.display = 'none';
- }
-
- if (sort) {
- const customClick = cellAttrs.onClick;
- cellAttrs.onClick = (e) => {
- onSort(column);
- if (_.isFunction(customClick)) customClick(e);
- };
- cellAttrs.className = cs(cellAttrs.className, 'sortable');
-
- if (sorting) {
- sortSymbol =
-
- {
- (selectRow.mode !== ROW_SELECT_DISABLED && !selectRow.hideSelectColumn)
- ?
-
- );
-};
-
-Header.propTypes = {
- columns: PropTypes.array.isRequired,
- onSort: PropTypes.func,
- onFilter: PropTypes.func,
- sortField: PropTypes.string,
- sortOrder: PropTypes.string,
- selectRow: PropTypes.object
-};
-
-export default Header;
diff --git a/packages/react-bootstrap-table2/src/index.js b/packages/react-bootstrap-table2/src/index.js
deleted file mode 100644
index db955bdea..000000000
--- a/packages/react-bootstrap-table2/src/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import BootstrapTable from './bootstrap-table';
-import withDataStore from './container';
-
-export default withDataStore(BootstrapTable);
-
diff --git a/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
deleted file mode 100644
index e963f5117..000000000
--- a/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default ExtendBase =>
- class ColumnResolver extends ExtendBase {
- visibleColumnSize() {
- return this.props.columns.length;
- }
- };
diff --git a/packages/react-bootstrap-table2/src/props-resolver/index.js b/packages/react-bootstrap-table2/src/props-resolver/index.js
deleted file mode 100644
index 1aedc64f9..000000000
--- a/packages/react-bootstrap-table2/src/props-resolver/index.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import ColumnResolver from './column-resolver';
-import Const from '../const';
-import _ from '../utils';
-
-export default ExtendBase =>
- class TableResolver extends ColumnResolver(ExtendBase) {
- validateProps() {
- const { columns, keyField } = this.props;
- if (!keyField) {
- throw new Error('Please specify a field as key via keyField');
- }
- if (this.visibleColumnSize(columns) <= 0) {
- throw new Error('No any visible columns detect');
- }
- }
-
- isEmpty() {
- return this.props.data.length === 0;
- }
-
- resolveCellEditProps(options = { currEditCell: null }) {
- const { cellEdit } = this.props;
- const nonEditableRows =
- (cellEdit && _.isFunction(cellEdit.nonEditableRows)) ? cellEdit.nonEditableRows() : [];
- const cellEditInfo = {
- ...options.currEditCell,
- nonEditableRows
- };
-
- if (_.isDefined(cellEdit)) {
- return {
- ...cellEdit,
- ...cellEditInfo,
- ...options
- };
- }
- return {
- mode: Const.UNABLE_TO_CELL_EDIT,
- ...cellEditInfo
- };
- }
-
- /**
- * props resolver for cell selection
- * @param {Object} options - addtional options like callback which are about to merge into props
- *
- * @returns {Object} result - props for cell selections
- * @returns {String} result.mode - input type of row selection or disabled.
- */
- resolveSelectRowProps(options) {
- const { selectRow } = this.props;
- const { ROW_SELECT_DISABLED } = Const;
-
- if (_.isDefined(selectRow)) {
- return {
- ...selectRow,
- ...options
- };
- }
-
- return {
- mode: ROW_SELECT_DISABLED
- };
- }
-
- /**
- * props resolver for header cell selection
- * @param {Object} options - addtional options like callback which are about to merge into props
- *
- * @returns {Object} result - props for cell selections
- * @returns {String} result.mode - input type of row selection or disabled.
- * @returns {String} result.checkedStatus - checkbox status depending on selected rows counts
- */
- resolveSelectRowPropsForHeader(options = {}) {
- const { selectRow } = this.props;
- const { allRowsSelected, selected = [], ...rest } = options;
- const {
- ROW_SELECT_DISABLED, CHECKBOX_STATUS_CHECKED,
- CHECKBOX_STATUS_INDETERMINATE, CHECKBOX_STATUS_UNCHECKED
- } = Const;
-
- if (_.isDefined(selectRow)) {
- let checkedStatus;
-
- // checkbox status depending on selected rows counts
- if (allRowsSelected) checkedStatus = CHECKBOX_STATUS_CHECKED;
- else if (selected.length === 0) checkedStatus = CHECKBOX_STATUS_UNCHECKED;
- else checkedStatus = CHECKBOX_STATUS_INDETERMINATE;
-
- return {
- ...selectRow,
- ...rest,
- checkedStatus
- };
- }
-
- return {
- mode: ROW_SELECT_DISABLED
- };
- }
- };
diff --git a/packages/react-bootstrap-table2/src/row-section.js b/packages/react-bootstrap-table2/src/row-section.js
deleted file mode 100644
index f0c6efd92..000000000
--- a/packages/react-bootstrap-table2/src/row-section.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const RowSection = ({ content, colSpan }) => (
-
-
- { content }
-
-
-);
-
-RowSection.propTypes = {
- content: PropTypes.any,
- colSpan: PropTypes.number
-};
-
-RowSection.defaultProps = {
- content: null,
- colSpan: 1
-};
-
-export default RowSection;
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
deleted file mode 100644
index bc7e0c522..000000000
--- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/* eslint
- react/require-default-props: 0
- jsx-a11y/no-noninteractive-element-interactions: 0
-*/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Const from '../const';
-
-export default class SelectionCell extends Component {
- static propTypes = {
- mode: PropTypes.string.isRequired,
- rowKey: PropTypes.any,
- selected: PropTypes.bool,
- onRowSelect: PropTypes.func,
- disabled: PropTypes.bool,
- rowIndex: PropTypes.number
- }
-
- constructor() {
- super();
- this.handleRowClick = this.handleRowClick.bind(this);
- }
-
- shouldComponentUpdate(nextProps) {
- const { selected } = this.props;
-
- return nextProps.selected !== selected;
- }
-
- handleRowClick() {
- const {
- mode: inputType,
- rowKey,
- selected,
- onRowSelect,
- disabled,
- rowIndex
- } = this.props;
-
- if (disabled) return;
-
- const checked = inputType === Const.ROW_SELECT_SINGLE
- ? true
- : !selected;
-
- onRowSelect(rowKey, checked, rowIndex);
- }
-
- render() {
- const {
- mode: inputType,
- selected,
- disabled
- } = this.props;
-
- return (
-
-
- );
- }
-}
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
deleted file mode 100644
index a2c695626..000000000
--- a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/* eslint react/require-default-props: 0 */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Const from '../const';
-
-export const CheckBox = ({ checked, indeterminate }) => (
-
-
- );
- }
-}
diff --git a/packages/react-bootstrap-table2/src/row-selection/wrapper.js b/packages/react-bootstrap-table2/src/row-selection/wrapper.js
deleted file mode 100644
index 3a73e9582..000000000
--- a/packages/react-bootstrap-table2/src/row-selection/wrapper.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/* eslint arrow-body-style: 0 */
-/* eslint react/prop-types: 0 */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { selectionElement } from '../table-factory';
-
-import Const from '../const';
-import {
- isAnySelectedRow,
- selectableKeys,
- unSelectableKeys,
- getSelectedRows
-} from '../store/selection';
-import { getRowByRowId } from '../store/rows';
-
-class RowSelectionWrapper extends Component {
- constructor(props) {
- super(props);
- this.handleRowSelect = this.handleRowSelect.bind(this);
- this.handleAllRowsSelect = this.handleAllRowsSelect.bind(this);
- this.state = {
- selectedRowKeys: props.store.selected
- };
- }
-
- /**
- * row selection handler
- * @param {String} rowKey - row key of what was selected.
- * @param {Boolean} checked - next checked status of input button.
- */
- handleRowSelect(rowKey, checked, rowIndex) {
- const { selectRow: { mode, onSelect }, store } = this.props;
- const { ROW_SELECT_SINGLE } = Const;
-
- let currSelected = [...store.selected];
-
- if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
- currSelected = [rowKey];
- } else if (checked) { // when select mode is checkbox
- currSelected.push(rowKey);
- } else {
- currSelected = currSelected.filter(value => value !== rowKey);
- }
-
- store.selected = currSelected;
-
- if (onSelect) {
- const row = getRowByRowId(store)(rowKey);
- onSelect(row, checked, rowIndex);
- }
-
- this.setState(() => ({
- selectedRowKeys: currSelected
- }));
- }
-
- /**
- * handle all rows selection on header cell by store.selected or given specific result.
- * @param {Boolean} option - customized result for all rows selection
- */
- handleAllRowsSelect(option) {
- const { store, selectRow: {
- onSelectAll,
- nonSelectable
- } } = this.props;
- const selected = isAnySelectedRow(store)(nonSelectable);
-
- // set next status of all row selected by store.selected or customizing by user.
- const result = option || !selected;
-
- const currSelected = result ?
- selectableKeys(store)(nonSelectable) :
- unSelectableKeys(store)(nonSelectable);
-
-
- store.selected = currSelected;
-
- if (onSelectAll) {
- onSelectAll(result, getSelectedRows(store));
- }
-
- this.setState(() => ({
- selectedRowKeys: currSelected
- }));
- }
-
- render() {
- return selectionElement({
- ...this.props,
- onRowSelect: this.handleRowSelect,
- onAllRowsSelect: this.handleAllRowsSelect
- });
- }
-}
-
-RowSelectionWrapper.propTypes = {
- store: PropTypes.object.isRequired
-};
-
-export default RowSelectionWrapper;
diff --git a/packages/react-bootstrap-table2/src/row.js b/packages/react-bootstrap-table2/src/row.js
deleted file mode 100644
index b1dea9c06..000000000
--- a/packages/react-bootstrap-table2/src/row.js
+++ /dev/null
@@ -1,167 +0,0 @@
-/* eslint react/prop-types: 0 */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import _ from './utils';
-import Cell from './cell';
-import SelectionCell from './row-selection/selection-cell';
-import EditingCell from './cell-edit/editing-cell';
-import Const from './const';
-
-class Row extends Component {
- constructor(props) {
- super(props);
- this.clickNum = 0;
- this.handleRowClick = this.handleRowClick.bind(this);
- }
-
- handleRowClick(e) {
- const {
- row,
- selected,
- keyField,
- selectable,
- rowIndex,
- selectRow: {
- onRowSelect,
- clickToEdit
- },
- cellEdit: { mode },
- attrs
- } = this.props;
-
- const clickFn = () => {
- if (attrs.onClick) {
- attrs.onClick(e);
- }
- if (selectable) {
- const key = _.get(row, keyField);
- onRowSelect(key, !selected, rowIndex);
- }
- };
-
- if (mode === Const.DBCLICK_TO_CELL_EDIT && clickToEdit) {
- this.clickNum += 1;
- _.debounce(() => {
- if (this.clickNum === 1) {
- clickFn();
- }
- this.clickNum = 0;
- }, Const.DELAY_FOR_DBCLICK)();
- } else {
- clickFn();
- }
- }
-
- render() {
- const {
- row,
- columns,
- keyField,
- rowIndex,
- className,
- style,
- attrs,
- cellEdit,
- selected,
- selectRow,
- selectable,
- editable: editableRow
- } = this.props;
-
- const {
- mode,
- onStart,
- ridx: editingRowIdx,
- cidx: editingColIdx,
- ...rest
- } = cellEdit;
-
- const key = _.get(row, keyField);
- const { clickToSelect, hideSelectColumn } = selectRow;
-
- const trAttrs = { ...attrs };
- if (clickToSelect) {
- trAttrs.onClick = this.handleRowClick;
- }
-
- return (
-
- {
- (selectRow.mode !== Const.ROW_SELECT_DISABLED && !hideSelectColumn)
- ? (
- |
- );
- })
- }
-
- );
- }
-}
-
-Row.propTypes = {
- row: PropTypes.object.isRequired,
- rowIndex: PropTypes.number.isRequired,
- columns: PropTypes.array.isRequired,
- style: PropTypes.object,
- className: PropTypes.string,
- attrs: PropTypes.object
-};
-
-Row.defaultProps = {
- editable: true,
- style: {},
- className: null,
- attrs: {}
-};
-
-export default Row;
diff --git a/packages/react-bootstrap-table2/src/sort/caret.js b/packages/react-bootstrap-table2/src/sort/caret.js
deleted file mode 100644
index cc64f9d48..000000000
--- a/packages/react-bootstrap-table2/src/sort/caret.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import cs from 'classnames';
-import PropTypes from 'prop-types';
-
-import Const from '../const';
-
-const SortCaret = ({ order }) => {
- const orderClass = cs('react-bootstrap-table-sort-order', {
- dropup: order === Const.SORT_ASC
- });
- return (
-
-
- );
-};
-
-SortCaret.propTypes = {
- order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired
-};
-export default SortCaret;
diff --git a/packages/react-bootstrap-table2/src/sort/symbol.js b/packages/react-bootstrap-table2/src/sort/symbol.js
deleted file mode 100644
index ecaf3243c..000000000
--- a/packages/react-bootstrap-table2/src/sort/symbol.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-const SortSymbol = () => (
-
-
-
-
-
- );
-
-export default SortSymbol;
diff --git a/packages/react-bootstrap-table2/src/sort/wrapper.js b/packages/react-bootstrap-table2/src/sort/wrapper.js
deleted file mode 100644
index 82f00b208..000000000
--- a/packages/react-bootstrap-table2/src/sort/wrapper.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/* eslint arrow-body-style: 0 */
-/* eslint react/prop-types: 0 */
-/* eslint no-return-assign: 0 */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import { sortableElement } from '../table-factory';
-
-class SortWrapper extends Component {
- constructor(props) {
- super(props);
- this.handleSort = this.handleSort.bind(this);
- }
-
- componentWillMount() {
- const { columns, defaultSorted, store } = this.props;
- // defaultSorted is an array, it's ready to use as multi / single sort
- // when we start to support multi sort, please update following code to use array.forEach
- if (defaultSorted && defaultSorted.length > 0) {
- const dataField = defaultSorted[0].dataField;
- const order = defaultSorted[0].order;
- const column = columns.filter(col => col.dataField === dataField);
- if (column.length > 0) {
- store.sortBy(column[0], order);
- }
- }
- }
-
- componentWillReceiveProps(nextProps) {
- if (nextProps.isDataChanged) {
- const sortedColumn = nextProps.columns.find(
- column => column.dataField === nextProps.store.sortField);
- if (sortedColumn) {
- nextProps.store.sortBy(sortedColumn, nextProps.store.sortOrder);
- }
- }
- }
-
- handleSort(column) {
- const { store } = this.props;
- store.sortBy(column);
-
- this.table.setState({ data: store.data });
- }
-
- render() {
- return sortableElement({
- ...this.props,
- ref: node => this.table = node,
- onSort: this.handleSort,
- data: this.props.store.data
- });
- }
-}
-
-SortWrapper.propTypes = {
- store: PropTypes.object.isRequired
-};
-
-export default SortWrapper;
diff --git a/packages/react-bootstrap-table2/src/store/index.js b/packages/react-bootstrap-table2/src/store/index.js
deleted file mode 100644
index b735f86f6..000000000
--- a/packages/react-bootstrap-table2/src/store/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/* eslint no-underscore-dangle: 0 */
-import _ from '../utils';
-import { sort, nextOrder } from './sort';
-import { getRowByRowId } from './rows';
-
-export default class Store {
- constructor(keyField) {
- this._data = [];
- this._filteredData = [];
- this._keyField = keyField;
- this._sortOrder = undefined;
- this._sortField = undefined;
- this._selected = [];
- this._filters = {};
- this._page = undefined;
- this._sizePerPage = undefined;
- }
-
- edit(rowId, dataField, newValue) {
- const row = getRowByRowId(this)(rowId);
- if (row) _.set(row, dataField, newValue);
- }
-
- sortBy({ dataField, sortFunc }, order) {
- this.sortOrder = nextOrder(this)(dataField, order);
- this.sortField = dataField;
- this.data = sort(this)(sortFunc);
- }
-
- getAllData() {
- return this._data;
- }
-
- get data() {
- if (Object.keys(this._filters).length > 0) {
- return this._filteredData;
- }
- return this._data;
- }
- set data(data) {
- if (Object.keys(this._filters).length > 0) {
- this._filteredData = data;
- } else {
- this._data = (data ? JSON.parse(JSON.stringify(data)) : []);
- }
- }
-
- get filteredData() { return this._filteredData; }
- set filteredData(filteredData) { this._filteredData = filteredData; }
-
- get keyField() { return this._keyField; }
- set keyField(keyField) { this._keyField = keyField; }
-
- get sortOrder() { return this._sortOrder; }
- set sortOrder(sortOrder) { this._sortOrder = sortOrder; }
-
- get page() { return this._page; }
- set page(page) { this._page = page; }
-
- get sizePerPage() { return this._sizePerPage; }
- set sizePerPage(sizePerPage) { this._sizePerPage = sizePerPage; }
-
- get sortField() { return this._sortField; }
- set sortField(sortField) { this._sortField = sortField; }
-
- get selected() { return this._selected; }
- set selected(selected) { this._selected = selected; }
-
- get filters() { return this._filters; }
- set filters(filters) { this._filters = filters; }
-}
diff --git a/packages/react-bootstrap-table2/src/store/rows.js b/packages/react-bootstrap-table2/src/store/rows.js
deleted file mode 100644
index 411512289..000000000
--- a/packages/react-bootstrap-table2/src/store/rows.js
+++ /dev/null
@@ -1,4 +0,0 @@
-
-export const matchRow = (keyField, id) => row => row[keyField] === id;
-
-export const getRowByRowId = ({ data, keyField }) => id => data.find(matchRow(keyField, id));
diff --git a/packages/react-bootstrap-table2/src/store/selection.js b/packages/react-bootstrap-table2/src/store/selection.js
deleted file mode 100644
index 4c6c10a76..000000000
--- a/packages/react-bootstrap-table2/src/store/selection.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import _ from '../utils';
-import { getRowByRowId } from './rows';
-
-export const isSelectedAll = ({ data, selected }) => data.length === selected.length;
-
-export const isAnySelectedRow = ({ selected }) => (skips = []) => {
- if (skips.length === 0) {
- return selected.length > 0;
- }
- return selected.filter(x => !skips.includes(x)).length;
-};
-
-export const selectableKeys = ({ data, keyField }) => (skips = []) => {
- if (skips.length === 0) {
- return data.map(row => _.get(row, keyField));
- }
- return data
- .filter(row => !skips.includes(_.get(row, keyField)))
- .map(row => _.get(row, keyField));
-};
-
-export const unSelectableKeys = ({ selected }) => (skips = []) => {
- if (skips.length === 0) {
- return [];
- }
- return selected.filter(x => skips.includes(x));
-};
-
-export const getSelectedRows = (store) => {
- const getRow = getRowByRowId(store);
- return store.selected.map(k => getRow(k));
-};
-
diff --git a/packages/react-bootstrap-table2/src/store/sort.js b/packages/react-bootstrap-table2/src/store/sort.js
deleted file mode 100644
index a2228bb1e..000000000
--- a/packages/react-bootstrap-table2/src/store/sort.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint no-nested-ternary: 0 */
-/* eslint no-lonely-if: 0 */
-/* eslint no-underscore-dangle: 0 */
-import _ from '../utils';
-import Const from '../const';
-
-function comparator(a, b) {
- let result;
- if (typeof b === 'string') {
- result = b.localeCompare(a);
- } else {
- result = a > b ? -1 : ((a < b) ? 1 : 0);
- }
- return result;
-}
-
-export const sort = ({ data, sortOrder, sortField }) => (sortFunc) => {
- const _data = [...data];
- _data.sort((a, b) => {
- let result;
- let valueA = _.get(a, sortField);
- let valueB = _.get(b, sortField);
- valueA = _.isDefined(valueA) ? valueA : '';
- valueB = _.isDefined(valueB) ? valueB : '';
-
- if (sortFunc) {
- result = sortFunc(valueA, valueB, sortOrder, sortField);
- } else {
- if (sortOrder === Const.SORT_DESC) {
- result = comparator(valueA, valueB);
- } else {
- result = comparator(valueB, valueA);
- }
- }
- return result;
- });
- return _data;
-};
-
-export const nextOrder = store => (field, order) => {
- if (order) return order;
-
- if (field !== store.sortField) {
- return Const.SORT_DESC;
- }
- return store.sortOrder === Const.SORT_DESC ? Const.SORT_ASC : Const.SORT_DESC;
-};
diff --git a/packages/react-bootstrap-table2/src/table-factory.js b/packages/react-bootstrap-table2/src/table-factory.js
deleted file mode 100644
index 10ff86ee9..000000000
--- a/packages/react-bootstrap-table2/src/table-factory.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/* eslint react/prop-types: 0 */
-import React from 'react';
-
-import _ from './utils';
-import BootstrapTable from './bootstrap-table';
-import SortWrapper from './sort/wrapper';
-import RowSelectionWrapper from './row-selection/wrapper';
-import CellEditWrapper from './cell-edit/wrapper';
-
-
-export const wrapWithCellEdit = props =>
- React.createElement(CellEditWrapper, { ...props });
-
-export const wrapWithSelection = props =>
- React.createElement(RowSelectionWrapper, { ...props });
-
-export const wrapWithSort = props =>
- React.createElement(SortWrapper, { ...props });
-
-export const pureTable = props =>
- React.createElement(BootstrapTable, { ...props });
-
-export const wrapWithFilter = (props) => {
- if (props.filter) {
- const { FilterWrapper } = props.filter;
- return React.createElement(FilterWrapper, { ...props, baseElement: wrapWithSort, _ });
- }
- return wrapWithSort(props);
-};
-
-export const wrapWithPagination = (props) => {
- if (props.pagination) {
- const { PaginationWrapper } = props.pagination;
- return React.createElement(PaginationWrapper, { ...props, baseElement: pureTable });
- }
- return pureTable(props);
-};
-
-export const sortableElement = props => wrapWithPagination(props);
-
-export const selectionElement = props => wrapWithFilter(props);
-
-export const cellEditElement = props => wrapWithSelection(props);
diff --git a/packages/react-bootstrap-table2/src/utils.js b/packages/react-bootstrap-table2/src/utils.js
deleted file mode 100644
index 16572b2e1..000000000
--- a/packages/react-bootstrap-table2/src/utils.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/* eslint no-empty: 0 */
-/* eslint no-param-reassign: 0 */
-/* eslint prefer-rest-params: 0 */
-
-function splitNested(str) {
- return [str]
- .join('.')
- .replace(/\[/g, '.')
- .replace(/\]/g, '')
- .split('.');
-}
-
-function get(target, field) {
- const pathArray = splitNested(field);
- let result;
- try {
- result = pathArray.reduce((curr, path) => curr[path], target);
- } catch (e) {}
- return result;
-}
-
-function set(target, field, value, safe = false) {
- const pathArray = splitNested(field);
- let level = 0;
- pathArray.reduce((a, b) => {
- level += 1;
- if (typeof a[b] === 'undefined') {
- if (!safe) throw new Error(`${a}.${b} is undefined`);
- a[b] = {};
- return a[b];
- }
-
- if (level === pathArray.length) {
- a[b] = value;
- return value;
- }
- return a[b];
- }, target);
-}
-
-function isFunction(obj) {
- return obj && (typeof obj === 'function');
-}
-
-/**
- * Checks if `value` is the Object. the `Object` except `Function` and `Array.`
- *
- * @param {*} obj - The value gonna check
- */
-function isObject(obj) {
- const type = typeof obj;
- return obj !== null && type === 'object' && obj.constructor === Object;
-}
-
-function isEmptyObject(obj) {
- if (!isObject(obj)) return false;
-
- const hasOwnProperty = Object.prototype.hasOwnProperty;
- const keys = Object.keys(obj);
-
- for (let i = 0; i < keys.length; i += 1) {
- if (hasOwnProperty.call(obj, keys[i])) return false;
- }
-
- return true;
-}
-
-function isDefined(value) {
- return typeof value !== 'undefined' && value !== null;
-}
-
-function sleep(fn, ms) {
- return setTimeout(() => fn(), ms);
-}
-
-function debounce(func, wait, immediate) {
- let timeout;
-
- return () => {
- const later = () => {
- timeout = null;
-
- if (!immediate) {
- func.apply(this, arguments);
- }
- };
-
- const callNow = immediate && !timeout;
-
- clearTimeout(timeout);
- timeout = setTimeout(later, wait || 0);
-
- if (callNow) {
- func.appy(this, arguments);
- }
- };
-}
-
-export default {
- get,
- set,
- isFunction,
- isObject,
- isEmptyObject,
- isDefined,
- sleep,
- debounce
-};
diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table.scss
deleted file mode 100644
index 2476781e0..000000000
--- a/packages/react-bootstrap-table2/style/react-bootstrap-table.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-.react-bootstrap-table {
-
- table {
- table-layout: fixed;
- }
-
- th.sortable {
- cursor: pointer;
- }
-
- th .order > .dropdown > .caret {
- margin: 10px 0 10px 5px;
- color: #cccccc;
- }
-
- th .order > .dropup > .caret {
- margin: 10px 0;
- color: #cccccc;
- }
-
- th > .react-bootstrap-table-sort-order > .caret {
- margin: 10px 6.5px;
- }
-
- th[data-row-selection] {
- width: 30px;
- }
-
- td.react-bs-table-no-data {
- text-align: center;
- }
-
- td.react-bootstrap-table-editing-cell {
- .animated {
- animation-fill-mode: both;
- }
-
- .animated.bounceIn,
- .animated.bounceOut{
- animation-duration: .75s;
- }
-
- .animated.shake{
- animation-duration: .3s;
- }
-
- @keyframes shake {
- from, to {
- transform: translate3d(0, 0, 0);
- }
-
- 10%, 50%, 90% {
- transform: translate3d(-10px, 0, 0);
- }
-
- 30%, 70%{
- transform: translate3d(10px, 0, 0);
- }
- }
-
- .shake {
- animation-name: shake;
- }
-
- @keyframes bounceIn {
- from, 20%, 40%, 60%, 80%, to {
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- transform: scale3d(.3, .3, .3);
- }
-
- 20% {
- transform: scale3d(1.1, 1.1, 1.1);
- }
-
- 40% {
- transform: scale3d(.9, .9, .9);
- }
-
- 60% {
- opacity: 1;
- transform: scale3d(1.03, 1.03, 1.03);
- }
-
- 80% {
- transform: scale3d(.97, .97, .97);
- }
-
- to {
- opacity: 1;
- transform: scale3d(1, 1, 1);
- }
- }
-
- .bounceIn {
- animation-name: bounceIn;
- }
-
- @keyframes bounceOut {
- 20% {
- transform: scale3d(.9, .9, .9);
- }
-
- 50%, 55% {
- opacity: 1;
- transform: scale3d(1.1, 1.1, 1.1);
- }
-
- to {
- opacity: 0;
- transform: scale3d(.3, .3, .3);
- }
- }
-
- .bounceOut {
- animation-name: bounceOut;
- }
- }
-}
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2/test/body.test.js b/packages/react-bootstrap-table2/test/body.test.js
deleted file mode 100644
index 5674b83fe..000000000
--- a/packages/react-bootstrap-table2/test/body.test.js
+++ /dev/null
@@ -1,639 +0,0 @@
-import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-
-import Body from '../src/body';
-import Row from '../src/row';
-import Const from '../src/const';
-import RowSection from '../src/row-section';
-import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props';
-
-describe('Body', () => {
- let wrapper;
- const columns = [{
- dataField: 'id',
- text: 'ID'
- }, {
- dataField: 'name',
- text: 'Name'
- }];
-
- const data = [{
- id: 1,
- name: 'A'
- }, {
- id: 2,
- name: 'B'
- }];
-
- const keyField = 'id';
-
- describe('simplest body', () => {
- beforeEach(() => {
- wrapper = shallow( );
- });
-
- it('should render successfully', () => {
- expect(wrapper.length).toBe(1);
- expect(wrapper.find('tbody').length).toBe(1);
- expect(wrapper.find(Row).length).toBe(data.length);
- });
- });
-
- describe('when data is empty', () => {
- beforeEach(() => {
- wrapper = shallow(
- );
- });
-
- it('should render successfully', () => {
- expect(wrapper.length).toBe(1);
- expect(wrapper.find('tbody').length).toBe(1);
- expect(wrapper.find(RowSection).length).toBe(1);
- expect(wrapper.find(RowSection).prop('colSpan')).toBe(columns.length);
- expect(wrapper.find(RowSection).prop('content')).toBe(null);
- });
-
- describe('when noDataIndication props is defined', () => {
- let emptyIndication;
-
- describe('and it is not a function', () => {
- beforeEach(() => {
- emptyIndication = 'Table is empty';
- wrapper = shallow(
- );
- });
-
- it('should render successfully', () => {
- expect(wrapper.length).toBe(1);
- expect(wrapper.find('tbody').length).toBe(1);
- expect(wrapper.find(RowSection).length).toBe(1);
- expect(wrapper.find(RowSection).prop('content')).toEqual(emptyIndication);
- });
- });
-
- describe('and it is a function', () => {
- const content = 'Table is empty';
- let emptyIndicationCallBack;
-
- beforeEach(() => {
- emptyIndicationCallBack = sinon.stub().returns(content);
- wrapper = shallow(
- );
- });
-
- it('should render successfully', () => {
- expect(wrapper.length).toBe(1);
- expect(wrapper.find('tbody').length).toBe(1);
- expect(wrapper.find(RowSection).length).toBe(1);
- expect(wrapper.find(RowSection).prop('content')).toEqual(emptyIndication);
- });
-
- it('should call custom noDataIndication function correctly', () => {
- expect(emptyIndicationCallBack.callCount).toBe(1);
- });
- });
- });
- });
-
- describe('when rowStyle prop is defined', () => {
- const rowStyle = { backgroundColor: 'red', color: 'white' };
-
- describe('and it is a style object', () => {
- beforeEach(() => {
- wrapper = shallow(
- );
- });
-
- it('should rendering Row component with correct style', () => {
- const rows = wrapper.find(Row);
- rows.forEach((row) => {
- expect(row.props().style).toEqual(rowStyle);
- });
- });
- });
-
- describe('and it is a callback functoin', () => {
- const rowStyleCallBack = sinon.stub().returns(rowStyle);
- beforeEach(() => {
- wrapper = shallow(
- 
