├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── __tests__ ├── BootstrapTable-test.js ├── TableHeaderColumn-test.js └── store │ └── TableDataStore-test.js ├── css └── react-bootstrap-table.css ├── dist ├── react-bootstrap-table-all.min.css ├── react-bootstrap-table.js ├── react-bootstrap-table.js.map ├── react-bootstrap-table.min.css └── react-bootstrap-table.min.js ├── examples ├── customMultiSelect.css ├── index.html └── js │ ├── advance │ ├── auto-rowkey-table.js │ ├── demo.js │ ├── disable-toastr-table.js │ ├── edit-type-table.js │ ├── hide-on-insert-table.js │ ├── insert-default-value-table.js │ ├── insert-error-handle-table.js │ ├── insert-type-table.js │ ├── validator-table-read-only.js │ └── validator-table.js │ ├── app.js │ ├── basic │ ├── basic-table.js │ ├── borderless-table.js │ ├── demo.js │ ├── hover-striped-table.js │ ├── large-column-table.js │ ├── no-data-table.js │ ├── scroll-table.js │ └── single-column-table.js │ ├── cell-edit │ ├── blur-to-escape-table.js │ ├── blur-to-save-table.js │ ├── cell-edit-classname.js │ ├── cell-edit-hook-table.js │ ├── click-to-edit-table.js │ ├── custom-cell-edit-table.js │ ├── dbclick-to-edit-table.js │ ├── demo.js │ ├── non-editable-table.js │ └── style.css │ ├── column-filter │ ├── all-filters.js │ ├── array-filter-programmatically.js │ ├── custom-filter.js │ ├── date-filter-programmatically.js │ ├── date-filter-with-default-value.js │ ├── date-filter.js │ ├── demo.js │ ├── filter-style.js │ ├── float-filter.js │ ├── number-filter-programmatically.js │ ├── number-filter-with-default-value.js │ ├── number-filter-without-empty-option.js │ ├── number-filter.js │ ├── number-options-filter-with-default-value.js │ ├── number-options-filter.js │ ├── regex-filter-programmatically.js │ ├── regex-filter.js │ ├── select-filter-programmatically.js │ ├── select-filter-with-default-value.js │ ├── select-filter-with-eq-condition.js │ ├── select-filter-with-select-text.js │ ├── select-filter-with-sort.js │ ├── select-filter-without-empty-option.js │ ├── select-filter.js │ ├── text-filter-programmatically.js │ ├── text-filter-with-default-value.js │ ├── text-filter-with-eq-condition.js │ └── text-filter.js │ ├── column-format │ ├── demo.js │ ├── extra-data-column-format-table.js │ ├── get-row-index-table.js │ ├── html-column-format-table.js │ └── react-column-format-table.js │ ├── column-header-span │ ├── column-header-span-complex.js │ ├── column-header-span.js │ └── demo.js │ ├── column │ ├── column-align-table.js │ ├── column-hide-table.js │ ├── column-style-table.js │ ├── column-title-table.js │ ├── column-width-table.js │ ├── demo.js │ └── td-attribute-table.js │ ├── complex │ ├── app.js │ ├── demo.css │ └── demo.js │ ├── components │ ├── App.js │ ├── GettingStarted.js │ ├── Home.js │ └── PageNotFound.js │ ├── custom │ ├── csv-button │ │ ├── custom-csv-or-tsv-button.js │ │ ├── default-custom-csv-button.js │ │ └── fully-custom-csv-button.js │ ├── delete-button │ │ ├── default-custom-delete-button.js │ │ └── fully-custom-delete-button.js │ ├── demo.js │ ├── insert-button │ │ ├── default-custom-insert-button.js │ │ └── fully-custom-insert-button.js │ ├── insert-modal │ │ ├── custom-insert-modal-body.js │ │ ├── custom-insert-modal-field.js │ │ ├── custom-insert-modal.js │ │ ├── default-custom-insert-modal-footer.js │ │ ├── default-custom-insert-modal-header.js │ │ ├── fully-custom-insert-modal-footer.js │ │ └── fully-custom-insert-modal-header.js │ ├── pagination │ │ ├── custom-pagination-panel.js │ │ ├── custom-size-per-page.js │ │ └── fully-custom-size-per-page.js │ ├── search │ │ ├── custom-search-panel-1.js │ │ ├── custom-search-panel-2.js │ │ ├── default-custom-search-clear-button.js │ │ ├── default-custom-search-field.js │ │ ├── fully-custom-search-clear-button.js │ │ └── fully-custom-search-field.js │ ├── show-only-select-button │ │ ├── default-custom-show-select-button.js │ │ └── fully-custom-show-select-button.js │ └── toolbar │ │ ├── custom-button-group.js │ │ ├── custom-toolbar-1.js │ │ └── left-search-panel.js │ ├── expandRow │ ├── auto-collapse.js │ ├── custom-expand-class.js │ ├── custom-expand-indicator.js │ ├── demo.js │ ├── expand-indicator.js │ ├── expand-row-by-column.js │ ├── expand-row-with-cellEdit.js │ ├── expand-row-with-selection.js │ ├── expandRow.js │ ├── hide-row-when-expanding.js │ ├── manage-expanding.js │ ├── single-expanding.js │ └── style.css │ ├── footer │ ├── demo.js │ └── footer-table.js │ ├── keyboard-nav │ ├── custom-style-nav-table.js │ ├── custom-style-nav-with-cell-edit-table.js │ ├── demo.js │ ├── disable-click-to-nav-table.js │ ├── enter-to-edit-with-nav-table.js │ ├── enter-to-expand-row-with-nav-table.js │ ├── enter-to-select-row-with-nav-table.js │ ├── nav-with-cell-edit-table.js │ ├── nav-with-expand-table.js │ ├── nav-with-select-table.js │ ├── pagination-nav-table.js │ └── simple-nav-table.js │ ├── manipulation │ ├── custom-btn-text-table.js │ ├── debounce-search-table.js │ ├── default-search-table.js │ ├── del-row-custom-confirm.js │ ├── delete-row-table.js │ ├── demo.js │ ├── export-csv-column-table.js │ ├── export-csv-table.js │ ├── filter-table.js │ ├── insert-row-table.js │ ├── multi-search-table.js │ ├── search-clear-table.js │ ├── search-format-table.js │ ├── search-table.js │ ├── strict-multi-search-table.js │ └── strict-search-table.js │ ├── others │ ├── demo.js │ ├── expose-api-table.js │ ├── mouse-event-table.js │ ├── printable-table.js │ └── table-in-tabs.js │ ├── pagination │ ├── custom-pagination-table.js │ ├── default-pagination-table.js │ ├── demo.js │ ├── icon-pagination-table.js │ └── pagination-hook-table.js │ ├── remote │ ├── demo.js │ ├── remote-all.js │ ├── remote-alternative.js │ ├── remote-cell-edit.js │ ├── remote-delete-row.js │ ├── remote-export-csv.js │ ├── remote-filtering.js │ ├── remote-insert-row.js │ ├── remote-paging.js │ ├── remote-search.js │ ├── remote-sorting.js │ ├── remote-store-all.js │ ├── remote-store-alternative.js │ ├── remote-store-cell-edit.js │ ├── remote-store-delete-row.js │ ├── remote-store-export-csv.js │ ├── remote-store-filtering.js │ ├── remote-store-insert-row.js │ ├── remote-store-paging.js │ ├── remote-store-search.js │ └── remote-store-sorting.js │ ├── selection │ ├── all-select.js │ ├── click-to-select-table.js │ ├── custom-multi-select-table.js │ ├── default-select-table.js │ ├── demo.js │ ├── externally-managed-selection.js │ ├── hide-selection-col-table.js │ ├── multi-select-table.js │ ├── only-show-selected-table.js │ ├── row-click-table.js │ ├── select-bgcolor-dynamic-table.js │ ├── select-bgcolor-table.js │ ├── select-filter-table.js │ ├── select-hook-table.js │ ├── select-row-class-table.js │ ├── select-validation-table.js │ ├── selection-column-width-table.js │ ├── single-select-table.js │ ├── style.css │ └── unselectable-table.js │ ├── sort │ ├── clean-sorted-table.js │ ├── custom-caret-sort-table.js │ ├── custom-sort-table.js │ ├── custom-sort-with-extra-data-table.js │ ├── default-asc-sort-table.js │ ├── default-sort-table.js │ ├── demo.js │ ├── disable-sort-indicator-table.js │ ├── manage-multi-sort-external-table.js │ ├── manage-sort-external-table.js │ ├── multi-sort-table.js │ ├── reusable-custom-sort-table.js │ ├── sort-hook-table.js │ ├── sort-style-table.js │ ├── sort-table.js │ └── style.css │ ├── style │ ├── demo.js │ ├── edit-td-class-table.js │ ├── inline-style-table.js │ ├── style.css │ ├── table-class-table.js │ ├── table-styled-components.js │ ├── td-class-function-table.js │ ├── td-class-string-table.js │ ├── tr-class-function-table.js │ ├── tr-class-string-table.js │ └── tr-style-table.js │ └── utils.js ├── gulpfile.js ├── package.json ├── preprocessor.js ├── src ├── BootstrapTable.js ├── Const.js ├── Editor.js ├── ExpandComponent.js ├── ExpandRowHeaderColumn.js ├── Filter.js ├── Notification.js ├── SelectRowHeaderColumn.js ├── TableBody.js ├── TableColumn.js ├── TableEditColumn.js ├── TableFilter.js ├── TableFooter.js ├── TableHeader.js ├── TableHeaderColumn.js ├── TableRow.js ├── csv_export_util.js ├── filesaver.js ├── filters │ ├── Date.js │ ├── Number.js │ ├── Regex.js │ ├── Select.js │ └── Text.js ├── index.js ├── pagination │ ├── PageButton.js │ ├── PaginationList.js │ └── SizePerPageDropDown.js ├── store │ └── TableDataStore.js ├── toolbar │ ├── ButtonGroup.js │ ├── ClearSearchButton.js │ ├── DeleteButton.js │ ├── ExportCSVButton.js │ ├── InsertButton.js │ ├── InsertModal.js │ ├── InsertModalBody.js │ ├── InsertModalFooter.js │ ├── InsertModalHeader.js │ ├── SearchField.js │ ├── ShowSelectedOnlyButton.js │ └── ToolBar.js └── util.js ├── webpack.example.config.js ├── webpack.umd.config.js ├── webpack.umd.min.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015", "stage-0"], 3 | "plugins": [ 4 | "react-hot-loader/babel" 5 | ] 6 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "eslint-config-airbnb", 4 | "plugins": ["react"], 5 | "env": { 6 | "browser": true, 7 | "node": true, 8 | "es6": true, 9 | "jest": true 10 | }, 11 | "globals": { 12 | "chai": true 13 | }, 14 | "rules": { 15 | "react/display-name": [2, { "acceptTranspilerName": true }], 16 | "react/jsx-curly-spacing": [2, "always"], 17 | "react/jsx-no-duplicate-props": 2, 18 | "react/jsx-no-undef": 2, 19 | "react/jsx-quotes": 0, 20 | "react/jsx-uses-react": 2, 21 | "react/jsx-uses-vars": 2, 22 | "react/jsx-closing-bracket-location": [2, "after-props" ], 23 | "react/no-did-mount-set-state": 2, 24 | "react/no-did-update-set-state": 2, 25 | "react/no-multi-comp": 0, 26 | "react/no-unknown-property": 2, 27 | "react/prop-types": 0, 28 | "react/react-in-jsx-scope": 2, 29 | "react/require-extension": 2, 30 | "react/self-closing-comp": 2, 31 | "react/wrap-multilines": 2, 32 | "react/sort-comp": 0, 33 | "react/jsx-no-bind": 0, 34 | "react/jsx-boolean-value": 0, 35 | "eqeqeq": [2, "smart"], 36 | "quotes": [2, "single", "avoid-escape"], 37 | "jsx-quotes": [2, "prefer-single"], 38 | "comma-dangle": [2, "never"], 39 | "indent": [2, 2], 40 | "object-curly-spacing": [2, "always"], 41 | "array-bracket-spacing": [2, "always"], 42 | "no-undef": 2, 43 | "no-underscore-dangle": 0, 44 | "func-names": 0, 45 | "no-else-return": 0, 46 | "no-console": 1, 47 | "no-throw-literal": 0, 48 | "id-length": 0, 49 | "no-unused-expressions": 0, 50 | "no-param-reassign": 0, 51 | "max-len": [1, 100] 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *~ 4 | *.sublime-project 5 | *.sublime-workspace 6 | *.idea 7 | *.iml 8 | lib/ 9 | npm-debug.log 10 | .vscode 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *~ 4 | *.sublime-project 5 | *.sublime-workspace 6 | *.idea 7 | *.iml 8 | jsonOutputWebpack.json 9 | 10 | # generated 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | `react-bootstrap-table` will stop develop new feature and move to [react-bootstrap-table2](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop), but keep to fix critical bugs. 2 | 3 | `react-bootstrap-table2` still work in progress, we will drop a first release ASAP. 4 | In addition, I don't think `react-bootstrap-table` is a good table component for developer, but I trust `react-bootstrap-table2` will be in the future. 5 | 6 | If you face too many issues to feel it's hard to custom or work with remote data, I'll suggest you to not use `react-bootstrap-table`. 7 | 8 | Allen -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 SparkMonitor 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /__tests__/BootstrapTable-test.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('../src/BootstrapTable.js'); 2 | jest.dontMock('../src/TableHeaderColumn.js'); 3 | jest.dontMock('../src/TableBody.js'); 4 | jest.dontMock('../src/TableColumn.js'); 5 | jest.dontMock('../src/TableHeader.js'); 6 | jest.dontMock('../src/TableRow.js'); 7 | jest.dontMock('../src/pagination/PaginationList.js'); 8 | jest.dontMock('../src/pagination/PageButton.js'); 9 | 10 | xdescribe('BootstrapTable', function() { 11 | var testData = [ 12 | {id: 1, name: "name1", price: 100}, 13 | {id: 2, name: "name2", price: 120}, 14 | {id: 3, name: "name3", price: 130}, 15 | {id: 4, name: "name4", price: 140}, 16 | {id: 5, name: "name5", price: 110} 17 | ]; 18 | 19 | it('init', function() { 20 | 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /examples/customMultiSelect.css: -------------------------------------------------------------------------------- 1 | .checkbox-personalized * { 2 | box-sizing: border-box; 3 | } 4 | .checkbox-personalized input[type=checkbox] { 5 | display: none; 6 | } 7 | .checkbox-personalized label { 8 | margin: 0 auto; 9 | display: block; 10 | padding: 5px 0; 11 | } 12 | .checkbox-personalized label .check { 13 | margin: 3px 5px; 14 | width: 20px; 15 | height: 20px; 16 | border: 1px solid #999; 17 | border-radius: 2px; 18 | text-align: center; 19 | position: relative; 20 | overflow: hidden; 21 | cursor: pointer; 22 | transition: all 0.2s ease-in; 23 | } 24 | .checkbox-personalized input[type=checkbox]:checked + label .check { 25 | background: #1e95fb; 26 | transition: all 0.2s ease-in; 27 | border: 1px solid #1e95fb; 28 | } 29 | .checkbox-personalized input[type=checkbox]:checked + label .check:after { 30 | content: ''; 31 | display: block; 32 | width: 5px; 33 | height: 11px; 34 | border: solid #FFF; 35 | margin: 2px 7px; 36 | border-width: 0 2px 2px 0; 37 | transform: rotate(45deg); 38 | } 39 | .checkbox-personalized input[type=checkbox]:indeterminate + label .check { 40 | background: #939ba2; 41 | transition: all 0.2s ease-in; 42 | border: 1px solid #939ba2; 43 | } 44 | .checkbox-personalized input[type=checkbox]:indeterminate + label .check:after { 45 | content: ''; 46 | display: block; 47 | height: 11px; 48 | border: solid #FFF; 49 | margin: 2px 7px; 50 | border-width: 0 2px 0 0; 51 | transform: rotate(90deg); 52 | } 53 | 54 | .custom-select-body-class > tbody > tr > td:first-child { 55 | padding: 0 !important; 56 | } 57 | 58 | .custom-select-header-class > thead > tr > th:first-child { 59 | padding: 0 !important; 60 | } 61 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react-bootstrap-table demo 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /examples/js/advance/auto-rowkey-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const jobs = []; 7 | const jobTypes = [ 'A', 'B', 'C', 'D' ]; 8 | 9 | function addJobs(quantity) { 10 | const startId = jobs.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | jobs.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | type: 'B', 17 | active: i % 2 === 0 ? 'Y' : 'N' 18 | }); 19 | } 20 | } 21 | 22 | addJobs(5); 23 | 24 | export default class AutoRowKeyTable extends React.Component { 25 | render() { 26 | return ( 27 | 28 | Job ID 29 | Job Name 30 | Job Type 31 | Active 32 | 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /examples/js/advance/hide-on-insert-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const jobs = []; 7 | const jobTypes = [ 'A', 'B', 'C', 'D' ]; 8 | 9 | function addJobs(quantity) { 10 | const startId = jobs.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | jobs.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | type: 'B', 17 | active: i % 2 === 0 ? 'Y' : 'N' 18 | }); 19 | } 20 | } 21 | 22 | addJobs(5); 23 | 24 | export default class HideOnInsertTable extends React.Component { 25 | render() { 26 | return ( 27 | 28 | Job ID 29 | Job Name 30 | Job Type 31 | Active 32 | 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /examples/js/advance/insert-type-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const jobs = []; 7 | const jobTypes = [ 'A', 'B', 'C', 'D' ]; 8 | 9 | function addJobs(quantity) { 10 | const startId = jobs.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | jobs.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | type: 'B', 17 | active: i % 2 === 0 ? 'Y' : 'N' 18 | }); 19 | } 20 | } 21 | 22 | addJobs(5); 23 | 24 | export default class DataInsertTypeTable extends React.Component { 25 | render() { 26 | return ( 27 | 28 | Job ID 29 | Job Name 30 | Job Type 31 | Active 32 | 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /examples/js/basic/basic-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class BasicTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/basic/borderless-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class BorderlessTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/basic/hover-striped-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class HoverStripedTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/basic/no-data-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | export default class NoDataTable extends React.Component { 9 | render() { 10 | const options = { 11 | noDataText: 'This is custom text for empty data' 12 | // withoutNoDataText: true, // this will make the noDataText hidden, means only showing the table header 13 | }; 14 | return ( 15 | 16 | Product ID 17 | Product Name 18 | Product Price 19 | 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/js/basic/scroll-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(20); 21 | 22 | export default class BasicTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/basic/single-column-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class SingleColumnTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | 28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /examples/js/cell-edit/blur-to-escape-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const cellEditProp = { 23 | mode: 'click', 24 | blurToEscape: true 25 | }; 26 | 27 | export default class BlurToEscapeTable extends React.Component { 28 | render() { 29 | return ( 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/cell-edit/blur-to-save-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const cellEditProp = { 23 | mode: 'click', 24 | blurToSave: true 25 | }; 26 | 27 | export default class BlurToSaveTable extends React.Component { 28 | render() { 29 | return ( 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/cell-edit/click-to-edit-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const cellEditProp = { 23 | mode: 'click' 24 | }; 25 | 26 | export default class ClickToEditTable extends React.Component { 27 | render() { 28 | return ( 29 | 30 | Product ID 31 | Product Name 32 | Product Price 33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/js/cell-edit/dbclick-to-edit-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const cellEditProp = { 23 | mode: 'dbclick' 24 | }; 25 | 26 | export default class DbClickToSelectTable extends React.Component { 27 | render() { 28 | return ( 29 | 30 | Product ID 31 | Product Name 32 | Product Price 33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/js/cell-edit/non-editable-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | // make colum 'Product Name' is non editable 23 | export default class NonEditableTable extends React.Component { 24 | render() { 25 | const cellEditProp = { 26 | mode: 'click', 27 | nonEditableRows: function() { 28 | // if product id less than 3, will cause the whole row noneditable 29 | // this function should return an array of row keys 30 | return products.filter(p => p.id < 3).map(p => p.id); 31 | } 32 | }; 33 | return ( 34 | 35 | Product ID 36 | Product Name 37 | Product Price 38 | 39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /examples/js/cell-edit/style.css: -------------------------------------------------------------------------------- 1 | .editing-jobstatus-class{ 2 | background-color: aquamarine; 3 | } 4 | 5 | .invalid-jobstatus-class { 6 | background-color: orangered; 7 | } 8 | 9 | .editing-jobsname-class { 10 | background-color: blueviolet; 11 | } 12 | 13 | .invalid-jobsname-class { 14 | background-color: orange; 15 | } -------------------------------------------------------------------------------- /examples/js/column-filter/array-filter-programmatically.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: 2100 + i 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class ProgrammaticallyArrayFilter extends React.Component { 22 | /* Filtering passing an array of values */ 23 | handleBtnClick = () => { 24 | this.refs.table.handleFilterData({ 25 | name: { type: 'ArrayFilter', value: [ 'Item name 3', 'Item name 4' ] }, 26 | price: { type: 'ArrayFilter', value: [ 2100, 2104 ] } 27 | }); 28 | } 29 | 30 | render() { 31 | return ( 32 |
33 | 34 | 35 | Product ID 36 | Product Name 37 | Product Price 38 | 39 |
40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/js/column-filter/date-filter-with-default-value.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | const startDate = new Date(2015, 0, 1); 11 | const endDate = new Date(); 12 | for (let i = 0; i < quantity; i++) { 13 | const date = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())); 14 | const id = startId + i; 15 | products.push({ 16 | id: id, 17 | name: 'Item name ' + id, 18 | inStockDate: date 19 | }); 20 | } 21 | } 22 | 23 | addProducts(5); 24 | 25 | function dateFormatter(cell, row) { 26 | if (typeof cell !== 'object') { 27 | cell = new Date(cell); 28 | } 29 | 30 | return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; 31 | } 32 | 33 | export default class DateFilterWithDefaultValue extends React.Component { 34 | render() { 35 | return ( 36 | 37 | Product ID 38 | Product Name 39 | =' } } }>In Stock From 40 | 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /examples/js/column-filter/date-filter.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | const startDate = new Date(2015, 0, 1); 11 | const endDate = new Date(); 12 | for (let i = 0; i < quantity; i++) { 13 | const date = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())); 14 | const id = startId + i; 15 | products.push({ 16 | id: id, 17 | name: 'Item name ' + id, 18 | inStockDate: date 19 | }); 20 | } 21 | } 22 | 23 | addProducts(5); 24 | 25 | function dateFormatter(cell, row) { 26 | if (typeof cell !== 'object') { 27 | cell = new Date(cell); 28 | } 29 | 30 | return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; 31 | } 32 | 33 | export default class DateFilter extends React.Component { 34 | render() { 35 | return ( 36 | 37 | Product ID 38 | Product Name 39 | In Stock From 40 | 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /examples/js/column-filter/float-filter.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: (i * 2 + Math.random()).toFixed(2) 16 | }); 17 | } 18 | } 19 | 20 | function formatFloat(cell, row) { 21 | return parseFloat(cell); 22 | } 23 | 24 | const sortFloat = function(l, r, order) { 25 | const left = parseFloat(l.price); 26 | const right = parseFloat(r.price); 27 | if (order === 'desc') { 28 | return right - left; 29 | } else { 30 | return left - right; 31 | } 32 | }; 33 | 34 | addProducts(5); 35 | 36 | export default class FloatFilter extends React.Component { 37 | render() { 38 | return ( 39 | 40 | Product ID 41 | Product Name 42 | ', '<' ] } } 44 | dataSort={ true } 45 | dataFormat={ formatFloat } 46 | filterFormatted={ true } 47 | sortFunc={ sortFloat }> 48 | Product Price 49 | 50 | 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /examples/js/column-filter/number-filter-programmatically.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: Math.floor((Math.random() * 100) + 1) 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class ProgrammaticallyNumberFilter extends React.Component { 22 | handleBtnClick = () => { 23 | this.refs.nameCol.applyFilter({ 24 | number: 40, 25 | comparator: '>' 26 | }); 27 | } 28 | 29 | render() { 30 | return ( 31 |
32 | 33 | 34 | Product ID 35 | Product Name 36 | ', '<=' ] } }>Product Price 37 | 38 |
39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /examples/js/column-filter/number-filter-with-default-value.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: Math.floor((Math.random() * 100) + 1) 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class NumberFilterWithDefaultValue extends React.Component { 22 | render() { 23 | return ( 24 | 25 | Product ID 26 | Product Name 27 | ', '<=' ], 29 | defaultValue: { number: 50, comparator: '>' } } }> 30 | Product Price 31 | 32 | 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /examples/js/column-filter/number-filter-without-empty-option.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: Math.floor((Math.random() * 100) + 1) 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | const priceRange = [ 15, 30, 40, 60, 80, 90, 100 ]; 22 | 23 | export default class NumberFilterWithoutEmptyOption extends React.Component { 24 | render() { 25 | return ( 26 | 27 | Product ID 28 | Product Name 29 | ', '<=' ] } }>Product Price 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/js/column-filter/number-filter.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: Math.floor((Math.random() * 100) + 1) 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class NumberFilter extends React.Component { 22 | render() { 23 | return ( 24 | 25 | Product ID 26 | Product Name 27 | ', '<=' ] } }>Product Price 28 | 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/js/column-filter/number-options-filter-with-default-value.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | satisfaction: Math.floor(Math.random() * 6) 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | const satisfaction = [ 0, 1, 2, 3, 4, 5 ]; 22 | 23 | export default class NumberOptionsFilterWithDefaultValue extends React.Component { 24 | render() { 25 | return ( 26 | 27 | Product ID 28 | Product Name 29 | =' } } }>Buyer Satisfaction 31 | 32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/js/column-filter/number-options-filter.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | satisfaction: Math.floor(Math.random() * 6) 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | const satisfaction = [ 0, 1, 2, 3, 4, 5 ]; 22 | 23 | export default class NumberOptionsFilter extends React.Component { 24 | render() { 25 | return ( 26 | 27 | Product ID 28 | Product Name 29 | Buyer Satisfaction 30 | 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/js/column-filter/regex-filter-programmatically.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: 2100 + i 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class ProgrammaticallyRegexFilter extends React.Component { 22 | handleBtnClick = () => { 23 | this.refs.nameCol.applyFilter('[name]'); 24 | } 25 | 26 | render() { 27 | return ( 28 |
29 | 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 |
36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/js/column-filter/regex-filter.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: 2100 + i 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class TextFilter extends React.Component { 22 | render() { 23 | return ( 24 | 25 | Product ID 26 | Product Name 27 | Product Price 28 | 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/js/column-filter/select-filter-programmatically.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | const qualityType = { 8 | 0: 'good', 9 | 1: 'bad', 10 | 2: 'unknown' 11 | }; 12 | 13 | function addProducts(quantity) { 14 | const startId = products.length; 15 | for (let i = 0; i < quantity; i++) { 16 | const id = startId + i; 17 | products.push({ 18 | id: id, 19 | name: 'Item name ' + id, 20 | quality: i % 3 21 | }); 22 | } 23 | } 24 | 25 | addProducts(5); 26 | 27 | function enumFormatter(cell, row, enumObject) { 28 | return enumObject[cell]; 29 | } 30 | 31 | export default class ProgrammaticallySelectFilter extends React.Component { 32 | handleBtnClick = () => { 33 | this.refs.nameCol.applyFilter(1); 34 | } 35 | 36 | render() { 37 | return ( 38 |
39 | 40 | 41 | Product ID 42 | Product Name 43 | Product Quality 45 | 46 |
47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /examples/js/column-filter/select-filter-with-default-value.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | const qualityType = { 8 | 0: 'good', 9 | 1: 'bad', 10 | 2: 'unknown' 11 | }; 12 | 13 | function addProducts(quantity) { 14 | const startId = products.length; 15 | for (let i = 0; i < quantity; i++) { 16 | const id = startId + i; 17 | products.push({ 18 | id: id, 19 | name: 'Item name ' + id, 20 | quality: i % 3 21 | }); 22 | } 23 | } 24 | 25 | addProducts(5); 26 | 27 | function enumFormatter(cell, row, enumObject) { 28 | return enumObject[cell]; 29 | } 30 | 31 | export default class SelectFilterWithDefaultValue extends React.Component { 32 | render() { 33 | return ( 34 | 35 | Product ID 36 | Product Name 37 | Product Quality 39 | 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/js/column-filter/select-filter-with-eq-condition.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | const quality = [ 'good', 'Bad', 'unknown' ]; 8 | 9 | const qualityType = { 10 | 'good': 'good', 11 | 'Bad': 'Bad', 12 | 'unknown': 'unknown' 13 | }; 14 | 15 | function addProducts(quantity) { 16 | const startId = products.length; 17 | for (let i = 0; i < quantity; i++) { 18 | const id = startId + i; 19 | products.push({ 20 | id: id, 21 | name: 'Item name ' + id, 22 | quality: quality[i % 3] 23 | }); 24 | } 25 | } 26 | 27 | addProducts(5); 28 | export default class SelectFilterWithCondition extends React.Component { 29 | render() { 30 | return ( 31 | 32 | Product ID 33 | Product Name 34 | Product Quality 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/js/column-filter/select-filter-with-select-text.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | const qualityType = { 8 | 0: 'good', 9 | 1: 'Bad', 10 | 2: 'unknown' 11 | }; 12 | 13 | function addProducts(quantity) { 14 | const startId = products.length; 15 | for (let i = 0; i < quantity; i++) { 16 | const id = startId + i; 17 | products.push({ 18 | id: id, 19 | name: 'Item name ' + id, 20 | quality: i % 3 21 | }); 22 | } 23 | } 24 | 25 | addProducts(5); 26 | 27 | function enumFormatter(cell, row, enumObject) { 28 | return enumObject[cell]; 29 | } 30 | 31 | export default class SelectFilter extends React.Component { 32 | render() { 33 | return ( 34 | 35 | Product ID 36 | Product Name 37 | Product Quality 39 | 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/js/column-filter/select-filter-with-sort.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | const qualityType = { 8 | 0: 'good', 9 | 1: 'bad', 10 | 2: 'unknown' 11 | }; 12 | 13 | function addProducts(quantity) { 14 | const startId = products.length; 15 | for (let i = 0; i < quantity; i++) { 16 | const id = startId + i; 17 | products.push({ 18 | id: id, 19 | name: 'Item name ' + id, 20 | quality: i % (Object.keys(qualityType).length) 21 | }); 22 | } 23 | } 24 | 25 | addProducts(15); 26 | 27 | function enumFormatter(cell, row, enumObject) { 28 | return enumObject[cell]; 29 | } 30 | 31 | export default class SelectFilterWithSort extends React.Component { 32 | render() { 33 | const filter = { 34 | type: 'TextFilter' 35 | }; 36 | 37 | return ( 38 | 39 | Product ID 40 | Product Name 41 | Product Quality 43 | 44 | ); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /examples/js/column-filter/select-filter-without-empty-option.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | const qualityType = { 8 | 0: 'good', 9 | 1: 'Bad', 10 | 2: 'unknown' 11 | }; 12 | 13 | function addProducts(quantity) { 14 | const startId = products.length; 15 | for (let i = 0; i < quantity; i++) { 16 | const id = startId + i; 17 | products.push({ 18 | id: id, 19 | name: 'Item name ' + id, 20 | quality: i % 3 21 | }); 22 | } 23 | } 24 | 25 | addProducts(5); 26 | 27 | function enumFormatter(cell, row, enumObject) { 28 | return enumObject[cell]; 29 | } 30 | 31 | export default class SelectFilterWithoutEmptyOption extends React.Component { 32 | render() { 33 | return ( 34 | 35 | Product ID 36 | Product Name 37 | Product Quality 39 | 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/js/column-filter/select-filter.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | const qualityType = { 8 | 0: 'good', 9 | 1: 'Bad', 10 | 2: 'unknown' 11 | }; 12 | 13 | function addProducts(quantity) { 14 | const startId = products.length; 15 | for (let i = 0; i < quantity; i++) { 16 | const id = startId + i; 17 | products.push({ 18 | id: id, 19 | name: 'Item name ' + id, 20 | quality: i % 3 21 | }); 22 | } 23 | } 24 | 25 | addProducts(5); 26 | 27 | function enumFormatter(cell, row, enumObject) { 28 | return enumObject[cell]; 29 | } 30 | 31 | export default class SelectFilter extends React.Component { 32 | render() { 33 | return ( 34 | 35 | Product ID 36 | Product Name 37 | Product Quality 39 | 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/js/column-filter/text-filter-programmatically.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: 2100 + i 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class ProgrammaticallyTextFilter extends React.Component { 22 | 23 | /* There're two way that you can filter data */ 24 | handleBtnClick = () => { 25 | this.refs.nameCol.applyFilter('Item name 3'); 26 | } 27 | 28 | /* This is also work for filtering */ 29 | handleBtnClick1 = () => { 30 | this.refs.table.handleFilterData({ name: 'Item name 3' }); 31 | } 32 | 33 | render() { 34 | return ( 35 |
36 | 37 | 38 | Product ID 39 | Product Name 40 | Product Price 41 | 42 |
43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/js/column-filter/text-filter-with-default-value.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: 2100 + i 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class TextFilterWithDefaultValue extends React.Component { 22 | render() { 23 | return ( 24 | 25 | Product ID 26 | Product Name 27 | Product Price 28 | 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/js/column-filter/text-filter-with-eq-condition.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: 2100 + i 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class TextFilterWithCondition extends React.Component { 22 | render() { 23 | return ( 24 | 25 | Product ID 26 | Product Name 27 | Product Price 28 | 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/js/column-filter/text-filter.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: 2100 + i 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class TextFilter extends React.Component { 22 | render() { 23 | return ( 24 | 25 | Product ID 26 | Product Name 27 | Product Price 28 | 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/js/column-format/extra-data-column-format-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | const qualityType = { 9 | 0: 'good', 10 | 1: 'bad', 11 | 2: 'unknown' 12 | }; 13 | const inStockStatus = { 14 | 1: 'yes', 15 | 2: 'no' 16 | }; 17 | 18 | function addProducts(quantity) { 19 | const startId = products.length; 20 | for (let i = 0; i < quantity; i++) { 21 | const id = startId + i; 22 | products.push({ 23 | id: id, 24 | name: 'Item name ' + id, 25 | quality: i % 3, 26 | inStock: i % 2 + 1 27 | }); 28 | } 29 | } 30 | 31 | addProducts(5); 32 | 33 | function enumFormatter(cell, row, enumObject) { 34 | return enumObject[cell]; 35 | } 36 | 37 | export default class ExtraDataColumnFormatTable extends React.Component { 38 | render() { 39 | return ( 40 | 41 | Product ID 42 | Product Name 43 | Product Quality 44 | Product Stock Status 45 | 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/js/column-format/get-row-index-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0*/ 3 | /* eslint no-console: 0*/ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const jobs = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = jobs.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | jobs.push({ 15 | id: id, 16 | name: 'Application_Name_ ' + id, 17 | active: i % 2 === 0 ? true : false 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | 25 | class ActiveFormatter extends React.Component { 26 | render() { 27 | return ( 28 | 29 | ); 30 | } 31 | } 32 | 33 | function activeFormatter(cell, row, enumObject, index) { 34 | console.log(`The row index: ${index}`); 35 | return ( 36 | 37 | ); 38 | } 39 | 40 | export default class GetRowIndexTable extends React.Component { 41 | render() { 42 | return ( 43 | 44 | Job ID 45 | Job Name 46 | Active 47 | 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /examples/js/column-format/html-column-format-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0*/ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | 24 | function priceFormatter(cell, row) { 25 | return ` ${cell}`; 26 | } 27 | 28 | 29 | export default class HtmlColumnFormatTable extends React.Component { 30 | render() { 31 | return ( 32 | 33 | Product ID 34 | Product Name 35 | Product Price 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/js/column-format/react-column-format-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0*/ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const jobs = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = jobs.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | jobs.push({ 14 | id: id, 15 | name: 'Application_Name_ ' + id, 16 | active: i % 2 === 0 ? true : false 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | 24 | class ActiveFormatter extends React.Component { 25 | render() { 26 | return ( 27 | 28 | ); 29 | } 30 | } 31 | 32 | function activeFormatter(cell, row) { 33 | return ( 34 | 35 | ); 36 | } 37 | 38 | export default class ReactColumnFormatTable extends React.Component { 39 | render() { 40 | return ( 41 | 42 | Job ID 43 | Job Name 44 | Active 45 | 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/js/column-header-span/column-header-span.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class ColumnHeaderSpan extends React.Component { 23 | render() { 24 | return ( 25 | 26 | ID 27 | Product 28 | Name 29 | Price 30 | 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/js/column-header-span/demo.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import ColumnHeaderSpan from './column-header-span'; 4 | import ColumnHeaderSpanComplex from './column-header-span-complex'; 5 | 6 | class Demo extends React.Component { 7 | render() { 8 | return ( 9 |
10 |
11 |
12 |
Column Header Span a simple example
13 |
14 |
Source in /examples/js/column-header-span/column-header-span.js
15 | 16 |
17 |
18 |
19 |
20 |
21 |
Column Header Span a complex example
22 |
23 |
Source in /examples/js/column-header-span/column-header-span-complex.js
24 | 25 |
26 |
27 |
28 |
29 | ); 30 | } 31 | } 32 | 33 | export default Demo; 34 | -------------------------------------------------------------------------------- /examples/js/column/column-align-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class ColumnAlignTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/column/column-hide-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class ColumnHideTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/column/column-style-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'The white-space property specifies how white-space inside an element is handled, default is normal ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class ColumnStyleTable extends React.Component { 24 | stylingID = (cell, row, ridx, cidx) => { 25 | return { color: 'red' }; 26 | } 27 | 28 | render() { 29 | return ( 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/column/column-title-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class ColumnAlignTable extends React.Component { 24 | 25 | customTitle(cell, row, rowIndex, colIndex) { 26 | return `${row.name} for ${cell}`; 27 | } 28 | 29 | render() { 30 | return ( 31 | 32 | Product ID 33 | Product Name 34 | Product Price 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/js/column/column-width-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name aaaaaaaaaaaaaa' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class ColumnWidthTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/column/td-attribute-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class ColumnHideTable extends React.Component { 23 | render() { 24 | const tdAttr = { 25 | 'data-attr1': 'value1', 26 | 'data-attr2': 'value2' 27 | }; 28 | return ( 29 | 30 | Product ID 31 | Product Name 32 | Product Price 33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/js/complex/demo.css: -------------------------------------------------------------------------------- 1 | .third-tr{ 2 | font-weight: bold; 3 | background-color: aquamarine; 4 | } -------------------------------------------------------------------------------- /examples/js/complex/demo.js: -------------------------------------------------------------------------------- 1 | require('./demo.css'); 2 | import React from 'react'; 3 | import App from './app'; 4 | 5 | class Demo extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |
A Complex Example
11 |
Source in /examples/js/complex/app.js
12 |
13 | 14 |
15 |
16 |
17 | ); 18 | } 19 | } 20 | 21 | export default Demo; 22 | -------------------------------------------------------------------------------- /examples/js/components/GettingStarted.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class GettingStarted extends React.Component { 4 | render() { 5 | return ( 6 |
7 |

Getting started

8 | npm i react-bootstrap-table --save 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default GettingStarted; 15 | -------------------------------------------------------------------------------- /examples/js/components/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return ( 6 |
7 |
8 | ); 9 | } 10 | } 11 | 12 | export default Home; 13 | -------------------------------------------------------------------------------- /examples/js/components/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class PageNotFound extends React.Component { 4 | render() { 5 | return ( 6 |
Page Not Found
7 | ); 8 | } 9 | } 10 | 11 | export default PageNotFound; 12 | -------------------------------------------------------------------------------- /examples/js/custom/csv-button/fully-custom-csv-button.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn, InsertButton } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | export default class FullyCustomInsertButtonTable extends React.Component { 25 | 26 | createCustomExportCSVButton = (onClick) => { 27 | return ( 28 | 29 | ); 30 | } 31 | 32 | render() { 33 | const options = { 34 | exportCSVBtn: this.createCustomExportCSVButton 35 | }; 36 | return ( 37 | 38 | Product ID 39 | Product Name 40 | Product Price 41 | 42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /examples/js/custom/delete-button/fully-custom-delete-button.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | export default class FullyCustomDeleteButtonTable extends React.Component { 25 | 26 | createCustomDeleteButton = (onBtnClick) => { 27 | return ( 28 | 29 | ); 30 | } 31 | 32 | render() { 33 | const options = { 34 | deleteBtn: this.createCustomDeleteButton 35 | }; 36 | const selectRow = { 37 | mode: 'checkbox' 38 | }; 39 | return ( 40 | 41 | Product ID 42 | Product Name 43 | Product Price 44 | 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /examples/js/custom/insert-button/fully-custom-insert-button.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn, InsertButton } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | export default class FullyCustomInsertButtonTable extends React.Component { 25 | 26 | createCustomInsertButton = (openModal) => { 27 | return ( 28 | 29 | ); 30 | } 31 | 32 | render() { 33 | const options = { 34 | insertBtn: this.createCustomInsertButton 35 | }; 36 | return ( 37 | 38 | Product ID 39 | Product Name 40 | Product Price 41 | 42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /examples/js/custom/insert-modal/fully-custom-insert-modal-footer.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | export default class DefaultCustomInsertModalFooterTable extends React.Component { 25 | 26 | createCustomModalFooter = (onClose, onSave) => { 27 | const style = { 28 | backgroundColor: '#ffffff' 29 | }; 30 | return ( 31 |
32 |

Its a Custom footer

33 | 34 | 35 |
36 | ); 37 | } 38 | 39 | render() { 40 | const options = { 41 | insertModalFooter: this.createCustomModalFooter 42 | }; 43 | return ( 44 | 45 | Product ID 46 | Product Name 47 | Product Price 48 | 49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /examples/js/custom/insert-modal/fully-custom-insert-modal-header.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class FullyCustomInsertModalHeaderTable extends React.Component { 24 | 25 | createCustomModalHeader(onClose, onSave) { 26 | const headerStyle = { 27 | fontWeight: 'bold', 28 | fontSize: 'large', 29 | textAlign: 'center', 30 | backgroundColor: '#eeeeee' 31 | }; 32 | return ( 33 |
34 |

That is my custom header

35 | 36 |
37 | ); 38 | } 39 | 40 | render() { 41 | const options = { 42 | insertModalHeader: this.createCustomModalHeader 43 | }; 44 | return ( 45 | 46 | Product ID 47 | Product Name 48 | Product Price 49 | 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /examples/js/custom/search/default-custom-search-field.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn, SearchField } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | export default class DefaultCustomSearchFieldTable extends React.Component { 25 | 26 | createCustomSearchField = (props) => { 27 | return ( 28 | 32 | ); 33 | } 34 | 35 | render() { 36 | const options = { 37 | clearSearch: true, 38 | searchField: this.createCustomSearchField 39 | }; 40 | return ( 41 | 42 | Product ID 43 | Product Name 44 | Product Price 45 | 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/js/custom/search/fully-custom-search-clear-button.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn, ClearSearchButton } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | export default class FullyCustomClearButtonTable extends React.Component { 25 | 26 | createCustomClearButton = (onClick) => { 27 | return ( 28 | 29 | ); 30 | } 31 | 32 | render() { 33 | const options = { 34 | clearSearch: true, 35 | clearSearchBtn: this.createCustomClearButton 36 | }; 37 | return ( 38 | 39 | Product ID 40 | Product Name 41 | Product Price 42 | 43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/js/custom/show-only-select-button/fully-custom-show-select-button.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | export default class FullyCustomShowSelectButtonTable extends React.Component { 25 | 26 | createCustomShowSelectButton = (onClick, showSelected) => { 27 | return ( 28 | 31 | ); 32 | } 33 | 34 | render() { 35 | const selectRow = { 36 | mode: 'radio', 37 | showOnlySelected: true 38 | }; 39 | const options = { 40 | showSelectedOnlyBtn: this.createCustomShowSelectButton 41 | }; 42 | return ( 43 | 44 | Product ID 45 | Product Name 46 | Product Price 47 | 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /examples/js/custom/toolbar/custom-toolbar-1.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | export default class CustomToolBarTable1 extends React.Component { 25 | 26 | createCustomToolBar = props => { 27 | return ( 28 |
29 | { props.components.btnGroup } 30 |
31 | { props.components.searchPanel } 32 |
33 |
34 | ); 35 | } 36 | 37 | render() { 38 | const selectRow = { 39 | mode: 'checkbox', 40 | showOnlySelected: true 41 | }; 42 | const options = { 43 | toolBar: this.createCustomToolBar 44 | }; 45 | return ( 46 | 53 | Product ID 54 | Product Name 55 | Product Price 56 | 57 | ); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /examples/js/custom/toolbar/left-search-panel.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | export default class LeftSearchPanel extends React.Component { 25 | 26 | render() { 27 | const options = { 28 | searchPosition: 'left' // right or left 29 | }; 30 | return ( 31 | 34 | Product ID 35 | Product Name 36 | Product Price 37 | 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/js/expandRow/style.css: -------------------------------------------------------------------------------- 1 | .custom-expand-parent { 2 | background-color: salmon; 3 | } 4 | 5 | .custom-expand-body-1 { 6 | font-size: 8px; 7 | color: lawngreen; 8 | background-color: darkkhaki; 9 | } 10 | 11 | .custom-expand-body-0 { 12 | font-size: 16px; 13 | font-weight: bold; 14 | background-color: springgreen; 15 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 16 | } -------------------------------------------------------------------------------- /examples/js/footer/demo.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import FooterTable from './footer-table'; 4 | 5 | class Demo extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |
11 |
Table Footer Example
12 |
13 |
Source in /examples/js/footer/footer-table.js
14 | 15 |
16 |
17 |
18 |
19 | ); 20 | } 21 | } 22 | 23 | export default Demo; 24 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/custom-style-nav-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class CustomStyleNavTable extends React.Component { 24 | 25 | customStyle = (cell, row) => { 26 | return { 27 | backgroundColor: 'red' 28 | }; 29 | } 30 | 31 | render() { 32 | const keyBoardNav = { 33 | customStyle: this.customStyle 34 | }; 35 | return ( 36 | 37 | Product ID 38 | Product Name 39 | Product Price 40 | 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/custom-style-nav-with-cell-edit-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class CellEditWithNavWithoutStyleTable extends React.Component { 24 | 25 | customStyle = (cell, row) => { 26 | return { 27 | backgroundColor: 'red' 28 | }; 29 | } 30 | 31 | render() { 32 | const cellEdit = { 33 | mode: 'click', 34 | blurToSave: true 35 | }; 36 | const keyBoardNav = { 37 | customStyleOnEditCell: this.customStyle 38 | }; 39 | 40 | return ( 41 | 42 | Product ID 43 | Product Name 44 | Product Price 45 | 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/disable-click-to-nav-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class SimpleNavTable extends React.Component { 23 | render() { 24 | const selectRow = { 25 | mode: 'checkbox', 26 | clickToSelect: true 27 | }; 28 | const keyBoardNav = { 29 | clickToNav: false 30 | }; 31 | return ( 32 | 33 | Product ID 34 | Product Name 35 | Product Price 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/enter-to-edit-with-nav-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class EnterToEditWithNavTable extends React.Component { 23 | render() { 24 | const cellEdit = { 25 | mode: 'click', 26 | blurToSave: true 27 | }; 28 | const keyBoardNav = { 29 | enterToEdit: true 30 | }; 31 | return ( 32 | 33 | Product ID 34 | Product Name 35 | Product Price 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/enter-to-expand-row-with-nav-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class EnterToExpandWithNavTable extends React.Component { 23 | 24 | isExpandableRow(row) { 25 | if (row.id < 3) return true; 26 | else return false; 27 | } 28 | 29 | expandComponent(row) { 30 | return ( 31 |
32 |

I'm expand panel for row: { row.id }

33 |

This is a demo for expanding table with keyboard navigation

34 |
35 | ); 36 | } 37 | 38 | render() { 39 | const keyBoardNav = { 40 | enterToExpand: true 41 | }; 42 | return ( 43 | 47 | Product ID 48 | Product Name 49 | Product Price 50 | 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/enter-to-select-row-with-nav-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class SimpleNavTable extends React.Component { 23 | render() { 24 | const selectRow = { 25 | mode: 'checkbox' 26 | }; 27 | const keyBoardNav = { 28 | enterToSelect: true 29 | }; 30 | return ( 31 | 32 | Product ID 33 | Product Name 34 | Product Price 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/nav-with-cell-edit-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class CellEditWithNavTable extends React.Component { 23 | render() { 24 | const cellEdit = { 25 | mode: 'click', 26 | blurToSave: true 27 | }; 28 | return ( 29 | 30 | Product ID 31 | Product Name 32 | Product Price 33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/nav-with-expand-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class NavWithExpandTable extends React.Component { 23 | 24 | isExpandableRow(row) { 25 | if (row.id < 3) return true; 26 | else return false; 27 | } 28 | 29 | expandComponent(row) { 30 | return ( 31 |
32 |

I'm expand panel for row: { row.id }

33 |

This is a demo for expanding table with keyboard navigation

34 |
35 | ); 36 | } 37 | 38 | render() { 39 | return ( 40 | 44 | Product ID 45 | Product Name 46 | Product Price 47 | 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/nav-with-select-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class SimpleNavTable extends React.Component { 23 | render() { 24 | const selectRow = { 25 | mode: 'checkbox' 26 | }; 27 | return ( 28 | 29 | Product ID 30 | Product Name 31 | Product Price 32 | 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/pagination-nav-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(75); 21 | 22 | export default class PaginationNavTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/keyboard-nav/simple-nav-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class SimpleNavTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/manipulation/custom-btn-text-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-alert: 0 */ 3 | /* eslint guard-for-in: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | const options = { 25 | exportCSVText: 'my_export', 26 | insertText: 'my_insert', 27 | deleteText: 'my_delete', 28 | saveText: 'my_save', 29 | closeText: 'my_close' 30 | }; 31 | 32 | export default class InsertRowTable extends React.Component { 33 | render() { 34 | return ( 35 | 39 | Product ID 40 | Product Name 41 | Product Price 42 | 43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/js/manipulation/debounce-search-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | const fruits = [ 'banana', 'apple', 'orange', 'tomato', 'strawberries', 'cherries' ]; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Fruits: ' + fruits[i] + ' and ' + fruits[i + 1], 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | 24 | export default class DebounceSearchTable extends React.Component { 25 | render() { 26 | const options = { 27 | searchDelayTime: 3000 28 | }; 29 | 30 | return ( 31 | 32 | Product ID 33 | Fruits 34 | Price 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/js/manipulation/default-search-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-console: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | const fruits = [ 'banana', 'apple', 'orange', 'tomato', 'strawberries' ]; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Fruit name is ' + fruits[i], 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | const options = { 25 | defaultSearch: 'banana' 26 | }; 27 | 28 | export default class SearchTable extends React.Component { 29 | render() { 30 | return ( 31 | 32 | Product ID 33 | Fruit Name 34 | Product Price 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/js/manipulation/del-row-custom-confirm.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-console: 0 */ 3 | /* eslint no-alert: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | function customConfirm(next, dropRowKeys) { 25 | const dropRowKeysStr = dropRowKeys.join(','); 26 | if (confirm(`(It's a custom confirm)Are you sure you want to delete ${dropRowKeysStr}?`)) { 27 | // If the confirmation is true, call the function that 28 | // continues the deletion of the record. 29 | next(); 30 | } 31 | } 32 | 33 | const options = { 34 | handleConfirmDeleteRow: customConfirm 35 | }; 36 | 37 | // If you want to enable deleteRow, you must enable row selection also. 38 | const selectRowProp = { 39 | mode: 'checkbox' 40 | }; 41 | 42 | export default class DeleteRowCustomComfirmTable extends React.Component { 43 | render() { 44 | return ( 45 | 46 | Product ID 47 | Product Name 48 | Product Price 49 | 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /examples/js/manipulation/delete-row-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-console: 0 */ 3 | /* eslint no-alert: 0 */ 4 | /* eslint no-unused-vars: 0 */ 5 | import React from 'react'; 6 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 7 | 8 | 9 | const products = []; 10 | 11 | function addProducts(quantity) { 12 | const startId = products.length; 13 | for (let i = 0; i < quantity; i++) { 14 | const id = startId + i; 15 | products.push({ 16 | id: id, 17 | name: 'Item name ' + id, 18 | price: 2100 + i 19 | }); 20 | } 21 | } 22 | 23 | addProducts(5); 24 | 25 | function onAfterDeleteRow(rowKeys, rows) { 26 | alert('The rowkey you drop: ' + rowKeys); 27 | } 28 | 29 | const options = { 30 | afterDeleteRow: onAfterDeleteRow // A hook for after droping rows. 31 | }; 32 | 33 | // If you want to enable deleteRow, you must enable row selection also. 34 | const selectRowProp = { 35 | mode: 'checkbox' 36 | }; 37 | 38 | export default class DeleteRowTable extends React.Component { 39 | render() { 40 | return ( 41 | 42 | Product ID 43 | Product Name 44 | Product Price 45 | 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/js/manipulation/export-csv-column-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0*/ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | class ActionFormatter extends React.Component { 24 | render() { 25 | return ( 26 | 27 | ); 28 | } 29 | } 30 | 31 | function actionFormatter(cell, row) { 32 | return ; 33 | } 34 | 35 | export default class ExportCSVTable extends React.Component { 36 | 37 | render() { 38 | return ( 39 | 40 | 41 | Product Name 42 | Product Price 43 | Action 44 | 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /examples/js/manipulation/export-csv-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0*/ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | const qualityType = { 10 | 0: 'good', 11 | 1: 'bad', 12 | 2: 'unknown' 13 | }; 14 | 15 | function addProducts(quantity) { 16 | const startId = products.length; 17 | for (let i = 0; i < quantity; i++) { 18 | const id = startId + i; 19 | products.push({ 20 | id: id, 21 | name: 'Item name ' + id, 22 | price: 2100 + i, 23 | quality: i % 3 24 | }); 25 | } 26 | } 27 | 28 | addProducts(5); 29 | 30 | export default class ExportCSVTable extends React.Component { 31 | 32 | csvPriceFormatter(cell, row) { 33 | return `${row.id}: ${cell} USD`; 34 | } 35 | 36 | csvQualityFormatter(cell, row, extra) { 37 | return extra[cell]; 38 | } 39 | 40 | render() { 41 | const options = { exportCSVSeparator: '##' }; 42 | return ( 43 | 44 | Product ID 45 | Product Name 46 | Product Price 47 | Product Quality 48 | 49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /examples/js/manipulation/filter-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-console: 0 */ 3 | /* eslint guard-for-in: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | addProducts(5); 22 | 23 | function afterColumnFilter(filterConds, result) { 24 | console.log('Filter Conditions: '); 25 | for (const prop in filterConds) { 26 | console.log('Filter column= ' + prop + ', Filter value= ' + filterConds[prop]); 27 | } 28 | console.log('Result is:'); 29 | for (let i = 0; i < result.length; i++) { 30 | console.log('Product: ' + result[i].id + ', ' + result[i].name + ', ' + result[i].price); 31 | } 32 | } 33 | 34 | const options = { 35 | afterColumnFilter: afterColumnFilter 36 | }; 37 | 38 | export default class FilterTable extends React.Component { 39 | render() { 40 | return ( 41 | 42 | Product ID 43 | Product Name 44 | Product Price 45 | 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/js/manipulation/insert-row-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-alert: 0 */ 3 | /* eslint guard-for-in: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | function onAfterInsertRow(row) { 25 | let newRowStr = ''; 26 | 27 | for (const prop in row) { 28 | newRowStr += prop + ': ' + row[prop] + ' \n'; 29 | } 30 | alert('The new row is:\n ' + newRowStr); 31 | } 32 | 33 | const options = { 34 | afterInsertRow: onAfterInsertRow // A hook for after insert rows 35 | }; 36 | 37 | export default class InsertRowTable extends React.Component { 38 | render() { 39 | return ( 40 | 41 | Product ID 42 | Product Name 43 | Product Price 44 | 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /examples/js/manipulation/multi-search-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | const fruits = [ 'banana', 'apple', 'orange', 'tomato', 'strawberries', 'cherries' ]; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Fruits: ' + fruits[i] + ' and ' + fruits[i + 1], 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | 24 | export default class MultiSearchTable extends React.Component { 25 | render() { 26 | return ( 27 | 28 | Product ID 29 | Fruits 30 | Price 31 | 32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/js/manipulation/search-clear-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-console: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | function afterSearch(searchText, result) { 24 | console.log(`Your search text is ${searchText}`); 25 | console.log('Result is:'); 26 | for (let i = 0; i < result.length; i++) { 27 | console.log('Product: ' + result[i].id + ', ' + result[i].name + ', ' + result[i].price); 28 | } 29 | } 30 | 31 | const options = { 32 | afterSearch: afterSearch, // define a after search hook, 33 | clearSearch: true 34 | }; 35 | 36 | export default class SearchClearTable extends React.Component { 37 | render() { 38 | return ( 39 | 40 | Product ID 41 | Product Name 42 | Product Price 43 | 44 | ); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /examples/js/manipulation/search-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-console: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | const fruits = [ 'banana', 'apple', 'orange', 'tomato', 'strawberries' ]; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Fruit name is ' + fruits[i], 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | function afterSearch(searchText, result) { 25 | console.log('Your search text is ' + searchText); 26 | console.log('Result is:'); 27 | for (let i = 0; i < result.length; i++) { 28 | console.log('Fruit: ' + result[i].id + ', ' + result[i].name + ', ' + result[i].price); 29 | } 30 | } 31 | 32 | const options = { 33 | afterSearch: afterSearch // define a after search hook 34 | }; 35 | 36 | export default class SearchTable extends React.Component { 37 | render() { 38 | return ( 39 | 40 | Product ID 41 | Fruit Name 42 | Product Price 43 | 44 | ); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /examples/js/manipulation/strict-multi-search-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | const fruits = [ 'banana', 'apple', 'orange', 'tomato', 'strawberries', 'cherries' ]; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Fruits: ' + fruits[i] + ' and ' + fruits[i + 1], 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | 24 | export default class StrictMultiSearchTable extends React.Component { 25 | render() { 26 | return ( 27 | 28 | Product ID 29 | Fruits 30 | Price 31 | 32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/js/manipulation/strict-search-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-console: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | const fruits = [ 'banana', 'apple', 'orange', 'tomato', 'strawberries' ]; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Fruit name is ' + fruits[i], 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | function afterSearch(searchText, result) { 25 | console.log('Your search text is ' + searchText); 26 | console.log('Result is:'); 27 | for (let i = 0; i < result.length; i++) { 28 | console.log('Fruit: ' + result[i].id + ', ' + result[i].name + ', ' + result[i].price); 29 | } 30 | } 31 | 32 | const options = { 33 | afterSearch: afterSearch // define a after search hook 34 | }; 35 | 36 | export default class StrictSearchTable extends React.Component { 37 | render() { 38 | return ( 39 | 40 | Product ID 41 | Fruit Name 42 | Product Price 43 | 44 | ); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /examples/js/others/demo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MouseEventTable from './mouse-event-table'; 3 | import TableInTabs from './table-in-tabs'; 4 | import GetPageNumByKeyTable from './expose-api-table'; 5 | import PrintableTable from './printable-table'; 6 | import { Col, Panel } from 'react-bootstrap'; 7 | 8 | class Demo extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 13 |
Source in /examples/js/others/mouse-event-table.js
14 |
See event ouput in browser console
15 | 16 | 17 | 18 |
Source in /examples/js/others/table-in-tabs.js
19 |
react-bootstrap-table in tabs
20 | 21 | 22 | 23 |
Source in /examples/js/others/expose-api-table.js
24 |
Use expose API by BootstrapTable to get page number by rowkey
25 | 26 | 27 | 28 |
Source in /examples/js/others/printable-table.js
29 | 30 | 31 | 32 | ); 33 | } 34 | } 35 | 36 | export default Demo; 37 | -------------------------------------------------------------------------------- /examples/js/others/mouse-event-table.js: -------------------------------------------------------------------------------- 1 | /* eslint no-console: 0 */ 2 | /* eslint no-console: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class MouseEventTable extends React.Component { 24 | render() { 25 | const options = { 26 | onMouseLeave: function() { 27 | console.log('mouse leave from table'); 28 | }, 29 | onMouseEnter: function() { 30 | console.log('mouse enter to table'); 31 | }, 32 | onRowMouseOut: function(row, e) { 33 | console.log(e); 34 | console.log('mouse leave from row ' + row.id); 35 | }, 36 | onRowMouseOver: function(row, e) { 37 | console.log(e); 38 | console.log('mouse enter from row ' + row.id); 39 | } 40 | }; 41 | 42 | return ( 43 | 44 | Product ID 45 | Product Name 46 | Product Price 47 | 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /examples/js/others/printable-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-console: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | const fruits = [ 'banana', 'apple', 'orange', 'tomato', 'strawberries' ]; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Fruit name is ' + fruits[i], 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | const options = { 25 | printToolBar: false 26 | }; 27 | 28 | export default class Printable extends React.Component { 29 | render() { 30 | return ( 31 | 32 | Product ID 33 | Fruit Name 34 | Product Price 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/js/pagination/default-pagination-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(70); 21 | 22 | export default class DefaultPaginationTable extends React.Component { 23 | constructor(props) { 24 | super(props); 25 | } 26 | 27 | render() { 28 | return ( 29 |
30 | 33 | Product ID 34 | Product Name 35 | Product Price 36 | 37 |
38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/js/pagination/icon-pagination-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(70); 21 | 22 | export default class IconPaginationTable extends React.Component { 23 | constructor(props) { 24 | super(props); 25 | } 26 | 27 | render() { 28 | const tableOptions = { 29 | prePage: , 30 | nextPage: , 31 | firstPage: , 32 | lastPage: 33 | }; 34 | 35 | return ( 36 |
37 | 41 | Product ID 42 | Product Name 43 | Product Price 44 | 45 |
46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/js/pagination/pagination-hook-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-alert: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(70); 22 | 23 | export default class PaginationHookTable extends React.Component { 24 | constructor(props) { 25 | super(props); 26 | 27 | this.options = { 28 | onPageChange: this.onPageChange.bind(this), 29 | onSizePerPageList: this.sizePerPageListChange.bind(this) 30 | }; 31 | } 32 | 33 | sizePerPageListChange(sizePerPage) { 34 | alert(`sizePerPage: ${sizePerPage}`); 35 | } 36 | 37 | onPageChange(page, sizePerPage) { 38 | alert(`page: ${page}, sizePerPage: ${sizePerPage}`); 39 | } 40 | 41 | render() { 42 | return ( 43 |
44 | 48 | Product ID 49 | Product Name 50 | Product Price 51 | 52 |
53 | ); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /examples/js/remote/remote-alternative.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 3 | 4 | export default class RemoteAlternative extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | remote(remoteObj) { 10 | // Only cell editing, insert and delete row will be handled by remote store 11 | remoteObj.cellEdit = true; 12 | remoteObj.insertRow = true; 13 | remoteObj.dropRow = true; 14 | return remoteObj; 15 | } 16 | 17 | render() { 18 | const cellEditProp = { 19 | mode: 'click' 20 | }; 21 | const selectRow = { 22 | mode: 'checkbox', 23 | cliclToSelct: true 24 | }; 25 | return ( 26 | 36 | Product ID 37 | Product Name 38 | Product Price 39 | 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/js/remote/remote-cell-edit.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 3 | 4 | export default class RemoteCellEdit extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | const cellEditProp = { 11 | mode: 'click' 12 | }; 13 | return ( 14 | 18 | Product ID 19 | Product Name 20 | Product Price 21 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/js/remote/remote-delete-row.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 3 | 4 | export default class RemoteDeleteRow extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 | 16 | Product ID 17 | Product Name 18 | Product Price 19 | 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/js/remote/remote-export-csv.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 3 | 4 | export default class RemoteExportCSV extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 | 15 | Product ID 16 | Product Name 17 | Product Price 18 | 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/js/remote/remote-filtering.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 3 | 4 | export default class RemoteFiltering extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 | 14 | Product ID 15 | Product Name 17 | ', '<=' ] } }> 20 | Product Price 21 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/js/remote/remote-insert-row.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 3 | 4 | export default class RemoteInsertRow extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 | 15 | Product ID 16 | Product Name 17 | Product Price 18 | 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/js/remote/remote-paging.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 3 | 4 | export default class RemotePaging extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 | 18 | Product ID 19 | Product Name 20 | Product Price 21 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/js/remote/remote-search.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 3 | 4 | export default class RemoteSearch extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 | 16 | Product ID 17 | Product Name 18 | Product Price 19 | 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/js/remote/remote-sorting.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 3 | 4 | export default class RemoteSorting extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 | 14 | Product ID 15 | Product Name 16 | Product Price 17 | 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/js/remote/remote-store-cell-edit.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RemoteCellEdit from './remote-cell-edit'; 3 | 4 | function getProducts() { 5 | const products = []; 6 | const startId = products.length; 7 | for (let i = 0; i < 12; i++) { 8 | const id = startId + i; 9 | products.push({ 10 | id: id, 11 | name: 'Item name ' + id, 12 | price: Math.floor((Math.random() * 2000) + 1) 13 | }); 14 | } 15 | return products; 16 | } 17 | 18 | export default class RemoteStoreCellEdit extends React.Component { 19 | constructor(props) { 20 | super(props); 21 | this.products = getProducts(); 22 | this.state = { 23 | data: this.products 24 | }; 25 | } 26 | 27 | onCellEdit = (row, fieldName, value) => { 28 | const { data } = this.state; 29 | let rowIdx; 30 | const targetRow = data.find((prod, i) => { 31 | if (prod.id === row.id) { 32 | rowIdx = i; 33 | return true; 34 | } 35 | return false; 36 | }); 37 | if (targetRow) { 38 | targetRow[fieldName] = value; 39 | data[rowIdx] = targetRow; 40 | this.setState({ data }); 41 | } 42 | } 43 | 44 | render() { 45 | return ( 46 | 47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /examples/js/remote/remote-store-delete-row.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RemoteDeleteRow from './remote-delete-row'; 3 | 4 | function getProducts() { 5 | const products = []; 6 | const startId = products.length; 7 | for (let i = 0; i < 12; i++) { 8 | const id = startId + i; 9 | products.push({ 10 | id: id, 11 | name: 'Item name ' + id, 12 | price: Math.floor((Math.random() * 2000) + 1) 13 | }); 14 | } 15 | return products; 16 | } 17 | 18 | export default class RemoteStoreDeleteRow extends React.Component { 19 | constructor(props) { 20 | super(props); 21 | this.products = getProducts(); 22 | this.state = { 23 | data: this.products 24 | }; 25 | } 26 | 27 | onDeleteRow(row) { 28 | this.products = this.products.filter((product) => { 29 | return product.id !== row[0]; 30 | }); 31 | 32 | this.setState({ 33 | data: this.products 34 | }); 35 | } 36 | 37 | render() { 38 | return ( 39 | 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/js/remote/remote-store-export-csv.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RemoteExportCSV from './remote-export-csv'; 3 | 4 | function getProducts() { 5 | const products = []; 6 | const startId = products.length; 7 | for (let i = 0; i < 12; i++) { 8 | const id = startId + i; 9 | products.push({ 10 | id: id, 11 | name: 'Item name ' + id, 12 | price: Math.floor((Math.random() * 2000) + 1) 13 | }); 14 | } 15 | return products; 16 | } 17 | 18 | export default class RemoteStoreExportCSV extends React.Component { 19 | constructor(props) { 20 | super(props); 21 | this.products = getProducts(); 22 | this.state = { 23 | data: this.products 24 | }; 25 | } 26 | 27 | onExportToCSV() { 28 | return this.products; 29 | } 30 | 31 | render() { 32 | return ( 33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/js/remote/remote-store-insert-row.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RemoteInsertRow from './remote-insert-row'; 3 | 4 | function getProducts() { 5 | const products = []; 6 | const startId = products.length; 7 | for (let i = 0; i < 12; i++) { 8 | const id = startId + i; 9 | products.push({ 10 | id: id, 11 | name: 'Item name ' + id, 12 | price: Math.floor((Math.random() * 2000) + 1) 13 | }); 14 | } 15 | return products; 16 | } 17 | 18 | export default class RemoteStoreInsertRow extends React.Component { 19 | constructor(props) { 20 | super(props); 21 | this.products = getProducts(); 22 | this.state = { 23 | data: this.products 24 | }; 25 | } 26 | 27 | onAddRow(row) { 28 | this.products.push(row); 29 | this.setState({ 30 | data: this.products 31 | }); 32 | } 33 | 34 | render() { 35 | return ( 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/js/remote/remote-store-paging.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RemotePaging from './remote-paging'; 3 | 4 | function getProducts() { 5 | const products = []; 6 | const startId = products.length; 7 | for (let i = 0; i < 12; i++) { 8 | const id = startId + i; 9 | products.push({ 10 | id: id, 11 | name: 'Item name ' + id, 12 | price: Math.floor((Math.random() * 2000) + 1) 13 | }); 14 | } 15 | return products; 16 | } 17 | 18 | export default class RemoteStorePaging extends React.Component { 19 | constructor(props) { 20 | super(props); 21 | this.products = getProducts(); 22 | this.state = { 23 | data: this.products.slice(0, this.props.sizePerPage), 24 | totalDataSize: this.products.length, 25 | sizePerPage: this.props.sizePerPage, 26 | currentPage: 1 27 | }; 28 | } 29 | 30 | onPageChange(page, sizePerPage) { 31 | const currentIndex = (page - 1) * sizePerPage; 32 | this.setState({ 33 | data: this.products.slice(currentIndex, currentIndex + sizePerPage), 34 | currentPage: page 35 | }); 36 | } 37 | 38 | onSizePerPageList(sizePerPage) { 39 | const currentIndex = (this.state.currentPage - 1) * sizePerPage; 40 | this.setState({ 41 | data: this.products.slice(currentIndex, currentIndex + sizePerPage), 42 | sizePerPage: sizePerPage 43 | }); 44 | } 45 | 46 | render() { 47 | return ( 48 | 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /examples/js/remote/remote-store-sorting.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RemoteSorting from './remote-sorting'; 3 | 4 | function getProducts() { 5 | const products = []; 6 | const startId = products.length; 7 | for (let i = 0; i < 12; i++) { 8 | const id = startId + i; 9 | products.push({ 10 | id: id, 11 | name: 'Item name ' + id, 12 | price: Math.floor((Math.random() * 2000) + 1) 13 | }); 14 | } 15 | return products; 16 | } 17 | 18 | export default class RemoteStoreSorting extends React.Component { 19 | constructor(props) { 20 | super(props); 21 | this.products = getProducts(); 22 | this.state = { 23 | data: this.products 24 | }; 25 | } 26 | 27 | onSortChange(sortName, sortOrder) { 28 | if (sortOrder === 'asc') { 29 | this.products.sort(function(a, b) { 30 | if (parseInt(a[sortName], 10) > parseInt(b[sortName], 10)) { 31 | return 1; 32 | } else if (parseInt(b[sortName], 10) > parseInt(a[sortName], 10)) { 33 | return -1; 34 | } 35 | return 0; 36 | }); 37 | } else { 38 | this.products.sort(function(a, b) { 39 | if (parseInt(a[sortName], 10) > parseInt(b[sortName], 10)) { 40 | return -1; 41 | } else if (parseInt(b[sortName], 10) > parseInt(a[sortName], 10)) { 42 | return 1; 43 | } 44 | return 0; 45 | }); 46 | } 47 | 48 | this.setState({ 49 | data: this.products 50 | }); 51 | } 52 | 53 | render() { 54 | return ( 55 | 56 | ); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /examples/js/selection/all-select.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-alert: 0 */ 3 | /* eslint guard-for-in: 0 */ 4 | /* eslint no-console: 0 */ 5 | import React from 'react'; 6 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 7 | 8 | 9 | const products = []; 10 | 11 | function addProducts(quantity) { 12 | const startId = products.length; 13 | for (let i = 0; i < quantity; i++) { 14 | const id = startId + i; 15 | products.push({ 16 | id: id, 17 | name: 'Item name ' + id, 18 | price: 2100 + i 19 | }); 20 | } 21 | } 22 | 23 | addProducts(50); 24 | 25 | export default class SelectAllOnAllPage extends React.Component { 26 | 27 | onSelectAll = (isSelected) => { 28 | if (isSelected) { 29 | return products.map(row => row.id); 30 | } else { 31 | return []; 32 | } 33 | } 34 | 35 | render() { 36 | const selectRowProp = { 37 | mode: 'checkbox', 38 | clickToSelect: true, 39 | onSelectAll: this.onSelectAll 40 | }; 41 | 42 | return ( 43 | 44 | Product ID 45 | Product Name 46 | Product Price 47 | 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /examples/js/selection/click-to-select-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox', 24 | clickToSelect: true // enable click to select 25 | }; 26 | 27 | export default class ClickToSelectTable extends React.Component { 28 | render() { 29 | return ( 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/selection/default-select-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox', 24 | selected: [ 0, 2, 4 ] // give a array which contain the row key you want to select. 25 | }; 26 | 27 | export default class DefaultSelectTable extends React.Component { 28 | render() { 29 | return ( 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/selection/hide-selection-col-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox', 24 | bgColor: 'pink', // you should give a bgcolor, otherwise, you can't regonize which row has been selected 25 | hideSelectColumn: true, // enable hide selection column. 26 | clickToSelect: true // you should enable clickToSelect, otherwise, you can't select column. 27 | }; 28 | 29 | export default class HideSelectionColumnTable extends React.Component { 30 | render() { 31 | return ( 32 | 33 | Product ID 34 | Product Name 35 | Product Price 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/js/selection/multi-select-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox' 24 | }; 25 | 26 | export default class MultiSelectTable extends React.Component { 27 | render() { 28 | return ( 29 | 30 | Product ID 31 | Product Name 32 | Product Price 33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/js/selection/only-show-selected-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox', 24 | showOnlySelected: true 25 | }; 26 | 27 | export default class DefaultSelectTable extends React.Component { 28 | render() { 29 | return ( 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/selection/row-click-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-alert: 0 */ 3 | /* eslint no-console: 0 */ 4 | import React from 'react'; 5 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(50); 23 | 24 | const options = { 25 | onRowClick: function(row, columnIndex, rowIndex, e) { 26 | alert(`You click row id: ${row.id}, column index: ${columnIndex}, row index: ${rowIndex}`); 27 | console.log(e); 28 | }, 29 | onRowDoubleClick: function(row, e) { 30 | alert(`You double click row id: ${row.id}`); 31 | console.log(e); 32 | } 33 | }; 34 | 35 | export default class SingleSelectTable extends React.Component { 36 | render() { 37 | return ( 38 | 39 | Product ID 40 | Product Name 41 | Product Price 42 | 43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/js/selection/select-bgcolor-dynamic-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox', 24 | bgColor: function(row, isSelect) { 25 | if (isSelect) { 26 | const { id } = row; 27 | if (id < 2) return 'blue'; 28 | else if (id < 4) return 'red'; 29 | else return 'yellow'; 30 | } 31 | return null; 32 | } 33 | }; 34 | 35 | export default class SelectBgColorDynamicTable extends React.Component { 36 | render() { 37 | return ( 38 | 39 | Product ID 40 | Product Name 41 | Product Price 42 | 43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/js/selection/select-bgcolor-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox', 24 | bgColor: 'pink' 25 | }; 26 | 27 | export default class SelectBgColorTable extends React.Component { 28 | render() { 29 | return ( 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/selection/select-filter-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(23); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox', 24 | onlyUnselectVisible: true // Particular for unselect all case, it will unselect visible rows. 25 | }; 26 | 27 | export default class SelectAllWithFilterTable extends React.Component { 28 | render() { 29 | return ( 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/selection/select-row-class-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class SelectBgColorTable extends React.Component { 23 | constructor(props) { 24 | super(props); 25 | this.selectedRowClass = this.selectedRowClass.bind(this); 26 | } 27 | 28 | selectedRowClass(row, isSelect) { 29 | if (isSelect) { 30 | if (row.id >= 3) { 31 | return 'bigger-than-three-select-row'; 32 | } else { 33 | return 'less-than-three-select-row'; 34 | } 35 | } else { 36 | return ''; 37 | } 38 | } 39 | 40 | render() { 41 | const selectRowProp = { 42 | mode: 'checkbox', 43 | clickToSelect: true, 44 | // You can assign className with a string or function 45 | // String is most easy case but if you want to have more ability to custom the class name 46 | // you can assign a function 47 | className: this.selectedRowClass 48 | }; 49 | return ( 50 | 51 | Product ID 52 | Product Name 53 | Product Price 54 | 55 | ); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /examples/js/selection/select-validation-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-alert: 0 */ 3 | /* eslint guard-for-in: 0 */ 4 | /* eslint no-console: 0 */ 5 | /* eslint no-unused-vars: 0 */ 6 | import React from 'react'; 7 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 8 | 9 | 10 | const products = []; 11 | 12 | function addProducts(quantity) { 13 | const startId = products.length; 14 | for (let i = 0; i < quantity; i++) { 15 | const id = startId + i; 16 | products.push({ 17 | id: id, 18 | name: 'Item name ' + id, 19 | price: 2100 + i 20 | }); 21 | } 22 | } 23 | 24 | addProducts(5); 25 | 26 | function onRowSelect(row, isSelected, e) { 27 | if (isSelected && row.id >= 3) { 28 | alert('The selection only work on key which less than 3'); 29 | return false; 30 | } 31 | } 32 | 33 | function onSelectAll(isSelected, rows) { 34 | if (isSelected) { 35 | alert('The selection only work on key which less than 3'); 36 | return products.map(p => p.id).filter(id => id < 3); 37 | } 38 | } 39 | 40 | const selectRowProp = { 41 | mode: 'checkbox', 42 | clickToSelect: true, 43 | onSelect: onRowSelect, 44 | onSelectAll: onSelectAll 45 | }; 46 | 47 | export default class SelectValidationTable extends React.Component { 48 | render() { 49 | return ( 50 | 51 | Product ID 52 | Product Name 53 | Product Price 54 | 55 | ); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /examples/js/selection/selection-column-width-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox', 24 | columnWidth: '60px' 25 | }; 26 | 27 | export default class SelectionColumnWidthTable extends React.Component { 28 | render() { 29 | return ( 30 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/selection/single-select-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'radio' 24 | }; 25 | 26 | export default class SingleSelectTable extends React.Component { 27 | render() { 28 | return ( 29 | 30 | Product ID 31 | Product Name 32 | Product Price 33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/js/selection/style.css: -------------------------------------------------------------------------------- 1 | .bigger-than-three-select-row{ 2 | font-style: italic; 3 | font-weight: 800; 4 | color: aqua; 5 | } 6 | 7 | .less-than-three-select-row { 8 | background-color: orangered; 9 | } -------------------------------------------------------------------------------- /examples/js/selection/unselectable-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | const selectRowProp = { 23 | mode: 'checkbox', 24 | clickToSelect: true, 25 | unselectable: [ 1, 3 ] // give rowkeys for unselectable row 26 | }; 27 | 28 | export default class UnSelectableTable extends React.Component { 29 | render() { 30 | return ( 31 | 32 | Product ID 33 | Product Name 34 | Product Price 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/js/sort/clean-sorted-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class CleanSortedTable extends React.Component { 23 | 24 | cleanSort = () => { 25 | this.refs.table.cleanSort(); 26 | } 27 | 28 | render() { 29 | return ( 30 |
31 | 32 | 33 | Product ID 34 | Product Name 35 | Product Price 36 | 37 |
38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/js/sort/custom-caret-sort-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | function getCaret(direction) { 23 | if (direction === 'asc') { 24 | return ( 25 | up 26 | ); 27 | } 28 | if (direction === 'desc') { 29 | return ( 30 | down 31 | ); 32 | } 33 | return ( 34 | up/down 35 | ); 36 | } 37 | 38 | export default class CustomSortTable extends React.Component { 39 | render() { 40 | return ( 41 | 42 | Product ID 43 | Product Name 44 | Product Price 45 | 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/js/sort/custom-sort-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | function revertSortFunc(a, b, order) { // order is desc or asc 23 | if (order === 'desc') { 24 | return a.price - b.price; 25 | } else { 26 | return b.price - a.price; 27 | } 28 | } 29 | 30 | export default class CustomSortTable extends React.Component { 31 | render() { 32 | return ( 33 | 34 | Product ID 35 | Product Name 36 | Product Price 37 | 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/js/sort/default-asc-sort-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | const products = []; 6 | 7 | function addProducts(quantity) { 8 | const startId = products.length; 9 | for (let i = 0; i < quantity; i++) { 10 | const id = startId + i; 11 | products.push({ 12 | id: id, 13 | name: 'Item name ' + id, 14 | price: 2100 + i 15 | }); 16 | } 17 | } 18 | 19 | addProducts(5); 20 | 21 | export default class DefaultASCSortTable extends React.Component { 22 | render() { 23 | return ( 24 | 25 | Product ID 26 | Product Name 27 | Product Price 28 | 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/js/sort/default-sort-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class DefaultSortTable extends React.Component { 23 | constructor(props) { 24 | super(props); 25 | 26 | this.options = { 27 | defaultSortName: 'name', // default sort column name 28 | defaultSortOrder: 'desc' // default sort order 29 | }; 30 | } 31 | 32 | render() { 33 | return ( 34 |
35 | 36 | Product ID 37 | Product Name 38 | Product Price 39 | 40 |
41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /examples/js/sort/disable-sort-indicator-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class DisableSortIndicatorTable extends React.Component { 23 | constructor(props) { 24 | super(props); 25 | 26 | this.options = { 27 | sortIndicator: false // disable sort indicator 28 | }; 29 | } 30 | 31 | render() { 32 | return ( 33 |
34 | 35 | Product ID 36 | Product Name 37 | Product Price 38 | 39 |
40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/js/sort/multi-sort-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | let price = 2100; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | 14 | if (id % 5 === 0) { 15 | price += 100; 16 | } 17 | 18 | products.push({ 19 | id: id, 20 | name: 'Item name ' + (id % 3 + 1), 21 | price: price 22 | }); 23 | } 24 | } 25 | 26 | addProducts(15); 27 | 28 | export default class MultiSortTable extends React.Component { 29 | 30 | render() { 31 | return ( 32 |
33 | 34 | Product ID 35 | Product Name 36 | Product Price 37 | 38 |
39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /examples/js/sort/reusable-custom-sort-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | function numberSortFunc(a, b, order, sortField) { // order is desc or asc 23 | if (order === 'desc') { 24 | return a[sortField] - b[sortField]; 25 | } else { 26 | return b[sortField] - a[sortField]; 27 | } 28 | } 29 | 30 | export default class CustomSortTable extends React.Component { 31 | render() { 32 | return ( 33 | 34 | Product ID 35 | Product Name 36 | Product Price 37 | 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/js/sort/sort-hook-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-console: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class SortHookTable extends React.Component { 24 | constructor(props) { 25 | super(props); 26 | 27 | this.state = { 28 | sortName: undefined, 29 | sortOrder: undefined 30 | }; 31 | 32 | this.options = { 33 | onSortChange: this.onSortChange.bind(this) 34 | }; 35 | } 36 | 37 | onSortChange(sortName, sortOrder) { 38 | this.setState({ 39 | sortName, 40 | sortOrder 41 | }); 42 | } 43 | 44 | render() { 45 | return ( 46 |
47 |

sort: sortName={ this.state.sortName }, sortOrder={ this.state.sortOrder }

48 | 49 | Product ID 50 | Product Name 51 | Product Price 52 | 53 |
54 | ); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /examples/js/sort/sort-style-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class SortTable extends React.Component { 24 | 25 | customSortStyle = (order, dataField) => { 26 | if (order === 'desc') { 27 | return 'sort-desc'; 28 | } 29 | return 'sort-asc'; 30 | } 31 | 32 | render() { 33 | return ( 34 |
35 | 36 | Product ID 37 | Product Name 38 | Product Price 39 | 40 |
41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /examples/js/sort/sort-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | let order = 'desc'; 23 | 24 | export default class SortTable extends React.Component { 25 | 26 | handleBtnClick = () => { 27 | if (order === 'desc') { 28 | this.refs.table.handleSort('asc', 'name'); 29 | order = 'asc'; 30 | } else { 31 | this.refs.table.handleSort('desc', 'name'); 32 | order = 'desc'; 33 | } 34 | } 35 | 36 | render() { 37 | return ( 38 |
39 |

You cam click header to sort or click following button to perform a sorting by expose API

40 | 41 | 42 | Product ID 43 | Product Name 44 | Product Price 45 | 46 |
47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /examples/js/sort/style.css: -------------------------------------------------------------------------------- 1 | .sorting { 2 | color: red; 3 | } 4 | 5 | .sort-desc { 6 | color: chartreuse; 7 | } 8 | 9 | .sort-asc { 10 | color: orange; 11 | } -------------------------------------------------------------------------------- /examples/js/style/edit-td-class-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class EditColumnClassTable extends React.Component { 24 | render() { 25 | const cellEditProps = { 26 | mode: 'click' 27 | }; 28 | return ( 29 | 30 | Product ID 31 | Product Name 32 | Product Price 33 | 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/js/style/inline-style-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class TrClassStringTable extends React.Component { 24 | render() { 25 | return ( 26 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/js/style/style.css: -------------------------------------------------------------------------------- 1 | .react-bs-table-container { 2 | margin: 5px 10px; 3 | } 4 | 5 | .tr-string-example, .th-string-example{ 6 | font-style: oblique; 7 | color: red; 8 | background-color: aquamarine; 9 | } 10 | 11 | .tr-function-example{ 12 | font-weight: bold; 13 | background-color: aquamarine; 14 | } 15 | 16 | .td-header-string-example{ 17 | font-style: oblique; 18 | color: red; 19 | background-color: aquamarine; 20 | } 21 | 22 | .td-column-string-example{ 23 | color: blue; 24 | background-color: antiquewhite; 25 | } 26 | 27 | .td-column-function-odd-example{ 28 | color: blue; 29 | background-color: antiquewhite; 30 | } 31 | 32 | .td-column-function-even-example{ 33 | color: red; 34 | background-color: yellowgreen; 35 | } 36 | 37 | .my-header-class { 38 | background-color: #0066FF; 39 | } 40 | 41 | .my-body-class { 42 | background-color: #CC00FF; 43 | } 44 | 45 | .my-container-class { 46 | border: #0000FF 2.5px solid; 47 | } 48 | 49 | .my-table-container-class { 50 | border: #FFBB73 5px solid; 51 | } 52 | 53 | .class-for-editing-cell { 54 | background-color: #FFBB73; 55 | } 56 | -------------------------------------------------------------------------------- /examples/js/style/table-class-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | export default class TableClassTable extends React.Component { 24 | render() { 25 | return ( 26 | 33 | Product ID 34 | Product Name 35 | Product Price 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/js/style/table-styled-components.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | import styled from 'styled-components'; 6 | 7 | 8 | const products = []; 9 | 10 | function addProducts(quantity) { 11 | const startId = products.length; 12 | for (let i = 0; i < quantity; i++) { 13 | const id = startId + i; 14 | products.push({ 15 | id: id, 16 | name: 'Item name ' + id, 17 | price: 2100 + i 18 | }); 19 | } 20 | } 21 | 22 | addProducts(5); 23 | 24 | class Table extends React.Component { 25 | render() { 26 | return ( 27 | 31 | Product ID 32 | Product Name 33 | Product Price 34 | 35 | ); 36 | } 37 | } 38 | 39 | 40 | const StyledTable = styled(Table)` 41 | th { 42 | color: pink; 43 | } 44 | 45 | td { 46 | color: blue; 47 | } 48 | `; 49 | 50 | export default StyledTable; 51 | -------------------------------------------------------------------------------- /examples/js/style/td-class-function-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(5); 22 | 23 | function headerColumnClassNameFormat() { 24 | return 'th-string-example'; 25 | } 26 | 27 | function columnClassNameFormat(fieldValue, row, rowIdx, colIdx) { 28 | // fieldValue is column value 29 | // row is whole row object 30 | // rowIdx is index of row 31 | // colIdx is index of column 32 | return rowIdx % 2 === 0 ? 'td-column-function-even-example' : 'td-column-function-odd-example'; 33 | } 34 | 35 | export default class TrClassStringTable extends React.Component { 36 | render() { 37 | return ( 38 | 39 | Product ID 40 | Product Name 41 | Product Price 42 | 43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/js/style/td-class-string-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | addProducts(5); 21 | 22 | export default class TrClassStringTable extends React.Component { 23 | render() { 24 | return ( 25 | 26 | Product ID 27 | Product Name 28 | Product Price 29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/js/style/tr-class-function-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | addProducts(9); 22 | 23 | 24 | function trClassFormat(rowData, rIndex) { 25 | return rIndex % 3 === 0 ? 'tr-function-example' : ''; 26 | } 27 | 28 | export default class TrClassStringTable extends React.Component { 29 | render() { 30 | return ( 31 | 32 | Product ID 33 | Product Name 34 | Product Price 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/js/style/tr-class-string-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | import React from 'react'; 3 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 4 | 5 | 6 | const products = []; 7 | 8 | function addProducts(quantity) { 9 | const startId = products.length; 10 | for (let i = 0; i < quantity; i++) { 11 | const id = startId + i; 12 | products.push({ 13 | id: id, 14 | name: 'Item name ' + id, 15 | price: 2100 + i 16 | }); 17 | } 18 | } 19 | 20 | 21 | addProducts(5); 22 | 23 | export default class TrClassStringTable extends React.Component { 24 | render() { 25 | return ( 26 | 27 | Product ID 28 | Product Name 29 | Product Price 30 | 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/js/style/tr-style-table.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-unused-vars: 0 */ 3 | import React from 'react'; 4 | import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; 5 | 6 | 7 | const products = []; 8 | 9 | function addProducts(quantity) { 10 | const startId = products.length; 11 | for (let i = 0; i < quantity; i++) { 12 | const id = startId + i; 13 | products.push({ 14 | id: id, 15 | name: 'Item name ' + id, 16 | price: 2100 + i 17 | }); 18 | } 19 | } 20 | 21 | 22 | addProducts(5); 23 | 24 | export default class TrClassStringTable extends React.Component { 25 | 26 | trStyle = (row, rowIndex) => { 27 | return { backgroundColor: '#FFFAFA' }; 28 | } 29 | 30 | render() { 31 | const selectRow = { mode: 'checkbox', bgColor: 'red' }; 32 | return ( 33 | 34 | Product ID 35 | Product Name 36 | Product Price 37 | 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/js/utils.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function renderLinks(examplePath) { 4 | const gitHubBase = 'https://github.com/AllenFang/react-bootstrap-table/tree/master/examples/js'; 5 | return ( 6 |
Source in 7 | /examples/js/{ examplePath } 8 |
9 | ); 10 | } 11 | 12 | export default renderLinks; 13 | -------------------------------------------------------------------------------- /preprocessor.js: -------------------------------------------------------------------------------- 1 | var babel = require("babel"); 2 | module.exports = { 3 | process: function(src, filename) { 4 | if (!babel.canCompile(filename)) { 5 | return ''; 6 | } 7 | // Ignore all files within node_modules 8 | if (filename.indexOf('node_modules') === -1) { 9 | return babel.transform(src, {filename: filename}).code;; 10 | } 11 | return src; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /src/ExpandComponent.js: -------------------------------------------------------------------------------- 1 | /* eslint max-len: 0 */ 2 | /* eslint no-nested-ternary: 0 */ 3 | import React, { Component } from 'react'; 4 | import classSet from 'classnames'; 5 | 6 | class ExpandComponent extends Component { 7 | 8 | render() { 9 | const { className } = this.props; 10 | const trCss = { 11 | style: { 12 | backgroundColor: this.props.bgColor 13 | }, 14 | className: classSet(className) 15 | }; 16 | return ( 17 | 18 | 19 | { this.props.children } 20 | 21 | 22 | ); 23 | } 24 | } 25 | 26 | export default ExpandComponent; 27 | -------------------------------------------------------------------------------- /src/ExpandRowHeaderColumn.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | class ExpandRowHeaderColumn extends Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | this.toggleExpandAllChilds = this.toggleExpandAllChilds.bind(this); 9 | } 10 | 11 | toggleExpandAllChilds() { 12 | this.props.toggleExpandAllChilds(); 13 | } 14 | 15 | render() { 16 | const { 17 | expandedColumnHeaderComponent, 18 | noAnyExpand, 19 | expandAll 20 | } = this.props; 21 | const expandedHeaderComponent = noAnyExpand ? 22 | : 23 | ; 24 | const ExpandedColumnHeaderComponent = expandedColumnHeaderComponent; 25 | 26 | return ( 27 | 30 | { 31 | expandAll ?
32 | { expandedColumnHeaderComponent ? 33 | : expandedHeaderComponent } 35 |
: null 36 | } 37 | 38 | ); 39 | } 40 | } 41 | ExpandRowHeaderColumn.propTypes = { 42 | expandedColumnHeaderComponent: PropTypes.func, 43 | rowCount: PropTypes.number, 44 | noAnyExpand: PropTypes.bool, 45 | expandAll: PropTypes.bool, 46 | toggleExpandAllChilds: PropTypes.func 47 | }; 48 | export default ExpandRowHeaderColumn; 49 | -------------------------------------------------------------------------------- /src/Filter.js: -------------------------------------------------------------------------------- 1 | import Const from './Const'; 2 | import { EventEmitter } from 'events'; 3 | 4 | export class Filter extends EventEmitter { 5 | constructor(data) { 6 | super(data); 7 | this.currentFilter = {}; 8 | } 9 | 10 | handleFilter(dataField, value, type, filterObj) { 11 | const filterType = type || Const.FILTER_TYPE.CUSTOM; 12 | 13 | const props = { 14 | cond: filterObj.condition // Only for select and text filter 15 | }; 16 | 17 | if (value !== null && typeof value === 'object') { 18 | // value of the filter is an object 19 | let hasValue = true; 20 | for (const prop in value) { 21 | if (!value[prop] || value[prop] === '') { 22 | hasValue = false; 23 | break; 24 | } 25 | } 26 | // if one of the object properties is undefined or empty, we remove the filter 27 | if (hasValue) { 28 | this.currentFilter[dataField] = { value: value, type: filterType, props }; 29 | } else { 30 | delete this.currentFilter[dataField]; 31 | } 32 | } else if (!value || value.trim() === '') { 33 | delete this.currentFilter[dataField]; 34 | } else { 35 | this.currentFilter[dataField] = { value: value.trim(), type: filterType, props }; 36 | } 37 | this.emit('onFilterChange', this.currentFilter); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/Notification.js: -------------------------------------------------------------------------------- 1 | import Alert from 'react-s-alert'; 2 | 3 | const notice = (type, msg, title) => { 4 | const titleHTML = title ? `

${ title }

` : ''; 5 | 6 | const bodyHTML = ` 7 | ${ titleHTML } 8 |
9 |   10 | ${ msg } 11 |
12 | `; 13 | 14 | Alert.error(bodyHTML, { 15 | position: 'top-right', 16 | timeout: 3000, 17 | html: true, 18 | effect: 'scale' 19 | }); 20 | }; 21 | 22 | export { notice }; 23 | -------------------------------------------------------------------------------- /src/SelectRowHeaderColumn.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | class SelectRowHeaderColumn extends Component { 5 | 6 | render() { 7 | return ( 8 | 10 | { this.props.children } 11 | 12 | ); 13 | } 14 | } 15 | SelectRowHeaderColumn.propTypes = { 16 | children: PropTypes.node, 17 | rowCount: PropTypes.number 18 | }; 19 | export default SelectRowHeaderColumn; 20 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import BootstrapTable from './BootstrapTable'; 2 | import TableHeaderColumn from './TableHeaderColumn'; 3 | import InsertModalHeader from './toolbar/InsertModalHeader'; 4 | import InsertModalBody from './toolbar/InsertModalBody'; 5 | import InsertModalFooter from './toolbar/InsertModalFooter'; 6 | import InsertButton from './toolbar/InsertButton'; 7 | import DeleteButton from './toolbar/DeleteButton'; 8 | import ExportCSVButton from './toolbar/ExportCSVButton'; 9 | import ShowSelectedOnlyButton from './toolbar/ShowSelectedOnlyButton'; 10 | import ClearSearchButton from './toolbar/ClearSearchButton'; 11 | import SearchField from './toolbar/SearchField'; 12 | import ButtonGroup from './toolbar/ButtonGroup'; 13 | import SizePerPageDropDown from './pagination/SizePerPageDropDown'; 14 | 15 | if (typeof window !== 'undefined') { 16 | window.BootstrapTable = BootstrapTable; 17 | window.TableHeaderColumn = TableHeaderColumn; 18 | window.InsertModalHeader = InsertModalHeader; 19 | window.InsertModalBody = InsertModalBody; 20 | window.InsertModalFooter = InsertModalFooter; 21 | window.InsertButton = InsertButton; 22 | window.DeleteButton = DeleteButton; 23 | window.ShowSelectedOnlyButton = ShowSelectedOnlyButton; 24 | window.ExportCSVButton = ExportCSVButton; 25 | window.ClearSearchButton = ClearSearchButton; 26 | window.SearchField = SearchField; 27 | window.ButtonGroup = ButtonGroup; 28 | window.SizePerPageDropDown = SizePerPageDropDown; 29 | } 30 | export { 31 | BootstrapTable, 32 | TableHeaderColumn, 33 | InsertModalHeader, 34 | InsertModalBody, 35 | InsertModalFooter, 36 | InsertButton, 37 | DeleteButton, 38 | ShowSelectedOnlyButton, 39 | ExportCSVButton, 40 | ClearSearchButton, 41 | SearchField, 42 | ButtonGroup, 43 | SizePerPageDropDown 44 | }; 45 | -------------------------------------------------------------------------------- /src/pagination/PageButton.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classSet from 'classnames'; 4 | 5 | class PageButton extends Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | } 10 | 11 | pageBtnClick = e => { 12 | e.preventDefault(); 13 | this.props.changePage(this.props.pageNumber); 14 | } 15 | 16 | render() { 17 | const classes = classSet({ 18 | 'active': this.props.active, 19 | 'disabled': this.props.disable, 20 | 'hidden': this.props.hidden, 21 | 'page-item': true 22 | }); 23 | return ( 24 |
  • 25 | { this.props.children } 26 |
    • 27 | ); 28 | } 29 | } 30 | PageButton.propTypes = { 31 | title: PropTypes.string, 32 | changePage: PropTypes.func, 33 | active: PropTypes.bool, 34 | disable: PropTypes.bool, 35 | hidden: PropTypes.bool, 36 | children: PropTypes.node, 37 | pageNumber: PropTypes.number 38 | }; 39 | 40 | export default PageButton; 41 | -------------------------------------------------------------------------------- /src/toolbar/ButtonGroup.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | class ButtonGroup extends Component { 5 | render() { 6 | const { 7 | className, 8 | sizeClass, 9 | children, 10 | ...rest 11 | } = this.props; 12 | return ( 13 |
    14 | { children } 15 |
    16 | ); 17 | } 18 | } 19 | 20 | ButtonGroup.propTypes = { 21 | sizeClass: PropTypes.string, 22 | className: PropTypes.string 23 | }; 24 | ButtonGroup.defaultProps = { 25 | sizeClass: 'btn-group-sm', 26 | className: '' 27 | }; 28 | 29 | export default ButtonGroup; 30 | -------------------------------------------------------------------------------- /src/toolbar/ClearSearchButton.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const clearBtnDefaultClass = 'react-bs-table-search-clear-btn'; 5 | 6 | class ClearSearchButton extends Component { 7 | 8 | render() { 9 | const { 10 | btnContextual, 11 | className, 12 | onClick, 13 | btnText, 14 | children, 15 | ...rest 16 | } = this.props; 17 | const content = children || 18 | ({ btnText }); 19 | return ( 20 | 27 | ); 28 | } 29 | } 30 | 31 | ClearSearchButton.propTypes = { 32 | btnContextual: PropTypes.string, 33 | className: PropTypes.string, 34 | btnText: PropTypes.string, 35 | onClick: PropTypes.func 36 | }; 37 | ClearSearchButton.defaultProps = { 38 | btnContextual: 'btn-default btn-secondary', 39 | className: '', 40 | btnText: 'Clear', 41 | onClick: undefined 42 | }; 43 | 44 | export default ClearSearchButton; 45 | -------------------------------------------------------------------------------- /src/toolbar/DeleteButton.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Const from '../Const'; 4 | 5 | const deleteBtnDefaultClass = 'react-bs-table-del-btn'; 6 | 7 | class DeleteButton extends Component { 8 | render() { 9 | const { 10 | btnContextual, 11 | className, 12 | onClick, 13 | btnGlyphicon, 14 | btnText, 15 | children, 16 | ...rest 17 | } = this.props; 18 | const content = children || 19 | ( { btnText }); 20 | return ( 21 | 27 | ); 28 | } 29 | } 30 | 31 | DeleteButton.propTypes = { 32 | btnText: PropTypes.string, 33 | btnContextual: PropTypes.string, 34 | className: PropTypes.string, 35 | onClick: PropTypes.func, 36 | btnGlyphicon: PropTypes.string 37 | }; 38 | DeleteButton.defaultProps = { 39 | btnText: Const.DELETE_BTN_TEXT, 40 | btnContextual: 'btn-warning', 41 | className: '', 42 | onClick: undefined, 43 | btnGlyphicon: 'glyphicon-trash fa-trash' 44 | }; 45 | 46 | export default DeleteButton; 47 | -------------------------------------------------------------------------------- /src/toolbar/ExportCSVButton.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Const from '../Const'; 4 | 5 | const exportCsvBtnDefaultClass = 'react-bs-table-csv-btn'; 6 | 7 | class ExportCSVButton extends Component { 8 | render() { 9 | const { 10 | btnContextual, 11 | className, 12 | onClick, 13 | btnGlyphicon, 14 | btnText, 15 | children, 16 | ...rest 17 | } = this.props; 18 | const content = children || 19 | ( { btnText }); 20 | return ( 21 | 27 | ); 28 | } 29 | } 30 | 31 | ExportCSVButton.propTypes = { 32 | btnText: PropTypes.string, 33 | btnContextual: PropTypes.string, 34 | className: PropTypes.string, 35 | onClick: PropTypes.func, 36 | btnGlyphicon: PropTypes.string 37 | }; 38 | ExportCSVButton.defaultProps = { 39 | btnText: Const.EXPORT_CSV_TEXT, 40 | btnContextual: 'btn-success', 41 | className: '', 42 | onClick: undefined, 43 | btnGlyphicon: 'glyphicon-export fa-download' 44 | }; 45 | 46 | export default ExportCSVButton; 47 | -------------------------------------------------------------------------------- /src/toolbar/InsertButton.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Const from '../Const'; 4 | 5 | const insertBtnDefaultClass = 'react-bs-table-add-btn'; 6 | 7 | class InsertButton extends Component { 8 | render() { 9 | const { 10 | btnContextual, 11 | className, 12 | onClick, 13 | btnGlyphicon, 14 | btnText, 15 | children, 16 | ...rest 17 | } = this.props; 18 | const content = children || 19 | ( { btnText }); 20 | return ( 21 | 27 | ); 28 | } 29 | } 30 | 31 | InsertButton.propTypes = { 32 | btnText: PropTypes.string, 33 | btnContextual: PropTypes.string, 34 | className: PropTypes.string, 35 | onClick: PropTypes.func, 36 | btnGlyphicon: PropTypes.string 37 | }; 38 | InsertButton.defaultProps = { 39 | btnText: Const.INSERT_BTN_TEXT, 40 | btnContextual: 'btn-info', 41 | className: '', 42 | onClick: undefined, 43 | btnGlyphicon: 'glyphicon-plus fa-plus' 44 | }; 45 | 46 | export default InsertButton; 47 | -------------------------------------------------------------------------------- /src/toolbar/SearchField.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ReactDOM from 'react-dom'; 4 | 5 | class SearchField extends Component { 6 | 7 | getValue() { 8 | return ReactDOM.findDOMNode(this).value; 9 | } 10 | 11 | setValue(value) { 12 | ReactDOM.findDOMNode(this).value = value; 13 | } 14 | 15 | render() { 16 | const { 17 | className, 18 | defaultValue, 19 | placeholder, 20 | onKeyUp, 21 | ...rest 22 | } = this.props; 23 | return ( 24 | 32 | ); 33 | } 34 | } 35 | 36 | SearchField.propTypes = { 37 | className: PropTypes.string, 38 | defaultValue: PropTypes.string, 39 | placeholder: PropTypes.string, 40 | onKeyUp: PropTypes.func 41 | }; 42 | SearchField.defaultProps = { 43 | className: '', 44 | defaultValue: '', 45 | placeholder: 'Search', 46 | onKeyUp: undefined 47 | }; 48 | 49 | export default SearchField; 50 | -------------------------------------------------------------------------------- /src/toolbar/ShowSelectedOnlyButton.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Const from '../Const'; 4 | 5 | const showSelectedOnlyBtnDefaultClass = 'react-bs-table-show-sel-only-btn'; 6 | 7 | class ShowSelectedOnlyButton extends Component { 8 | render() { 9 | const { 10 | btnContextual, 11 | className, 12 | onClick, 13 | toggle, 14 | showAllText, 15 | showOnlySelectText, 16 | children, 17 | ...rest 18 | } = this.props; 19 | const content = children || 20 | ({ toggle ? showAllText : showOnlySelectText }); 21 | return ( 22 | 30 | ); 31 | } 32 | } 33 | 34 | ShowSelectedOnlyButton.propTypes = { 35 | showAllText: PropTypes.string, 36 | showOnlySelectText: PropTypes.string, 37 | toggle: PropTypes.bool, 38 | btnContextual: PropTypes.string, 39 | className: PropTypes.string, 40 | onClick: PropTypes.func 41 | }; 42 | ShowSelectedOnlyButton.defaultProps = { 43 | showAllText: Const.SHOW_ALL, 44 | showOnlySelectText: Const.SHOW_ONLY_SELECT, 45 | toggle: false, 46 | btnContextual: 'btn-primary', 47 | className: '', 48 | onClick: undefined 49 | }; 50 | 51 | export default ShowSelectedOnlyButton; 52 | -------------------------------------------------------------------------------- /webpack.example.config.js: -------------------------------------------------------------------------------- 1 | // this will build and serve the examples 2 | 3 | const path = require('path'); 4 | const webpack = require('webpack'); 5 | 6 | module.exports = { 7 | entry: { 8 | app: [ 9 | 'react-hot-loader/patch', 10 | './examples/js/app.js' 11 | ], 12 | vendors: [ 'webpack-dev-server/client?http://localhost:3004', 'webpack/hot/only-dev-server' ] 13 | }, 14 | debug: true, 15 | devtool: '#eval-source-map', 16 | output: { 17 | path: path.join(__dirname, 'examples'), 18 | filename: '[name].bundle.js' 19 | }, 20 | serverConfig: { 21 | port: '3004',// server port 22 | publicPath: '/',// js path 23 | contentBase: 'examples/'// web root path 24 | }, 25 | resolve: { 26 | extensions: [ '', '.js', '.jsx' ], 27 | alias: { 28 | 'react-bootstrap-table': path.resolve(__dirname, './src') 29 | } 30 | }, 31 | module: { 32 | preLoaders: [ 33 | { 34 | test: /\.js$/, 35 | exclude: [ /node_modules/, path.resolve(__dirname, './src/filesaver.js') ], 36 | loader: 'eslint' 37 | } 38 | ], 39 | loaders: [ 40 | { 41 | test: /\.js$/, 42 | exclude: /node_modules/, 43 | loaders: ['babel'] 44 | }, { 45 | test: /\.css$/, loader: 'style-loader!css-loader' 46 | } 47 | ] 48 | }, 49 | 50 | plugins: [ 51 | new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), 52 | new webpack.HotModuleReplacementPlugin(), 53 | new webpack.NoErrorsPlugin(), 54 | new webpack.ProgressPlugin(function(percentage, message) { 55 | const percent = Math.round(percentage * 100); 56 | process.stderr.clearLine(); 57 | process.stderr.cursorTo(0); 58 | process.stderr.write(percent + '% ' + message); 59 | }) 60 | ] 61 | }; 62 | -------------------------------------------------------------------------------- /webpack.umd.min.config.js: -------------------------------------------------------------------------------- 1 | // bundle a min version of the umd build without source maps 2 | var webpack = require('webpack'); 3 | var umdConfig = require('./webpack.umd.config'); 4 | 5 | // setting environment 6 | process.env.NODE_ENV = 'production'; 7 | 8 | umdConfig.output.filename = '[name].min.js'; 9 | umdConfig.devtool = null; 10 | umdConfig.plugins = [ 11 | new webpack.optimize.OccurrenceOrderPlugin(), 12 | new webpack.optimize.UglifyJsPlugin() 13 | ]; 14 | 15 | module.exports = umdConfig; 16 | --------------------------------------------------------------------------------