diff --git a/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js b/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js
new file mode 100644
index 0000000..d14c606
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+
+`;
+
+export default () => (
+
+
Customized table ID
+
+
+ Customized table className
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index b7444a7..c16dc53 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -9,6 +9,7 @@ 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';
+import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
import CaptionTable from 'examples/basic/caption-table';
// work on columns
@@ -121,6 +122,7 @@ storiesOf('Basic Table', module)
.add('striped, hover, condensed table', () => )
.add('borderless table', () => )
.add('Indication For Empty Table', () => )
+ .add('Customized id and class table', () => )
.add('Table with caption', () => );
storiesOf('Work on Columns', module)
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss
new file mode 100644
index 0000000..34353eb
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss
@@ -0,0 +1,7 @@
+table.foo {
+ background-color: $grey-500;
+}
+
+table#bar {
+ background-color: $light-blue;
+}
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss
index cf0a024..c38e02c 100644
--- a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss
+++ b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss
@@ -3,6 +3,7 @@
@import "base/github-corner";
@import "base/code-block";
+@import "base-table/index";
@import "welcome/index";
@import "columns/index";
@import "cell-edit/index";
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index dae3893..743eb3b 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -42,6 +42,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
store,
columns,
keyField,
+ id,
+ classes,
striped,
hover,
bordered,
@@ -58,7 +60,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
'table-hover': hover,
'table-bordered': bordered,
'table-condensed': condensed
- });
+ }, classes);
const cellSelectionInfo = this.resolveSelectRowProps({
onRowSelect: this.props.onRowSelect
@@ -74,7 +76,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
return (
-
+
{ tableCaption }
{
expect(wrapper.state().data).toEqual(store.data);
});
- it('should have table-bordered class as default', () => {
- expect(wrapper.find('table.table-bordered').length).toBe(1);
+ it("should only have classes 'table' and 'table-bordered' as default", () => {
+ expect(wrapper.find('table').prop('className')).toBe('table table-bordered');
+ });
+
+ it('should not have customized id as default', () => {
+ expect(wrapper.find('table').prop('id')).toBeUndefined();
+ });
+ });
+
+ describe('when props.classes was defined', () => {
+ const classes = 'foo';
+
+ beforeEach(() => {
+ wrapper = shallow(
+ );
+ });
+
+ it('should display customized classes correctly', () => {
+ expect(wrapper.find(`table.${classes}`).length).toBe(1);
+ });
+ });
+
+ describe('when props.id was defined', () => {
+ const id = 'foo';
+
+ beforeEach(() => {
+ wrapper = shallow(
+ );
+ });
+
+ it('should display customized id correctly', () => {
+ expect(wrapper.find(`table#${id}`).length).toBe(1);
});
});