diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..ce840ab86
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "stage": 0
+}
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index 062126fa6..b553a4706 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,10 +1,13 @@
{
- "extends": "airbnb",
- "globals": {
+ "extends": "airbnb",
+ "globals": {
"__DEV__": true
-},
- "rules": {
+ },
+ "rules": {
"react/jsx-quotes": 0,
- "jsx-quotes": [2, "prefer-double"]
-}
+ "jsx-quotes": [
+ 2,
+ "prefer-double"
+ ]
+ }
}
diff --git a/.gitignore b/.gitignore
index 80dc72de8..9f3eb2387 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
node_modules
.DS_Store
*~
+*.sublime-project
+*.sublime-workspace
+*.idea
+*.iml
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 000000000..fb0f44365
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+ - "0.12"
+
diff --git a/README.md b/README.md
index d1931984d..ac57bb064 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,12 @@
# react-bootstrap-table
-It's a react.js table for bootstrap, named reactbsTable. It's a configurable, functional table component and make you build a Bootstrap Table more efficiency and easy in your React application, However ```react-bootstrap-table``` support these features:
+
+[![NPM version][npm-badge]][npm] [![Build Status][travis-ci-image]][travis-ci-url]
+
+[![Dependency Status][deps-badge]][deps]
+[![devDependency Status][dev-deps-badge]][dev-deps]
+[![peerDependency Status][peer-deps-badge]][peer-deps]
+
+It's a [react.js](http://facebook.github.io/react/) table for bootstrap, named reactbsTable. It's a configurable, functional table component and make you build a Bootstrap Table more efficiency and easy in your React application, However ```react-bootstrap-table``` support these features:
- column align
- column hidden
@@ -28,7 +35,7 @@ $ npm install
Use gulp to build the react-bootstrap-table
```
$ gulp dev #for development
-$ gulp example-server #see all examples, go to localhost:3004/example-list.html
+$ gulp example-server #see all examples, go to localhost:3004
$ gulp prod #for production
```
@@ -167,3 +174,18 @@ var dataSet = new TableDataSet(products);
```
dataSet.setData(newproducts);
```
+
+[npm-badge]: http://badge.fury.io/js/react-bootstrap-table.svg
+[npm]: http://badge.fury.io/js/react-bootstrap-table
+
+[deps-badge]: https://david-dm.org/AllenFang/react-bootstrap-table.svg
+[deps]: https://david-dm.org/AllenFang/react-bootstrap-table
+
+[dev-deps-badge]: https://david-dm.org/AllenFang/react-bootstrap-table/dev-status.svg
+[dev-deps]: https://david-dm.org/AllenFang/react-bootstrap-table#info=devDependencies
+
+[peer-deps-badge]: https://david-dm.org/AllenFang/react-bootstrap-table/peer-status.svg
+[peer-deps]: https://david-dm.org/AllenFang/react-bootstrap-table#info=peerDependencies
+
+[travis-ci-image]: https://travis-ci.org/AllenFang/react-bootstrap-table.svg
+[travis-ci-url]: https://travis-ci.org/AllenFang/react-bootstrap-table
diff --git a/examples/advance.html b/examples/advance.html
deleted file mode 100644
index 614630595..000000000
--- a/examples/advance.html
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-
- Advance cell edit type react-bootstrap-table demo
-
-
-
-
-
-
-
-
-
Cell Edit Type Example(text, textarea, select, checkbox)
-
-
Source in /examples/js/advance/edit-type-table.js
-
-
-
-
-
-
-
-
Data Insert Type Example(text, textarea, select, checkbox)
-
-
Source in /examples/js/advance/insert-type-table.js
-
-
-
-
-
-
-
-
Auto RowKey on Data Insert Example
-
-
Source in /examples/js/advance/auto-rowkey-table.js
-
-
-
-
-
-
-
-
Data Validator Example(Job Name length must great 10 char)
-
-
Source in /examples/js/advance/validator-table.js
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/basic.html b/examples/basic.html
deleted file mode 100644
index 2c7725a3a..000000000
--- a/examples/basic.html
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-
-
- A basic react-bootstrap-table demo
-
-
-
-
-
-
-
-
-
A basic react-bootstrap-table
-
-
Source in /examples/js/basic/basic-table.js
-
-
-
-
-
-
-
Table hover, striped and condensed Example
-
-
Source in /examples/js/basic/hover-striped-table.js
-
-
-
-
-
-
-
Table Scroll Example
-
-
Source in /examples/js/basic/scroll-table.js
-
-
-
-
-
-
-
-
-
diff --git a/examples/cell-edit.html b/examples/cell-edit.html
deleted file mode 100644
index 477cb4238..000000000
--- a/examples/cell-edit.html
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
-
- A react-bootstrap-table cell edit demo
-
-
-
-
-
-
-
-
-
Click to Edit Cell Example (Press ENTER to save, ESC to cancel)
-
-
Source in /examples/js/cell-edit/click-to-edit-table.js
-
-
-
-
-
-
-
DbClick to Edit Cell Example (Press ENTER to save, ESC to cancel)
-
-
Source in /examples/js/cell-edit/dbclick-to-edit-table.js
-
-
-
-
-
-
-
Blur to Save Cell Example (ESC to cancel)
-
-
Source in /examples/js/cell-edit/blur-to-save-table.js
-
-
-
-
-
-
-
A Non Editable Cell Example (Product Name can't be edited)
-
-
Source in /examples/js/cell-edit/non-editable-table.js
-
-
-
-
-
-
-
After Cell Edit Hook Example
-
-
Source in /examples/js/cell-edit/cell-edit-hook-table.js
-
-
-
-
-
-
-
-
-
diff --git a/examples/column-format.html b/examples/column-format.html
deleted file mode 100644
index 5b9ab48b5..000000000
--- a/examples/column-format.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
- A react-bootstrap-table column format demo
-
-
-
-
-
-
-
-
-
Html Column format Example
-
-
Source in /examples/js/column-format/html-column-format-table.js
-
-
-
-
-
-
-
React Component Column format Example
-
-
Source in /examples/js/column-format/react-column-format-table.js
-
-
-
-
-
-
-
-
-
diff --git a/examples/column.html b/examples/column.html
deleted file mode 100644
index ad48f5b1f..000000000
--- a/examples/column.html
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-
-
- A react-bootstrap-table column demo
-
-
-
-
-
-
-
-
-
Column Align Example
-
-
Source in /examples/js/column/column-align-table.js
-
-
-
-
-
-
-
Column Width Example
-
-
Source in /examples/js/column/column-width-table.js
-
-
-
-
-
-
-
Column Hide Example
-
-
Source in /examples/js/column/column-hide-table.js
-
-
-
-
-
-
-
-
-
diff --git a/examples/complex.html b/examples/complex.html
deleted file mode 100644
index 387b1a04a..000000000
--- a/examples/complex.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
- A complex react-bootstrap-table demo
-
-
-
-
-
-
-
-
-
A Complex Example
-
Source in /examples/js/complex/app.js
-
-
-
-
-
-
-
-
diff --git a/examples/example-list.html b/examples/example-list.html
deleted file mode 100644
index d11065e7a..000000000
--- a/examples/example-list.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
- react-bootstrap-table demo
-
-
-
- Basic Table
- Work on Column
- Table Sort
- Column Format
- Row Selection
- Pagination
- Table Manipulation
- Cell Edit
- Table Styling
- Advance data edit&insert
- A complex demo
- TableDataSet demo
-
-
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 000000000..d962dcf3d
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+ react-bootstrap-table demo
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/js/advance/auto-rowkey-table.js b/examples/js/advance/auto-rowkey-table.js
index 31833a6cc..cd54a9981 100644
--- a/examples/js/advance/auto-rowkey-table.js
+++ b/examples/js/advance/auto-rowkey-table.js
@@ -1,4 +1,3 @@
-'use strict';
import React from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
diff --git a/examples/js/advance/demo.js b/examples/js/advance/demo.js
index 6203b58df..77e1bd37f 100644
--- a/examples/js/advance/demo.js
+++ b/examples/js/advance/demo.js
@@ -5,22 +5,31 @@ import DataInsertTypeTable from './insert-type-table';
import AutoRowKeyTable from './auto-rowkey-table';
import ValidatorTable from './validator-table';
-React.render(
- ,
- document.getElementById("edit-type")
-);
+import {Col, Panel} from 'react-bootstrap';
-React.render(
- ,
- document.getElementById("insert-type")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+ Source in /examples/js/advance/edit-type-table.js
+
+
+
+ Source in /examples/js/advance/insert-type-table.js
+
+
+
+ Source in /examples/js/advance/auto-rowkey-table.js
+
+
+
+ Source in /examples/js/advance/validator-table.js
+
+
+
+ );
+ }
+}
-React.render(
- ,
- document.getElementById("auto-rowkey")
-);
-
-React.render(
- ,
- document.getElementById("validator")
-);
+export default Demo;
diff --git a/examples/js/app.js b/examples/js/app.js
new file mode 100644
index 000000000..282096206
--- /dev/null
+++ b/examples/js/app.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { IndexRoute, Router, Route } from 'react-router';
+import createHistory from 'history/lib/createHashHistory';
+
+const history = createHistory( { queryKey: false } );
+
+import App from './components/App';
+import Home from './components/Home';
+import GettingStarted from './components/GettingStarted';
+import PageNotFound from './components/PageNotFound';
+
+const routes = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+ReactDOM.render(routes, document.querySelector('#root'));
diff --git a/examples/js/basic/demo.js b/examples/js/basic/demo.js
index f0a6e92e6..e80444a39 100644
--- a/examples/js/basic/demo.js
+++ b/examples/js/basic/demo.js
@@ -4,18 +4,27 @@ import BasicTable from './basic-table';
import HoverStripedTable from './hover-striped-table';
import ScrollTable from './scroll-table';
-React.render(
- ,
- document.getElementById("basic")
-);
+import {Col, Panel} from 'react-bootstrap';
-React.render(
- ,
- document.getElementById('hover-striped')
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+ Source in /examples/js/basic/basic-table.js
+
+
+
+ Source in /examples/js/basic/hover-striped-table.js
+
+
+
+ Source in /examples/js/basic/scroll-table.js
+
+
+
+ );
+ }
+}
-
-React.render(
- ,
- document.getElementById('scroll')
-);
+export default Demo;
diff --git a/examples/js/cell-edit/demo.js b/examples/js/cell-edit/demo.js
index f45337e03..17522443d 100644
--- a/examples/js/cell-edit/demo.js
+++ b/examples/js/cell-edit/demo.js
@@ -6,27 +6,58 @@ import BlurToSaveTable from './blur-to-save-table';
import CellEditHookTable from './cell-edit-hook-table';
import NonEditableTable from './non-editable-table';
-React.render(
- ,
- document.getElementById("click")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
+
Click to Edit Cell Example (Press ENTER to save, ESC to cancel)
+
+
Source in /examples/js/cell-edit/click-to-edit-table.js
+
+
+
+
+
+
+
DbClick to Edit Cell Example (Press ENTER to save, ESC to cancel)
+
+
Source in /examples/js/cell-edit/dbclick-to-edit-table.js
+
+
+
+
+
+
+
Blur to Save Cell Example (ESC to cancel)
+
+
Source in /examples/js/cell-edit/blur-to-save-table.js
+
+
+
+
+
+
+
A Non Editable Cell Example (Product Name can't be edited)
+
+
Source in /examples/js/cell-edit/non-editable-table.js
+
+
+
+
+
+
+
After Cell Edit Hook Example
+
+
Source in /examples/js/cell-edit/cell-edit-hook-table.js
+
+
+
+
+
+ );
+ }
+}
-React.render(
- ,
- document.getElementById('dbclick')
-);
-
-React.render(
- ,
- document.getElementById('blur')
-);
-
-React.render(
- ,
- document.getElementById('non-editable')
-);
-
-React.render(
- ,
- document.getElementById('hook')
-);
+export default Demo;
diff --git a/examples/js/column-format/demo.js b/examples/js/column-format/demo.js
index 1309274ba..6820cf970 100644
--- a/examples/js/column-format/demo.js
+++ b/examples/js/column-format/demo.js
@@ -3,12 +3,31 @@ import React from 'react';
import HtmlColumnFormatTable from './html-column-format-table';
import ReactColumnFormatTable from './react-column-format-table';
-React.render(
- ,
- document.getElementById("html-format")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
+
Html Column format Example
+
+
Source in /examples/js/column-format/html-column-format-table.js
+
+
+
+
+
+
+
React Component Column format Example
+
+
Source in /examples/js/column-format/react-column-format-table.js
+
+
+
+
+
+ );
+ }
+}
-React.render(
- ,
- document.getElementById('react-format')
-);
+export default Demo;
diff --git a/examples/js/column/demo.js b/examples/js/column/demo.js
index 3364b9ecf..041917eb3 100644
--- a/examples/js/column/demo.js
+++ b/examples/js/column/demo.js
@@ -4,19 +4,40 @@ import ColumnAlignTable from './column-align-table';
import ColumnWidthTable from './column-width-table';
import ColumnHideTable from './column-hide-table';
-React.render(
- ,
- document.getElementById("align")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
+
Column Align Example
+
+
Source in /examples/js/column/column-align-table.js
+
+
+
+
+
+
+
Column Width Example
+
+
Source in /examples/js/column/column-width-table.js
+
+
+
+
+
+
+
Column Hide Example
+
+
Source in /examples/js/column/column-hide-table.js
+
+
+
+
+
+ );
+ }
+}
-
-React.render(
- ,
- document.getElementById("width")
-);
-
-
-React.render(
- ,
- document.getElementById("hide")
-);
+export default Demo;
diff --git a/examples/js/complex/demo.css b/examples/js/complex/demo.css
new file mode 100644
index 000000000..2494c39a4
--- /dev/null
+++ b/examples/js/complex/demo.css
@@ -0,0 +1,4 @@
+.third-tr{
+ font-weight: bold;
+ background-color: aquamarine;
+}
\ No newline at end of file
diff --git a/examples/js/complex/demo.js b/examples/js/complex/demo.js
index f09d915ad..76e62e709 100644
--- a/examples/js/complex/demo.js
+++ b/examples/js/complex/demo.js
@@ -1,8 +1,22 @@
+require('./demo.css');
require('../../../css/react-bootstrap-table.min.css');
import React from 'react';
import App from './app';
-React.render(
- ,
- document.getElementById("complex")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
A Complex Example
+
Source in /examples/js/complex/app.js
+
+
+
+ );
+ }
+}
+
+export default Demo;
diff --git a/examples/js/components/App.js b/examples/js/components/App.js
new file mode 100644
index 000000000..8420d1ebd
--- /dev/null
+++ b/examples/js/components/App.js
@@ -0,0 +1,107 @@
+import React from 'react';
+import {LinkContainer} from 'react-router-bootstrap';
+
+// import 'bootstrap/dist/css/bootstrap.css';
+// import 'jquery';
+// import 'bootstrap';
+import {
+ Navbar,
+ NavBrand,
+ Nav,
+ NavItem,
+ NavDropdown,
+ MenuItem,
+ Grid,
+ Row,
+ Col,
+} from 'react-bootstrap';
+
+class App extends React.Component {
+
+ static propTypes = {
+ children: React.PropTypes.node,
+ };
+
+ static defaultProps = {};
+
+ constructor(props) {
+ super(props);
+ this.state = {};
+ }
+
+ componentDidMount() {
+ }
+
+ render() {
+ let examples = [{
+ text: 'Basic Table',
+ href: 'basic',
+ }, {
+ text: 'Work on Column',
+ href: 'column',
+ }, {
+ text: 'Table Sort',
+ href: 'sort',
+ }, {
+ text: 'Column Format',
+ href: 'column-format',
+ }, {
+ text: 'Row Selection',
+ href: 'selection',
+ }, {
+ text: 'Pagination',
+ href: 'pagination',
+ }, {
+ text: 'Table Manipulation',
+ href: 'manipulation',
+ }, {
+ text: 'Cell Edit',
+ href: 'cell-edit',
+ }, {
+ text: 'Table Styling',
+ href: 'style',
+ }, {
+ text: 'Advance data edit&insert',
+ href: 'advance',
+ }, {
+ text: 'A complex demo',
+ href: 'complex',
+ }, {
+ text: 'TableDataSet demo',
+ href: 'tableDataSet',
+ }];
+
+ const exampleMenuItems = examples.map((item, idx)=> {
+ return (
+
+
+
+ );
+ });
+ return (
+
+
+ react-bootstrap-table
+
+
+
+
+
+ {this.props.children}
+
+
+
+
+ );
+ }
+}
+
+export default App;
diff --git a/examples/js/components/GettingStarted.js b/examples/js/components/GettingStarted.js
new file mode 100644
index 000000000..487eba994
--- /dev/null
+++ b/examples/js/components/GettingStarted.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class GettingStarted extends React.Component {
+ render() {
+ return (
+
+
Getting started
+ npm i react-bootstrap-table --save
+
+ );
+ }
+}
+
+export default GettingStarted;
diff --git a/examples/js/components/Home.js b/examples/js/components/Home.js
new file mode 100644
index 000000000..9658cf147
--- /dev/null
+++ b/examples/js/components/Home.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+class Home extends React.Component {
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+export default Home;
diff --git a/examples/js/components/PageNotFound.js b/examples/js/components/PageNotFound.js
new file mode 100644
index 000000000..0f6828cd5
--- /dev/null
+++ b/examples/js/components/PageNotFound.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+class PageNotFound extends React.Component {
+ render() {
+ return (
+ Page Not Found
+ );
+ }
+}
+
+export default PageNotFound;
diff --git a/examples/js/manipulation/demo.js b/examples/js/manipulation/demo.js
index 3a9e964f6..a648a9eab 100644
--- a/examples/js/manipulation/demo.js
+++ b/examples/js/manipulation/demo.js
@@ -5,22 +5,49 @@ import DeleteRowTable from './delete-row-table';
import SearchTable from './search-table';
import ColumnFilterTable from './filter-table';
-React.render(
- ,
- document.getElementById("insert")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
+
Insert Row Example
+
+
Source in /examples/js/manipulation/insert-row-table.js
+
+
+
+
+
+
+
Delete Row Example
+
+
Source in /examples/js/manipulation/delete-row-table.js
+
+
+
+
+
+
+
Table Search Example
+
+
Source in /examples/js/manipulation/search-table.js
+
+
+
+
+
+
+
Column Filter Example
+
+
Source in /examples/js/manipulation/filter-table.js
+
+
+
+
+
+ );
+ }
+}
-React.render(
- ,
- document.getElementById("delete")
-);
-
-React.render(
- ,
- document.getElementById("search")
-);
-
-React.render(
- ,
- document.getElementById("filter")
-);
+export default Demo;
diff --git a/examples/js/pagination/demo.js b/examples/js/pagination/demo.js
index 5bd6ab2b2..13a77d30b 100644
--- a/examples/js/pagination/demo.js
+++ b/examples/js/pagination/demo.js
@@ -3,12 +3,31 @@ import React from 'react';
import DefaultPaginationTable from './default-pagination-table';
import CustomPaginationTable from './custom-pagination-table';
-React.render(
- ,
- document.getElementById("default")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
+
Basic Pagination Example
+
+
Source in /examples/js/pagination/default-pagination-table.js
+
+
+
+
+
+
+
Custom Pagination Example
+
+
Source in /examples/js/pagination/custom-pagination-table.js
+
+
+
+
+
+ );
+ }
+}
-React.render(
- ,
- document.getElementById("custom")
-);
+export default Demo;
diff --git a/examples/js/selection/demo.js b/examples/js/selection/demo.js
index ca0a6725b..fa4600a8f 100644
--- a/examples/js/selection/demo.js
+++ b/examples/js/selection/demo.js
@@ -8,37 +8,76 @@ import SelectBgColorTable from './select-bgcolor-table';
import SelectHookTable from './select-hook-table';
import HideSelectionColumnTable from './hide-selection-col-table';
-React.render(
- ,
- document.getElementById("single")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
+
Single Select Example
+
+
Source in /examples/js/selection/single-select-table.js
+
+
+
+
+
+
+
Multi Select Example
+
+
Source in /examples/js/selection/multi-select-table.js
+
+
+
+
+
+
+
Click to Select Row Example
+
+
Source in /examples/js/selection/click-to-select-table.js
+
+
+
+
+
+
+
Default Select Example
+
+
Source in /examples/js/selection/default-select-table.js
+
+
+
+
+
+
+
Selected Row Bgcolor Example
+
+
Source in /examples/js/selection/select-bgcolor-table.js
+
+
+
+
+
+
+
Selection Hook Example
+
+
Source in /examples/js/selection/select-hook-table.js
+
+
+
+
+
+
+
Hide Selection Column Example
+
+
Source in /examples/js/selection/hide-selection-col-table.js
+
+
+
+
+
+ );
+ }
+}
-React.render(
- ,
- document.getElementById('multi')
-);
-
-React.render(
- ,
- document.getElementById('click')
-);
-
-React.render(
- ,
- document.getElementById('default-select')
-);
-
-React.render(
- ,
- document.getElementById('bgcolor')
-);
-
-React.render(
- ,
- document.getElementById('hook')
-);
-
-React.render(
- ,
- document.getElementById('hide')
-);
+export default Demo;
diff --git a/examples/js/sort/demo.js b/examples/js/sort/demo.js
index ffd4d0c17..cc1f67a42 100644
--- a/examples/js/sort/demo.js
+++ b/examples/js/sort/demo.js
@@ -4,17 +4,40 @@ import SortTable from './sort-table';
import DefaultSortTable from './default-sort-table';
import CustomSortTable from './custom-sort-table';
-React.render(
- ,
- document.getElementById("sort")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
+
Table Sort Example
+
+
Source in /examples/js/sort/sort-table.js
+
+
+
+
+
+
+
Default Table Sort Example
+
+
Source in /examples/js/sort/default-sort-table.js
+
+
+
+
+
+
+
Customize Table Sort Example
+
+
Source in /examples/js/sort/custom-sort-table.js
+
+
+
+
+
+ );
+ }
+}
-React.render(
- ,
- document.getElementById('default-sort')
-);
-
-React.render(
- ,
- document.getElementById('custom-sort')
-);
+export default Demo;
diff --git a/examples/js/style/demo.js b/examples/js/style/demo.js
index 7e24ceabe..ffb9b358e 100644
--- a/examples/js/style/demo.js
+++ b/examples/js/style/demo.js
@@ -1,26 +1,57 @@
require('../../../css/react-bootstrap-table.min.css');
+require('./style.css');
import React from 'react';
import TrClassStringTable from './tr-class-string-table';
import TrClassFunctionTable from './tr-class-function-table';
import TdClassStringTable from './td-class-string-table';
import TdClassFunctionTable from './td-class-function-table';
-React.render(
- ,
- document.getElementById("tr-string-simple")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
+
Set String as classname
on <tr>
+
+
Source in /examples/js/style/tr-class-string-table.js
+
+
+
+
+
+
+
Set Function as classname
on <tr>(more easy to customize)
+
+
Source in /examples/js/style/tr-class-function-table.js
+
+
+
+
+
+
+
Set String as classname
on <td>(header & column)
+
+
Source in /examples/js/style/td-class-string-table.js
+
+
+
+
+
+
+
Set Function as classname
on <td>(more easy to customize column)
+
+
Source in /examples/js/style/td-class-function-table.js
+
+
+
+
+
-React.render(
- ,
- document.getElementById("tr-function-simple")
-);
+ );
+ }
+}
+
+export default Demo;
-React.render(
- ,
- document.getElementById("td-string-simple")
-);
-React.render(
- ,
- document.getElementById("td-function-simple")
-);
diff --git a/examples/js/style/style.css b/examples/js/style/style.css
new file mode 100644
index 000000000..a0b34c0c4
--- /dev/null
+++ b/examples/js/style/style.css
@@ -0,0 +1,31 @@
+.tr-string-example{
+ font-style: oblique;
+ color: red;
+ background-color: aquamarine;
+}
+
+.tr-function-example{
+ font-weight: bold;
+ background-color: aquamarine;
+}
+
+.td-header-string-example{
+ font-style: oblique;
+ color: red;
+ background-color: aquamarine;
+}
+
+.td-column-string-example{
+ color: blue;
+ background-color: antiquewhite;
+}
+
+.td-column-function-odd-example{
+ color: blue;
+ background-color: antiquewhite;
+}
+
+.td-column-function-even-example{
+ color: red;
+ background-color: yellowgreen;
+}
\ No newline at end of file
diff --git a/examples/js/tableDataSet/demo.js b/examples/js/tableDataSet/demo.js
index ccb0686f9..0661e7ebd 100644
--- a/examples/js/tableDataSet/demo.js
+++ b/examples/js/tableDataSet/demo.js
@@ -2,7 +2,20 @@ require('../../../css/react-bootstrap-table.min.css');
import React from 'react';
import TableDataSetTable from './table-data-set';
-React.render(
- ,
- document.getElementById("tableDataSet")
-);
+class Demo extends React.Component {
+ render() {
+ return (
+
+
+
A TableDataSet Example
+
Source in /examples/js/tableDataSet/app.js
+
+
+
+ );
+ }
+}
+
+export default Demo;
diff --git a/examples/manipulation.html b/examples/manipulation.html
deleted file mode 100644
index 1330f49e3..000000000
--- a/examples/manipulation.html
+++ /dev/null
@@ -1,52 +0,0 @@
-
-
-
-
- A manipulation react-bootstrap-table demo
-
-
-
-
-
-
-
-
-
Insert Row Example
-
-
Source in /examples/js/manipulation/insert-row-table.js
-
-
-
-
-
-
-
Delete Row Example
-
-
Source in /examples/js/manipulation/delete-row-table.js
-
-
-
-
-
-
-
Table Search Example
-
-
Source in /examples/js/manipulation/search-table.js
-
-
-
-
-
-
-
Column Filter Example
-
-
Source in /examples/js/manipulation/filter-table.js
-
-
-
-
-
-
-
-
-
diff --git a/examples/pagination.html b/examples/pagination.html
deleted file mode 100644
index 12d254db8..000000000
--- a/examples/pagination.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
- A react-bootstrap-table pagination demo
-
-
-
-
-
-
-
-
-
Basic Pagination Example
-
-
Source in /examples/js/pagination/default-pagination-table.js
-
-
-
-
-
-
-
Custom Pagination Example
-
-
Source in /examples/js/pagination/custom-pagination-table.js
-
-
-
-
-
-
-
-
-
diff --git a/examples/selection.html b/examples/selection.html
deleted file mode 100644
index ee38bf6d9..000000000
--- a/examples/selection.html
+++ /dev/null
@@ -1,79 +0,0 @@
-
-
-
-
- A react-bootstrap-table selection demo
-
-
-
-
-
-
-
-
-
Single Select Example
-
-
Source in /examples/js/selection/single-select-table.js
-
-
-
-
-
-
-
Multi Select Example
-
-
Source in /examples/js/selection/multi-select-table.js
-
-
-
-
-
-
-
Click to Select Row Example
-
-
Source in /examples/js/selection/click-to-select-table.js
-
-
-
-
-
-
-
Default Select Example
-
-
Source in /examples/js/selection/default-select-table.js
-
-
-
-
-
-
-
Selected Row Bgcolor Example
-
-
Source in /examples/js/selection/select-bgcolor-table.js
-
-
-
-
-
-
-
Selection Hook Example
-
-
Source in /examples/js/selection/select-hook-table.js
-
-
-
-
-
-
-
Hide Selection Column Example
-
-
Source in /examples/js/selection/hide-selection-col-table.js
-
-
-
-
-
-
-
-
-
diff --git a/examples/sort.html b/examples/sort.html
deleted file mode 100644
index bd25b3621..000000000
--- a/examples/sort.html
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-
-
- A react-bootstrap-table sort demo
-
-
-
-
-
-
-
-
-
Table Sort Example
-
-
Source in /examples/js/sort/sort-table.js
-
-
-
-
-
-
-
Default Table Sort Example
-
-
Source in /examples/js/sort/default-sort-table.js
-
-
-
-
-
-
-
Customize Table Sort Example
-
-
Source in /examples/js/sort/custom-sort-table.js
-
-
-
-
-
-
-
-
-
diff --git a/examples/style.html b/examples/style.html
deleted file mode 100644
index 4ca627e34..000000000
--- a/examples/style.html
+++ /dev/null
@@ -1,84 +0,0 @@
-
-
-
-
- A react-bootstrap-table style demo
-
-
-
-
-
-
-
-
-
Set String as classname
on <tr>
-
-
Source in /examples/js/style/tr-class-string-table.js
-
-
-
-
-
-
-
Set Function as classname
on <tr>(more easy to customize)
-
-
Source in /examples/js/style/tr-class-function-table.js
-
-
-
-
-
-
-
Set String as classname
on <td>(header & column)
-
-
Source in /examples/js/style/td-class-string-table.js
-
-
-
-
-
-
-
Set Function as classname
on <td>(more easy to customize column)
-
-
Source in /examples/js/style/td-class-function-table.js
-
-
-
-
-
-
-
-
-
diff --git a/examples/tableDataSet.html b/examples/tableDataSet.html
deleted file mode 100644
index e282eff06..000000000
--- a/examples/tableDataSet.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
-
- A TableDataSet demo
-
-
-
-
-
-
-
-
A TableDataSet Example
-
Source in /examples/js/tableDataSet/app.js
-
-
-
-
-
-
-
-
diff --git a/package.json b/package.json
index 8f708624d..5719710b4 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
"url": "https://github.com/AllenFang/react-bootstrap-table.git"
},
"scripts": {
- "test": "jest"
+ "lint": "eslint src",
+ "test": "eslint src && jest"
},
"keywords": [
"react",
@@ -31,20 +32,25 @@
"babel-eslint": "^4.1.1",
"babel-loader": "^5.3.2",
"babelify": "^5.0.4",
+ "bootstrap": "3.3.5",
"browserify": "^9.0.3",
"css-loader": "^0.18.0",
- "eslint": "1.4.3",
+ "eslint": "1.7.2",
"eslint-config-airbnb": "0.1.0",
- "eslint-plugin-react": "3.4.1",
+ "eslint-plugin-react": "3.6.3",
"gulp": "^3.8.11",
"gulp-babel": "^4.0.1",
"gulp-concat-css": "^2.2.0",
"gulp-cssmin": "^0.1.6",
- "jest-cli": "^0.4.0",
+ "history": "1.12.3",
+ "jquery": "^2.1.4",
"jsx-loader": "^0.13.2",
"react": "^0.14.0",
+ "react-bootstrap": "^0.27.2",
+ "react-dom": "^0.14.0",
"react-hot-loader": "^1.3.0",
- "react-router": "^1.0.0-rc1",
+ "react-router": "^1.0.0-rc3",
+ "react-router-bootstrap": "^0.19.2",
"style-loader": "^0.12.4",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.0.0",
@@ -54,11 +60,9 @@
"react-toastr": "^2.1.0",
"classnames": "^2.1.2"
},
-
"peerDependencies": {
"react": "^0.14.0"
},
-
"jest": {
"scriptPreprocessor": "/preprocessor.js",
"unmockedModulePathPatterns": [
diff --git a/webpack.example.config.js b/webpack.example.config.js
index bb400140b..5393858a4 100644
--- a/webpack.example.config.js
+++ b/webpack.example.config.js
@@ -3,55 +3,44 @@ var webpack = require('webpack');
module.exports = {
- entry: {
- basic: './examples/js/basic/demo.js',
- column: './examples/js/column/demo.js',
- columnFormat: './examples/js/column-format/demo.js',
- sort: './examples/js/sort/demo.js',
- pagination: './examples/js/pagination/demo.js',
- selection: './examples/js/selection/demo.js',
- manipulation: './examples/js/manipulation/demo.js',
- cellEdit: './examples/js/cell-edit/demo.js',
- complex: './examples/js/complex/demo.js',
- style: './examples/js/style/demo.js',
- advance: './examples/js/advance/demo.js',
- tableDataSet: './examples/js/tableDataSet/demo.js',
- vendors: ['webpack-dev-server/client?http://localhost:3004', 'webpack/hot/only-dev-server']
- },
- devtool: 'eval',
- output: {
- path: path.join(__dirname, 'examples'),
- filename: '[name].bundle.js'
- },
- serverConfig:{
- port:'3004',//server port
- publicPath:'/',//js path
- contentBase:'examples/'//web root path
- },
- resolve: {
- extensions: ['', '.js', '.jsx'],
- alias:{
- 'react-bootstrap-table': '../../../src/index.js'
- }
- },
- module: {
- loaders: [
+ entry: {
+ app: './examples/js/app.js',
+ vendors: ['webpack-dev-server/client?http://localhost:3004', 'webpack/hot/only-dev-server']
+ },
+ devtool: 'eval',
+ output: {
+ path: path.join(__dirname, 'examples'),
+ filename: '[name].bundle.js'
+ },
+ serverConfig: {
+ port: '3004',// server port
+ publicPath: '/',// js path
+ contentBase: 'examples/'//web root path
+ },
+ resolve: {
+ extensions: ['', '.js', '.jsx'],
+ alias: {
+ 'react-bootstrap-table': path.resolve(__dirname, './src')
+ }
+ },
+ module: {
+ loaders: [
- {
- test: /\.jsx$/,
- exclude: /node_modules/,
- loaders: ['react-hot', 'babel']
- }, {
- test: /\.js$/,
- exclude: /node_modules/,
- loaders: ['react-hot', 'babel']
- }, {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}, // use ! to chain loaders
- {test: /\.css$/, loader: 'style-loader!css-loader'}]
- },
+ {
+ test: /\.jsx$/,
+ exclude: /node_modules/,
+ loaders: ['react-hot', 'babel']
+ }, {
+ test: /\.js$/,
+ exclude: /node_modules/,
+ loaders: ['react-hot', 'babel']
+ }, {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}, // use ! to chain loaders
+ {test: /\.css$/, loader: 'style-loader!css-loader'}]
+ },
- plugins: [
- new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
- new webpack.HotModuleReplacementPlugin(),
- new webpack.NoErrorsPlugin()
- ]
-}
+ plugins: [
+ new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
+ new webpack.HotModuleReplacementPlugin(),
+ new webpack.NoErrorsPlugin()
+ ]
+};