diff --git a/packages/react-bootstrap-table2/src/cell.js b/packages/react-bootstrap-table2/src/cell.js index 3286847..844e501 100644 --- a/packages/react-bootstrap-table2/src/cell.js +++ b/packages/react-bootstrap-table2/src/cell.js @@ -11,17 +11,22 @@ const Cell = ({ row, rowIndex, column, columnIndex }) => { style, classes, title, - events + events, + align } = column; - let content = _.get(row, dataField); let cellTitle; + let cellStyle = {}; + let content = _.get(row, dataField); const attrs = { ...events }; - const cellStyle = _.isFunction(style) ? style(content, row, columnIndex) : style; const cellClasses = _.isFunction(classes) ? classes(content, row, columnIndex) : classes; + if (style) { + cellStyle = _.isFunction(style) ? style(content, row, columnIndex) : style; + } + if (title) { cellTitle = _.isFunction(title) ? title(content, row, columnIndex) : content; attrs.title = cellTitle; @@ -31,6 +36,10 @@ const Cell = ({ row, rowIndex, column, columnIndex }) => { content = column.formatter(content, row, rowIndex, formatExtraData); } + if (align) { + cellStyle.textAlign = _.isFunction(align) ? align(content, row, columnIndex) : align; + } + attrs.style = cellStyle; attrs.className = cellClasses; diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index 49b455a..0d3e1fd 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -5,13 +5,20 @@ import _ from './utils'; const HeaderCell = ({ column, index }) => { - const { headerTitle, text } = column; + const { headerTitle, text, headerAlign } = column; const attrs = {}; + const headerStyle = {}; if (headerTitle) { attrs.title = _.isFunction(headerTitle) ? headerTitle(column, index) : text; } + if (headerAlign) { + headerStyle.textAlign = _.isFunction(headerAlign) ? headerAlign(column, index) : headerAlign; + } + + attrs.style = headerStyle; + return ( { column.text } @@ -29,7 +36,9 @@ HeaderCell.propTypes = { style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), headerTitle: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), title: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), - events: PropTypes.object + events: PropTypes.object, + headerAlign: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + align: PropTypes.oneOfType([PropTypes.string, PropTypes.func]) }).isRequired, index: PropTypes.number.isRequired }; diff --git a/packages/react-bootstrap-table2/test/cell.test.js b/packages/react-bootstrap-table2/test/cell.test.js index fc054a2..2a1cd75 100644 --- a/packages/react-bootstrap-table2/test/cell.test.js +++ b/packages/react-bootstrap-table2/test/cell.test.js @@ -238,4 +238,53 @@ describe('Cell', () => { expect(column.events.onClick.callCount).toBe(1); }); }); + + describe('when column.align prop is defined', () => { + let column; + const columnIndex = 1; + + beforeEach(() => { + column = { + dataField: 'id', + text: 'ID' + }; + }); + + describe('when align is string', () => { + beforeEach(() => { + column.align = 'center'; + wrapper = shallow( + ); + }); + + it('should render style.textAlign correctly', () => { + expect(wrapper.length).toBe(1); + expect(wrapper.find('td').prop('style').textAlign).toEqual(column.align); + }); + }); + + describe('when align is custom function', () => { + const customAlign = 'center'; + let alignCallBack; + + beforeEach(() => { + alignCallBack = sinon.stub() + .withArgs(row[column.dataField], row, columnIndex) + .returns(customAlign); + column.align = alignCallBack; + wrapper = shallow( + ); + }); + + it('should render style.textAlign correctly', () => { + expect(wrapper.length).toBe(1); + expect(wrapper.find('td').prop('style').textAlign).toEqual(customAlign); + }); + + it('should call custom headerAlign function correctly', () => { + expect(alignCallBack.callCount).toBe(1); + expect(alignCallBack.calledWith(row[column.dataField], row, columnIndex)).toBe(true); + }); + }); + }); }); diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js index 56a9727..4e5ce23 100644 --- a/packages/react-bootstrap-table2/test/header-cell.test.js +++ b/packages/react-bootstrap-table2/test/header-cell.test.js @@ -21,7 +21,12 @@ describe('HeaderCell', () => { it('should render successfully', () => { expect(wrapper.length).toBe(1); expect(wrapper.find('th').length).toBe(1); - expect(wrapper.contains({ column.text })).toBe(true); + expect(wrapper.text()).toEqual(column.text); + }); + + it('should have correct default style', () => { + const style = wrapper.find('th').prop('style'); + expect(style).toBeDefined(); }); }); @@ -69,4 +74,49 @@ describe('HeaderCell', () => { }); }); }); + + describe('when column.headerAlign prop is defined', () => { + let column; + beforeEach(() => { + column = { + dataField: 'id', + text: 'ID' + }; + }); + + describe('when headerAlign is string', () => { + beforeEach(() => { + column.headerAlign = 'center'; + wrapper = shallow(); + }); + + it('should render style.textAlign correctly', () => { + expect(wrapper.length).toBe(1); + expect(wrapper.find('th').prop('style').textAlign).toBe(column.headerAlign); + }); + }); + + describe('when headerAlign is custom function', () => { + const customAlign = 'center'; + let alignCallBack; + + beforeEach(() => { + alignCallBack = sinon.stub() + .withArgs(column, index) + .returns(customAlign); + column.headerAlign = alignCallBack; + wrapper = shallow(); + }); + + it('should render style.textAlign correctly by custom headerAlign function', () => { + expect(wrapper.length).toBe(1); + expect(wrapper.find('th').prop('style').textAlign).toBe(customAlign); + }); + + it('should call custom headerAlign function correctly', () => { + expect(alignCallBack.callCount).toBe(1); + expect(alignCallBack.calledWith(column, index)).toBe(true); + }); + }); + }); });