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