implement align on header & body cell (#27)

fix #24

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;
 

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 (
     <th { ...attrs }>
       { 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
 };

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(
+          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
+      });
+
+      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(
+          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
+      });
+
+      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);
+      });
+    });
+  });
 });

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(<th>{ column.text }</th>)).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(<HeaderCell column={ column } index={ index } />);
+      });
+
+      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(<HeaderCell column={ column } index={ index } />);
+      });
+
+      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);
+      });
+    });
+  });
 });