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 ( + + {item.text} + + ); + }); + 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() + ] +};