Added headerCellClassName() and bodyCellClassName() a la rowClassName()

README.md

@@ -122,6 +122,18 @@ React.render(<Table columns={columns} data={data} />, mountNode);
       <td></td>
       <td>get row's className</td>
     </tr>
+    <tr>
+      <td>bodyCellClassName</td>
+      <td>Function(record, index):string</td>
+      <td></td>
+      <td>used to compute a table body cell's className</td>
+    </tr>
+    <tr>
+      <td>headerCellClassName</td>
+      <td>Function(headerCellConfig):string</td>
+      <td></td>
+      <td>used to compute a header cell's className based on the config data for that column header.</td>
+    </tr>
     <tr>
       <td>rowRef</td>
       <td>Function(record, index, indent):string</td>

src/Table.jsx

@@ -20,6 +20,8 @@ const Table = React.createClass({
     bodyStyle: PropTypes.object,
     style: PropTypes.object,
     rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    bodyCellClassName: PropTypes.func,
+    headerCellClassName: PropTypes.func,
     rowClassName: PropTypes.func,
     expandedRowClassName: PropTypes.func,
     childrenColumnName: PropTypes.string,
@@ -47,6 +49,8 @@ const Table = React.createClass({
       defaultExpandAllRows: false,
       defaultExpandedRowKeys: [],
       rowKey: 'key',
+      bodyCellClassName: () => '',
+      headerCellClassName: () => '',
       rowClassName: () => '',
       expandedRowClassName: () => '',
       onExpand() {},
@@ -193,7 +197,7 @@ const Table = React.createClass({
   },
 
   getHeader(columns, fixed) {
-    const { showHeader, expandIconAsCell, prefixCls } = this.props;
+    const { headerCellClassName, showHeader, expandIconAsCell, prefixCls } = this.props;
     const rows = this.getHeaderRows(columns);
 
     if (expandIconAsCell && fixed !== 'right') {
@@ -209,6 +213,7 @@ const Table = React.createClass({
 
     return showHeader ? (
       <TableHeader
+        headerCellClassName={headerCellClassName}
         prefixCls={prefixCls}
         rows={rows}
         rowStyle={trStyle}
@@ -293,6 +298,7 @@ const Table = React.createClass({
     const expandRowByClick = props.expandRowByClick;
     const { fixedColumnsBodyRowsHeight } = this.state;
     let rst = [];
+    const bodyCellClassName = props.bodyCellClassName;
     const rowClassName = props.rowClassName;
     const rowRef = props.rowRef;
     const expandedRowClassName = props.expandedRowClassName;
@@ -338,6 +344,7 @@ const Table = React.createClass({
           indentSize={props.indentSize}
           needIndentSpaced={needIndentSpaced}
           className={className}
+          bodyCellClassName={bodyCellClassName}
           record={record}
           expandIconAsCell={expandIconAsCell}
           onDestroy={this.onRowDestroy}

src/TableCell.jsx

@@ -3,6 +3,7 @@ import get from 'lodash.get';
 
 const TableCell = React.createClass({
   propTypes: {
+    bodyCellClassName: PropTypes.string,
     record: PropTypes.object,
     prefixCls: PropTypes.string,
     index: PropTypes.number,
@@ -23,7 +24,7 @@ const TableCell = React.createClass({
   },
   render() {
     const { record, indentSize, prefixCls, indent,
-            index, expandIcon, column } = this.props;
+            index, expandIcon, bodyCellClassName, column } = this.props;
     const { dataIndex, render, className = '' } = column;
 
     // We should return undefined if no dataIndex is specified, but in order to
@@ -65,11 +66,13 @@ const TableCell = React.createClass({
     if (rowSpan === 0 || colSpan === 0) {
       return null;
     }
+
+    const tdClassName = bodyCellClassName ? `${className} ${bodyCellClassName}`.trim() : className;
     return (
       <td
         colSpan={colSpan}
         rowSpan={rowSpan}
-        className={className}
+        className={tdClassName}
         onClick={this.handleClick}
       >
         {indentText}

src/TableHeader.jsx

@@ -6,18 +6,27 @@ export default React.createClass({
     prefixCls: PropTypes.string,
     rowStyle: PropTypes.object,
     rows: PropTypes.array,
+    headerCellClassName: PropTypes.func,
   },
   shouldComponentUpdate(nextProps) {
     return !shallowequal(nextProps, this.props);
   },
   render() {
-    const { prefixCls, rowStyle, rows } = this.props;
+    const { headerCellClassName, prefixCls, rowStyle, rows } = this.props;
     return (
       <thead className={`${prefixCls}-thead`}>
         {
           rows.map((row, index) => (
             <tr key={index} style={rowStyle}>
-              {row.map((cellProps, i) => <th {...cellProps} key={i} />)}
+              {
+                row.map((cellProps, i) => {
+                  const thClassName = headerCellClassName(cellProps);
+                  let className = cellProps.className;
+                  className = thClassName ? `${className} ${thClassName}`.trim() : className;
+                  cellProps.className = className;
+                  return <th {...cellProps} key={i}/>;
+                })
+              }
             </tr>
           ))
         }

src/TableRow.jsx

@@ -23,6 +23,7 @@ const TableRow = React.createClass({
     expandable: PropTypes.any,
     onExpand: PropTypes.func,
     needIndentSpaced: PropTypes.bool,
+    bodyCellClassName: PropTypes.func,
     className: PropTypes.string,
     indent: PropTypes.number,
     indentSize: PropTypes.number,
@@ -36,6 +37,7 @@ const TableRow = React.createClass({
       onRowClick() {},
       onRowDoubleClick() {},
       onDestroy() {},
+      bodyCellClassName: () => {},
       expandIconColumnIndex: 0,
       expandRowByClick: false,
       onHover() {},
@@ -100,7 +102,7 @@ const TableRow = React.createClass({
 
   render() {
     const {
-      prefixCls, columns, record, height, visible, index,
+      prefixCls, columns, bodyCellClassName, record, height, visible, index,
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
       expandable, onExpand, needIndentSpaced, indent, indentSize,
     } = this.props;
@@ -125,10 +127,11 @@ const TableRow = React.createClass({
     );
 
     for (let i = 0; i < columns.length; i++) {
+      const tdClassName = bodyCellClassName(record, index);
       if (expandIconAsCell && i === 0) {
         cells.push(
           <td
-            className={`${prefixCls}-expand-icon-cell`}
+            className={`${prefixCls}-expand-icon-cell ${tdClassName}`.trim()}
             key="rc-table-expand-icon-cell"
           >
             {expandIcon}
@@ -140,6 +143,7 @@ const TableRow = React.createClass({
       cells.push(
         <TableCell
           prefixCls={prefixCls}
+          bodyCellClassName={tdClassName}
           record={record}
           indentSize={indentSize}
           indent={indent}