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); }); });