diff --git a/docs/README.md b/docs/README.md index 83213a6..14782fe 100644 --- a/docs/README.md +++ b/docs/README.md @@ -18,6 +18,7 @@ * [id](#id) * [classes](#classes) * [wrapperClasses](#wrapperClasses) +* [headerClasses](#headerClasses) * [cellEdit](#cellEdit) * [selectRow](#selectRow) * [rowStyle](#rowStyle) @@ -111,6 +112,10 @@ Customize class on `table` element. ### wrapperClasses - [String] Customize class on the outer element which wrap up the `table` element. + +### headerClasses - [String] +Customize class on the header row(`tr`). + ### cellEdit - [Object] Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail. diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/header-class-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/header-class-table.js new file mode 100644 index 0000000..2c480c1 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/header-columns/header-class-table.js @@ -0,0 +1,52 @@ +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 () => ( +
+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 64c4909..77dc4c9 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -33,6 +33,7 @@ import HeaderColumnEventTable from 'examples/header-columns/column-event-table'; import HeaderColumnClassTable from 'examples/header-columns/column-class-table'; import HeaderColumnStyleTable from 'examples/header-columns/column-style-table'; import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table'; +import HeaderClassTable from 'examples/header-columns/header-class-table'; // column filter import TextFilter from 'examples/column-filter/text-filter'; @@ -165,7 +166,8 @@ storiesOf('Work on Header Columns', module) .add('Column Event', () => ) .add('Customize Column Class', () => ) .add('Customize Column Style', () => ) - .add('Customize Column HTML attribute', () => ); + .add('Customize Column HTML attribute', () => ) + .add('Header Class', () => ); storiesOf('Column Filter', module) .add('Text Filter', () => ) diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss index 3468c70..a0ec3d1 100644 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss +++ b/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss @@ -9,4 +9,8 @@ .demo-row-odd { background-color: $green-lighten-4; +} + +.header-class { + background-color: $green-lighten-4; } \ No newline at end of file diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index fe6865c..e9ee145 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -86,6 +86,7 @@ class BootstrapTable extends PropsBaseResolver(Component) { { tableCaption }
{ const { ROW_SELECT_DISABLED } = Const; const { + className, columns, onSort, onFilter, @@ -21,7 +22,7 @@ const Header = (props) => { return ( - + { (selectRow.mode !== ROW_SELECT_DISABLED && !selectRow.hideSelectColumn) ? : null @@ -60,7 +61,8 @@ Header.propTypes = { sortField: PropTypes.string, sortOrder: PropTypes.string, selectRow: PropTypes.object, - onExternalFilter: PropTypes.func + onExternalFilter: PropTypes.func, + className: PropTypes.string }; export default Header; diff --git a/packages/react-bootstrap-table2/test/header.test.js b/packages/react-bootstrap-table2/test/header.test.js index c502602..d8db9cd 100644 --- a/packages/react-bootstrap-table2/test/header.test.js +++ b/packages/react-bootstrap-table2/test/header.test.js @@ -29,6 +29,25 @@ describe('Header', () => { }); }); + describe('className prop is exists', () => { + const className = 'test-class'; + + beforeEach(() => { + wrapper = shallow( +
+ ); + }); + + it('should render successfully', () => { + expect(wrapper.length).toBe(1); + expect(wrapper.find(`.${className}`).length).toBe(1); + }); + }); + describe('header with columns enable sort', () => { const sortField = columns[1].dataField;