diff --git a/package.json b/package.json
index c78a245..d3cc155 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
+ "css-loader": "^0.28.1",
"enzyme": "^2.9.1",
"eslint": "^4.5.0",
"eslint-config-airbnb": "15.1.0",
@@ -45,6 +46,7 @@
"react-test-renderer": "^15.6.1",
"sass-loader": "^6.0.6",
"sinon": "^3.2.1",
+ "style-loader": "^0.17.0",
"webpack": "^3.5.4",
"webpack-dev-server": "^2.7.1"
},
diff --git a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
index 208e18e..a61d290 100644
--- a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
+++ b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
@@ -1,6 +1,7 @@
const path = require('path');
const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
+const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
const storyPath = path.join(__dirname, '../stories');
const examplesPath = path.join(__dirname, '../examples');
const aliasPath = {
@@ -25,7 +26,7 @@ const loaders = [{
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
- include: [storyPath, sourcePath, examplesPath],
+ include: [storyPath, sourceStylePath],
}, {
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',
diff --git a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
new file mode 100644
index 0000000..25ecb9c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { BootstrapTable } from 'react-bootstrap-table2';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+export default () => (
+
+
+
{`
+
+
+// Following is more customizable example
+
+function indication() {
+ // return something here
+}
+
+
+ `}
+
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 45f5309..6d3a202 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -8,6 +8,7 @@ import Welcome from 'examples/welcome';
import BasicTable from 'examples/basic';
import BorderlessTable from 'examples/basic/borderless-table';
import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table';
+import NoDataTable from 'examples/basic/no-data-table';
// work on columns
import NestedDataTable from 'examples/columns/nested-data-table';
@@ -29,6 +30,7 @@ import HeaderColumnEventTable from 'examples/header-columns/column-event-table';
// css style
import 'bootstrap/dist/css/bootstrap.min.css';
import 'stories/stylesheet/storybook.scss';
+import 'react-bootstrap-table2/style/react-bootstrap-table.scss';
// import { action } from '@storybook/addon-actions';
@@ -39,7 +41,8 @@ storiesOf('Welcome', module)
storiesOf('Basic Table', module)
.add('basic table', () => )
.add('striped, hover, condensed table', () => )
- .add('borderless table', () => );
+ .add('borderless table', () => )
+ .add('Indication For Empty Table', () => );
storiesOf('Work on Columns', module)
.add('Display Nested Data', () => )
diff --git a/packages/react-bootstrap-table2/src/body.js b/packages/react-bootstrap-table2/src/body.js
index 33a8c18..a69af71 100644
--- a/packages/react-bootstrap-table2/src/body.js
+++ b/packages/react-bootstrap-table2/src/body.js
@@ -1,23 +1,41 @@
+/* eslint react/prop-types: 0 */
import React from 'react';
import PropTypes from 'prop-types';
import _ from './utils';
import Row from './row';
+import RowSection from './row-section';
-const Body = ({ columns, data, keyField }) => (
-
- {
- data.map((row, index) => (
-
- ))
- }
-
-);
+const Body = (props) => {
+ const {
+ columns,
+ data,
+ keyField,
+ isEmpty,
+ noDataIndication,
+ visibleColumnSize
+ } = props;
+
+ let content;
+
+ if (isEmpty) {
+ const indication = _.isFunction(noDataIndication) ? noDataIndication() : noDataIndication;
+ content = ;
+ } else {
+ content = data.map((row, index) => (
+
+ ));
+ }
+
+ return (
+ { content }
+ );
+};
Body.propTypes = {
keyField: PropTypes.string.isRequired,
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 4d7be74..8db2286 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -21,7 +21,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
striped,
hover,
bordered,
- condensed
+ condensed,
+ noDataIndication
} = this.props;
const tableClass = cs('table', {
@@ -39,6 +40,9 @@ class BootstrapTable extends PropsBaseResolver(Component) {
data={ this.store.data }
keyField={ keyField }
columns={ columns }
+ isEmpty={ this.store.isEmpty() }
+ visibleColumnSize={ this.visibleColumnSize() }
+ noDataIndication={ noDataIndication }
/>
@@ -50,6 +54,7 @@ BootstrapTable.propTypes = {
keyField: PropTypes.string.isRequired,
data: PropTypes.array.isRequired,
columns: PropTypes.array.isRequired,
+ noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
striped: PropTypes.bool,
bordered: PropTypes.bool,
hover: PropTypes.bool,
@@ -60,7 +65,8 @@ BootstrapTable.defaultProps = {
striped: false,
bordered: true,
hover: false,
- condensed: false
+ condensed: false,
+ noDataIndication: null
};
export default BootstrapTable;
diff --git a/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
index c49b395..e963f51 100644
--- a/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
+++ b/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
@@ -1,6 +1,6 @@
export default ExtendBase =>
class ColumnResolver extends ExtendBase {
- columnSize() {
+ visibleColumnSize() {
return this.props.columns.length;
}
};
diff --git a/packages/react-bootstrap-table2/src/props-resolver/index.js b/packages/react-bootstrap-table2/src/props-resolver/index.js
index 252ffb4..158d1dd 100644
--- a/packages/react-bootstrap-table2/src/props-resolver/index.js
+++ b/packages/react-bootstrap-table2/src/props-resolver/index.js
@@ -7,7 +7,7 @@ export default ExtendBase =>
if (!keyField) {
throw new Error('Please specify a field as key via keyField');
}
- if (this.columnSize(columns) <= 0) {
+ if (this.visibleColumnSize(columns) <= 0) {
throw new Error('No any visible columns detect');
}
}
diff --git a/packages/react-bootstrap-table2/src/row-section.js b/packages/react-bootstrap-table2/src/row-section.js
new file mode 100644
index 0000000..f0c6efd
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/row-section.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const RowSection = ({ content, colSpan }) => (
+
+ |
+ { content }
+ |
+
+);
+
+RowSection.propTypes = {
+ content: PropTypes.any,
+ colSpan: PropTypes.number
+};
+
+RowSection.defaultProps = {
+ content: null,
+ colSpan: 1
+};
+
+export default RowSection;
diff --git a/packages/react-bootstrap-table2/src/store/base.js b/packages/react-bootstrap-table2/src/store/base.js
index 0ff1ef4..5805a43 100644
--- a/packages/react-bootstrap-table2/src/store/base.js
+++ b/packages/react-bootstrap-table2/src/store/base.js
@@ -3,4 +3,8 @@ export default class Store {
const { data } = props;
this.data = data ? data.slice() : [];
}
+
+ isEmpty() {
+ return this.data.length === 0;
+ }
}
diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table.scss
new file mode 100644
index 0000000..2737023
--- /dev/null
+++ b/packages/react-bootstrap-table2/style/react-bootstrap-table.scss
@@ -0,0 +1,5 @@
+.react-bootstrap-table-container {
+ td.react-bs-table-no-data {
+ text-align: center
+ }
+}
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2/test/body.test.js b/packages/react-bootstrap-table2/test/body.test.js
index 7528bed..e1bb741 100644
--- a/packages/react-bootstrap-table2/test/body.test.js
+++ b/packages/react-bootstrap-table2/test/body.test.js
@@ -1,8 +1,10 @@
import React from 'react';
+import sinon from 'sinon';
import { shallow } from 'enzyme';
-import Row from '../src/row';
import Body from '../src/body';
+import Row from '../src/row';
+import RowSection from '../src/row-section';
describe('Body', () => {
let wrapper;
@@ -33,4 +35,80 @@ describe('Body', () => {
expect(wrapper.find(Row).length).toBe(data.length);
});
});
+
+ describe('when data is empty', () => {
+ beforeEach(() => {
+ wrapper = shallow(
+