From b8555256150f344f9342e6cfe0ff23356fad92f2 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 20 Jan 2016 17:14:34 +0800
Subject: [PATCH] Feature: support paging columns, ref #708

---
 components/table/demo/paging-columns.md | 48 +++++++++++++++++++++
 components/table/index.jsx              |  4 +-
 style/components/table.less             | 56 +++++++++++++++++++++----
 3 files changed, 98 insertions(+), 10 deletions(-)
 create mode 100644 components/table/demo/paging-columns.md

diff --git a/components/table/demo/paging-columns.md b/components/table/demo/paging-columns.md
new file mode 100644
index 0000000000..2fba457418
--- /dev/null
+++ b/components/table/demo/paging-columns.md
@@ -0,0 +1,48 @@
+# 滚屏分页的列
+
+- order: 16
+
+对于列数很多的数据，可以进行横向的分页，通过切换符切换当前展现的列。
+
+---
+
+````jsx
+import { Table } from 'antd';
+
+const columns = [
+  { title: '姓名', dataIndex: 'name', key: 'name' },
+  { title: '年龄', dataIndex: 'age', key: 'age' },
+  { title: '列1', dataIndex: 'age', key: '1' },
+  { title: '列2', dataIndex: 'age', key: '2' },
+  { title: '列3', dataIndex: 'age', key: '3' },
+  { title: '列4', dataIndex: 'age', key: '4' },
+  { title: '列5', dataIndex: 'age', key: '5' },
+  { title: '列6', dataIndex: 'age', key: '6' },
+  { title: '列7', dataIndex: 'age', key: '7' },
+  { title: '列8', dataIndex: 'age', key: '8' },
+  {
+    title: '操作',
+    key: 'operation',
+    render() {
+      return <a href="#">操作</a>;
+    }
+  },
+];
+const data = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+}];
+
+const App = React.createClass({
+  render() {
+    return <Table columns={columns} dataSource={data} columnsPageRange={[2, 9]} columnsPageSize={4} />;
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
+````
diff --git a/components/table/index.jsx b/components/table/index.jsx
index f666828e2e..19343620c0 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -438,11 +438,11 @@ let AntTable = React.createClass({
         );
       }
       column.title = (
-        <div>
+        <span>
           {column.title}
           {sortButton}
           {filterDropdown}
-        </div>
+        </span>
       );
       return column;
     });
diff --git a/style/components/table.less b/style/components/table.less
index d40aba13cc..d3a5d333bf 100644
--- a/style/components/table.less
+++ b/style/components/table.less
@@ -1,7 +1,7 @@
 @import "../mixins/index";
 
 @table-prefix-cls: ~"@{css-prefix}table";
-@table-border-color: #e9e9e9;
+@table-border-color: @border-color-split;
 @table-head-background-color: #f4f4f4;
 
 .@{table-prefix-cls} {
@@ -25,6 +25,7 @@
     background: @table-head-background-color;
     font-weight: bold;
     transition: background .3s ease;
+    position: relative;
 
     .anticon-filter {
       margin-left: 4px;
@@ -107,14 +108,14 @@
 
   &-small {
     table {
-      border: 1px solid #e9e9e9;
+      border: 1px solid @border-color-split;
       padding: 0 8px;
     }
 
     th {
       padding: 10px 8px;
       background: #fff;
-      border-bottom: 1px solid #e9e9e9;
+      border-bottom: 1px solid @border-color-split;
     }
 
     td {
@@ -163,11 +164,11 @@
 
   &.@{table-prefix-cls}-bordered {
     table {
-      border: 1px solid #e9e9e9;
+      border: 1px solid @border-color-split;
     }
 
     th {
-      border-bottom: 1px solid #e9e9e9;
+      border-bottom: 1px solid @border-color-split;
     }
 
     tr:last-child {
@@ -179,7 +180,7 @@
 
     th,
     td {
-      border-right: 1px solid #e9e9e9;
+      border-right: 1px solid @border-color-split;
       &:last-child {
         border-right: 0;
       }
@@ -201,7 +202,7 @@
     text-align: center;
     font-size: 12px;
     color: #999;
-    border-bottom: 1px solid #e9e9e9;
+    border-bottom: 1px solid @border-color-split;
     position: absolute;
     top: 50px;
     left: 0;
@@ -286,7 +287,7 @@
       height: 18px;
       text-align: center;
       line-height: 15px;
-      border: 1px solid #e9e9e9;
+      border: 1px solid @border-color-split;
       user-select: none;
       background: #fff;
       &-cell {
@@ -319,4 +320,43 @@
   .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
     margin-right: 8px;
   }
+
+  &-column-hidden {
+    display: none;
+  }
+  &-prev-columns-page,
+  &-next-columns-page {
+    cursor: pointer;
+    color: #666;
+    z-index: 1;
+    &:hover {
+      color: @primary-color;
+    }
+    &-disabled {
+      cursor: not-allowed;
+      color: #bbb;
+      &:hover {
+        color: #bbb;
+      }
+    }
+  }
+  &-prev-columns-page {
+    position: absolute;
+    left: -8px;
+    &:before {
+      content: '\e601';
+      .iconfont-size-under-12px(9px);
+      font-weight: bold;
+      font-family: anticon;
+    }
+  }
+  &-next-columns-page {
+    float: right;
+    &:before {
+      content: '\e600';
+      .iconfont-size-under-12px(9px);
+      font-weight: bold;
+      font-family: anticon;
+    }
+  }
 }