diff --git a/examples/js/column/column-style-table.js b/examples/js/column/column-style-table.js new file mode 100644 index 000000000..bb9168c6a --- /dev/null +++ b/examples/js/column/column-style-table.js @@ -0,0 +1,32 @@ +/* eslint max-len: 0 */ +import React from 'react'; +import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; + + +const products = []; + +function addProducts(quantity) { + const startId = products.length; + for (let i = 0; i < quantity; i++) { + const id = startId + i; + products.push({ + id: id, + name: 'The white-space property specifies how white-space inside an element is handled, default is normal ' + id, + price: 2100 + i + }); + } +} + +addProducts(5); + +export default class ColumnStyleTable extends React.Component { + render() { + return ( + + Product ID + Product Name + Product Price + + ); + } +} diff --git a/examples/js/column/demo.js b/examples/js/column/demo.js index 0061b4a9f..47a257232 100644 --- a/examples/js/column/demo.js +++ b/examples/js/column/demo.js @@ -3,6 +3,7 @@ import React from 'react'; import ColumnAlignTable from './column-align-table'; import ColumnWidthTable from './column-width-table'; import ColumnHideTable from './column-hide-table'; +import ColumnWordWrapTable from './column-style-table'; import ColumnTitleTable from './column-title-table'; import TdAttributeTable from './td-attribute-table'; @@ -37,6 +38,19 @@ class Demo extends React.Component { +
+
+
Column Word Wrap Example
+
+
Source in /examples/js/column/column-style-table.js
+ This example show you how to configure style on td cell for tuning Product Name as word wrap
+ + You can use tdStyle ro thStyle to configure your own css, but we highly recommend you do not set width, min-width and max-width + + +
+
+
Column Title Example