diff --git a/README.md b/README.md index cc996e9ba..7453c01dc 100644 --- a/README.md +++ b/README.md @@ -104,6 +104,13 @@ Finally, you need to import the css file to your app, there are two css file you ``` The CSS files you can find in the css folder. +### d.Font Awesome js +The package uses since v 3.0 [Font Awesome](http://fontawesome.io/) for icons. In order to install you must get a CDN [by registering](http://fontawesome.io/get-started/) or use the [font-awesome package](https://www.npmjs.com/package/font-awesome). Then in the header you need to add (use your own js-link instead of the `???`): + +```html + +``` + ### Quick Demo ```js // products will be presented by react-bootstrap-table @@ -118,7 +125,7 @@ var products = [{ },........]; // It's a data format example. function priceFormatter(cell, row){ - return ' ' + cell; + return ' ' + cell; } React.render( diff --git a/examples/index.html b/examples/index.html index fe20b40c3..7612a1700 100644 --- a/examples/index.html +++ b/examples/index.html @@ -5,7 +5,7 @@ react-bootstrap-table demo - +
diff --git a/examples/js/cell-edit/custom-cell-edit-table.js b/examples/js/cell-edit/custom-cell-edit-table.js index 0160b7825..41709ec0c 100644 --- a/examples/js/cell-edit/custom-cell-edit-table.js +++ b/examples/js/cell-edit/custom-cell-edit-table.js @@ -165,7 +165,7 @@ class RegionsEditor extends React.Component { } function priceFormatter(cell, row) { - return ` ${cell.amount}`; + return ` ${cell.amount}`; } const regionsFormatter = (cell, row) => ({ (cell || []).join(',') }); diff --git a/examples/js/column-format/html-column-format-table.js b/examples/js/column-format/html-column-format-table.js index e9365a692..0198bbcfc 100644 --- a/examples/js/column-format/html-column-format-table.js +++ b/examples/js/column-format/html-column-format-table.js @@ -22,7 +22,7 @@ addProducts(5); function priceFormatter(cell, row) { - return ` ${cell}`; + return ` ${cell}`; } diff --git a/examples/js/custom/csv-button/default-custom-csv-button.js b/examples/js/custom/csv-button/default-custom-csv-button.js index ed328c9b6..ced86fb03 100644 --- a/examples/js/custom/csv-button/default-custom-csv-button.js +++ b/examples/js/custom/csv-button/default-custom-csv-button.js @@ -36,7 +36,7 @@ export default class DefaultCustomExportButtonTable extends React.Component { btnText='CustomExportText' btnContextual='btn-danger' className='my-custom-class' - btnGlyphicon='glyphicon-edit' + btnFAwesome='fa-edit' onClick={ e => this.handleExportCSVButtonClick(onClick) }/> ); // If you want have more power to custom the child of ExportCSVButton, diff --git a/examples/js/custom/delete-button/default-custom-delete-button.js b/examples/js/custom/delete-button/default-custom-delete-button.js index 1ca3d2a9a..420c298d0 100644 --- a/examples/js/custom/delete-button/default-custom-delete-button.js +++ b/examples/js/custom/delete-button/default-custom-delete-button.js @@ -36,7 +36,7 @@ export default class DefaultCustomInsertButtonTable extends React.Component { btnText='CustomDeleteText' btnContextual='btn-success' className='my-custom-class' - btnGlyphicon='glyphicon-edit' + btnFAwesome='fa-edit' onClick={ e => this.handleDeleteButtonClick(onClick) }/> ); // If you want have more power to custom the child of DeleteButton, diff --git a/examples/js/custom/insert-button/default-custom-insert-button.js b/examples/js/custom/insert-button/default-custom-insert-button.js index 6dc1a2731..b22ecb529 100644 --- a/examples/js/custom/insert-button/default-custom-insert-button.js +++ b/examples/js/custom/insert-button/default-custom-insert-button.js @@ -36,7 +36,7 @@ export default class DefaultCustomInsertButtonTable extends React.Component { btnText='CustomInsertText' btnContextual='btn-warning' className='my-custom-class' - btnGlyphicon='glyphicon-edit' + btnFAwesome='fa-edit' onClick={ () => this.handleInsertButtonClick(onClick) }/> ); // If you want have more power to custom the child of InsertButton, diff --git a/examples/js/manipulation/search-format-table.js b/examples/js/manipulation/search-format-table.js index 67875853c..052b963b7 100644 --- a/examples/js/manipulation/search-format-table.js +++ b/examples/js/manipulation/search-format-table.js @@ -10,7 +10,7 @@ const products = []; function addProducts(quantity) { const startId = products.length; const pname = [ 'Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money' ]; - const icons = [ 'glyphicon-cloud', 'glyphicon-envelope', 'glyphicon-plus', 'glyphicon-pencil', 'glyphicon-euro' ]; + const icons = [ 'fa-cloud', 'fa-envelope', 'fa-plus', 'fa-pencil', 'fa-euro' ]; const types = [ 'Cloud', 'Mail', 'Insert', 'Modify', 'Money' ]; const years = [ 2005, 2006, 2008, 2001, 2015 ]; for (let i = 0; i < quantity; i++) { @@ -36,7 +36,7 @@ function filterType(cell, row) { } function nameFormatter(cell) { - return `

${cell.pname}, from ${cell.year}

`; + return `

${cell.pname}, from ${cell.year}

`; } function priceFormatter(cell) { diff --git a/package.json b/package.json index cdf1580f0..1b29859f1 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "react-bootstrap": "^0.29.5", "react-dom": "^0.14.3 || ^15.0.0", "react-hot-loader": "^1.3.0", - "react-router": "^1.0.2", + "react-router": "^2.8.1", "style-loader": "^0.13.0", "toastr": "^2.1.2", "vinyl-source-stream": "^1.1.0", @@ -64,8 +64,8 @@ }, "dependencies": { "classnames": "^2.1.2", - "react-toastr": "^2.8.0", - "react-modal": "^1.4.0" + "react-modal": "^1.4.0", + "react-toastr": "^2.8.0" }, "peerDependencies": { "react": "^0.14.3 || ^15.0.0" diff --git a/src/toolbar/DeleteButton.js b/src/toolbar/DeleteButton.js index 5d7115954..2b25d8e85 100644 --- a/src/toolbar/DeleteButton.js +++ b/src/toolbar/DeleteButton.js @@ -9,13 +9,13 @@ class DeleteButton extends Component { btnContextual, className, onClick, - btnGlyphicon, + btnFAwesome, btnText, children, ...rest } = this.props; const content = children || - ( { btnText }); + ( { btnText }); return (