add title

assets/index.less

@@ -38,6 +38,15 @@
     box-sizing: border-box;
   }
 
+  .@{tablePrefixCls}-title {
+    padding: 16px 8px;
+    border-top: 1px solid #e9e9e9;
+  }
+
+  .@{tablePrefixCls}-content {
+    position: relative;
+  }
+
   .@{tablePrefixCls}-footer {
     padding: 16px 8px;
     border-bottom: 1px solid #e9e9e9;

examples/title.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Table = require('rc-table');
+require('rc-table/assets/index.less');
+
+const columns = [
+  {title: '表头1', dataIndex: 'a', key: 'a', width: 100},
+  {id: '123', title: '表头2', dataIndex: 'b', key: 'b', width: 100},
+  {title: '表头3', dataIndex: 'c', key: 'c', width: 200},
+  {
+    title: '操作', dataIndex: '', key: 'd', render: function() {
+      return <a href="#">操作</a>;
+    },
+  },
+];
+
+const data = [{a: '123', key: '1'}, {a: 'cdd', b: 'edd', key: '2'}, {a: '1333', c: 'eee', d: 2, key: '3'}];
+
+const title = (currentData) => {
+  return <div>Title: {currentData.length} items</div>;
+};
+
+ReactDOM.render(
+  <div>
+    <h2>simple table</h2>
+    <Table columns={columns}
+      title={title}
+      data={data} />
+  </div>,
+  document.getElementById('__react-content')
+);

src/Table.jsx

@@ -28,6 +28,7 @@ const Table = React.createClass({
     columnsPageSize: PropTypes.number,
     expandIconColumnIndex: PropTypes.number,
     showHeader: PropTypes.bool,
+    title: PropTypes.func,
     footer: PropTypes.func,
     scroll: PropTypes.object,
     rowRef: PropTypes.func,
@@ -464,6 +465,15 @@ const Table = React.createClass({
     return <span>{headTable}{BodyTable}</span>;
   },
 
+  getTitle() {
+    const { title, prefixCls } = this.props;
+    return title ? (
+      <div className={`${prefixCls}-title`}>
+        {title(this.state.data)}
+      </div>
+    ) : null;
+  },
+
   getFooter() {
     const { footer, prefixCls } = this.props;
     return footer ? (
@@ -656,18 +666,21 @@ const Table = React.createClass({
 
     return (
       <div className={className} style={props.style}>
-        {this.isAnyColumnsLeftFixed() &&
-        <div className={`${prefixCls}-fixed-left`}>
-          {this.getLeftFixedTable()}
-        </div>}
-        <div className={isTableScroll ? `${prefixCls}-scroll` : ''}>
-          {this.getTable()}
-          {this.getFooter()}
+        {this.getTitle()}
+        <div className={`${prefixCls}-content`}>
+          {this.isAnyColumnsLeftFixed() &&
+          <div className={`${prefixCls}-fixed-left`}>
+            {this.getLeftFixedTable()}
+          </div>}
+          <div className={isTableScroll ? `${prefixCls}-scroll` : ''}>
+            {this.getTable()}
+            {this.getFooter()}
+          </div>
+          {this.isAnyColumnsRightFixed() &&
+          <div className={`${prefixCls}-fixed-right`}>
+            {this.getRightFixedTable()}
+          </div>}
         </div>
-        {this.isAnyColumnsRightFixed() &&
-        <div className={`${prefixCls}-fixed-right`}>
-          {this.getRightFixedTable()}
-        </div>}
       </div>
     );
   },