Implement custom style/class on cell (#20)

fix #19

packages/react-bootstrap-table2/src/cell.js

@@ -3,20 +3,35 @@ import PropTypes from 'prop-types';
 
 import _ from './utils';
 
-const Cell = ({ row, rowIndex, column }) => {
+const Cell = ({ row, rowIndex, column, columnIndex }) => {
-  let content = _.get(row, column.dataField);
+  const {
-  if (column.formatter) {
+    dataField,
-    content = column.formatter(content, row, rowIndex, column.formatExtraData);
+    formatter,
+    formatExtraData,
+    style,
+    classes
+  } = column;
+  let content = _.get(row, dataField);
+  const cellStyle = _.isFunction(style) ? style(content, row, columnIndex) : style;
+  const cellClasses = _.isFunction(classes) ? classes(content, row, columnIndex) : classes;
+  if (formatter) {
+    content = column.formatter(content, row, rowIndex, formatExtraData);
   }
+
+  const attrs = {
+    style: cellStyle,
+    className: cellClasses
+  };
   return (
-    <td>{ content }</td>
+    <td { ...attrs }>{ content }</td>
   );
 };
 
 Cell.propTypes = {
   row: PropTypes.object.isRequired,
   rowIndex: PropTypes.number.isRequired,
-  column: PropTypes.object.isRequired
+  column: PropTypes.object.isRequired,
+  columnIndex: PropTypes.number.isRequired
 };
 
 export default Cell;

packages/react-bootstrap-table2/src/row.js

@@ -7,12 +7,13 @@ import Cell from './cell';
 const Row = ({ row, rowIndex, columns }) => (
   <tr>
     {
-      columns.map(column =>
+      columns.map((column, index) =>
         (
           <Cell
             key={ _.get(row, column.dataField) }
             row={ row }
             rowIndex={ rowIndex }
+            columnIndex={ index }
             column={ column }
           />
         ))

packages/react-bootstrap-table2/src/utils.js

@@ -13,6 +13,11 @@ function get(target, field) {
   return result;
 }
 
+function isFunction(obj) {
+  return obj && (typeof obj === 'function');
+}
+
 export default {
-  get
+  get,
+  isFunction
 };

packages/react-bootstrap-table2/test/cell.test.js

@@ -18,16 +18,16 @@ describe('Cell', () => {
     };
 
     beforeEach(() => {
-      wrapper = shallow(<Cell row={ row } rowIndex={ 1 } column={ column } />);
+      wrapper = shallow(<Cell row={ row } columnIndex={ 1 } rowIndex={ 1 } column={ column } />);
     });
 
     it('should render successfully', () => {
       expect(wrapper.length).toBe(1);
-      expect(wrapper.contains(<td>{ row[column.dataField] }</td>)).toBe(true);
+      expect(wrapper.text()).toEqual(row[column.dataField].toString());
     });
   });
 
-  describe('when formatter prop is defined', () => {
+  describe('when column.formatter prop is defined', () => {
     const rowIndex = 1;
     const column = {
       dataField: 'id',
@@ -41,14 +41,16 @@ describe('Cell', () => {
     column.formatter = formatter; // defined column formatter
 
     beforeEach(() => {
-      wrapper = shallow(<Cell row={ row } rowIndex={ rowIndex } column={ column } />);
+      wrapper = shallow(
+        <Cell row={ row } columnIndex={ 1 } rowIndex={ rowIndex } column={ column } />);
     });
 
     afterEach(() => { formatter.reset(); });
 
     it('should render successfully', () => {
       expect(wrapper.length).toBe(1);
-      expect(wrapper.contains(<td><h3>{ row[column.dataField] }</h3></td>)).toBe(true);
+      expect(wrapper.find('h3').length).toBe(1);
+      expect(wrapper.text()).toEqual(row[column.dataField].toString());
     });
 
     it('should call custom formatter correctly', () => {
@@ -57,4 +59,106 @@ describe('Cell', () => {
         row, rowIndex, column.formatExtraData)).toBe(true);
     });
   });
+
+  describe('when column.style prop is defined', () => {
+    let column;
+    const columnIndex = 1;
+
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID'
+      };
+    });
+
+    describe('when style is an object', () => {
+      beforeEach(() => {
+        column.style = { backgroundColor: 'red' };
+        wrapper = shallow(
+          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
+      });
+
+      it('should render successfully', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find('td').prop('style')).toEqual(column.style);
+      });
+    });
+
+    describe('when style is a function', () => {
+      const returnStyle = { backgroundColor: 'red' };
+      let styleCallBack;
+
+      beforeEach(() => {
+        styleCallBack = sinon.stub()
+          .withArgs(row[column.dataField], row, columnIndex)
+          .returns(returnStyle);
+        column.style = styleCallBack;
+        wrapper = shallow(
+          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
+      });
+
+      afterEach(() => { styleCallBack.reset(); });
+
+      it('should render successfully', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find('td').prop('style')).toEqual(returnStyle);
+      });
+
+      it('should call custom style function correctly', () => {
+        expect(styleCallBack.callCount).toBe(1);
+        expect(styleCallBack.calledWith(row[column.dataField], row, columnIndex)).toBe(true);
+      });
+    });
+  });
+
+  describe('when column.classes prop is defined', () => {
+    let column;
+    const columnIndex = 1;
+
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID'
+      };
+    });
+
+    describe('when classes is an object', () => {
+      beforeEach(() => {
+        column.classes = 'td-test-class';
+        wrapper = shallow(
+          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
+      });
+
+      it('should render successfully', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.hasClass(column.classes)).toBe(true);
+      });
+    });
+
+    describe('when classes is a function', () => {
+      const returnClasses = 'td-test-class';
+      let classesCallBack;
+
+      beforeEach(() => {
+        classesCallBack = sinon.stub()
+          .withArgs(row[column.dataField], row, columnIndex)
+          .returns(returnClasses);
+        column.classes = classesCallBack;
+        wrapper = shallow(
+          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
+      });
+
+      afterEach(() => { classesCallBack.reset(); });
+
+      it('should render successfully', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.hasClass(returnClasses)).toBe(true);
+      });
+
+      it('should call custom classes function correctly', () => {
+        expect(classesCallBack.callCount).toBe(1);
+        expect(classesCallBack.calledWith(row[column.dataField], row, columnIndex)).toBe(true);
+      });
+    });
+  });
 });