Add fixed columns demos

components/table/demo/ajax.md

@@ -66,7 +66,7 @@ const Test = React.createClass({
     console.log('请求参数：', params);
     this.setState({ loading: true });
     reqwest({
-      url: 'demo/data.json',
+      url: '/components/table/demo/data.json',
       method: 'get',
       data: params,
       type: 'json',

components/table/demo/fixed-columns-header.md

+# 固定头和列
+
+- order: 18
+
+适合同时展示有大量数据和数据列。
+
+> 需要给每列都指定宽度 `width`。
+
+---
+
+````jsx
+import { Table } from 'antd';
+
+const columns = [
+  { title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
+  { title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
+  { title: '列1', width: 75, dataIndex: 'age', key: '1' },
+  { title: '列2', width: 75, dataIndex: 'age', key: '2' },
+  { title: '列3', width: 75, dataIndex: 'age', key: '3' },
+  { title: '列4', width: 75, dataIndex: 'age', key: '4' },
+  { title: '列5', width: 75, dataIndex: 'age', key: '5' },
+  { title: '列6', width: 75, dataIndex: 'age', key: '6' },
+  { title: '列7', width: 75, dataIndex: 'age', key: '7' },
+  { title: '列8', width: 75, dataIndex: 'age', key: '8' },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 100,
+    render: () => <a href="#">操作</a>,
+  },
+];
+
+const data = [];
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: `李大嘴${i}`,
+    age: 32,
+    address: `西湖区湖底公园${i}号`
+  });
+}
+
+const App = React.createClass({
+  render() {
+    return <Table columns={columns} dataSource={data} scroll={{ x: true, y: 300 }} />;
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
+````

components/table/demo/fixed-columns.md

+# 固定列
+
+- order: 17
+
+对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll={{ x: true }}` 配合使用。
+
+> 需要给每列都指定宽度 `width`。
+
+---
+
+````jsx
+import { Table } from 'antd';
+
+const columns = [
+  { title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
+  { title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
+  { title: '列1', width: 75, dataIndex: 'age', key: '1' },
+  { title: '列2', width: 75, dataIndex: 'age', key: '2' },
+  { title: '列3', width: 75, dataIndex: 'age', key: '3' },
+  { title: '列4', width: 75, dataIndex: 'age', key: '4' },
+  { title: '列5', width: 75, dataIndex: 'age', key: '5' },
+  { title: '列6', width: 75, dataIndex: 'age', key: '6' },
+  { title: '列7', width: 75, dataIndex: 'age', key: '7' },
+  { title: '列8', width: 75, dataIndex: 'age', key: '8' },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 100,
+    render: () => <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} scroll={{ x: true }} />;
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
+````

components/table/demo/paging-columns.md

-# 横向滚屏表格
-
-- 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);
-````

package.json

@@ -57,7 +57,7 @@
     "rc-slider": "^3.5.1",
     "rc-steps": "~1.4.1",
     "rc-switch": "~1.3.2",
-    "rc-table": "~3.11.1",
+    "rc-table": "~4.0.0-beta.1",
     "rc-tabs": "~5.8.0",
     "rc-time-picker": "~1.1.0",
     "rc-tooltip": "~3.3.1",

style/components/table.less

 @import "../mixins/index";
 
 @table-prefix-cls: ~"@{css-prefix}table";
-@table-border-color: @border-color-split;
 @table-head-background-color: #f4f4f4;
 
 .@{table-prefix-cls} {
@@ -9,6 +8,7 @@
   color: @text-color;
   border-radius: @border-radius-base @border-radius-base 0 0;
   overflow: hidden;
+  position: relative;
 
   &-body {
     transition: opacity 0.3s ease;
@@ -44,7 +44,7 @@
   }
 
   td {
-    border-bottom: 1px solid @table-border-color;
+    border-bottom: 1px solid @border-color-split;
   }
 
   tr {
@@ -91,6 +91,11 @@
     width: 60px;
   }
 
+  &-header {
+    background: @table-head-background-color;
+    overflow: hidden;
+  }
+
   &-header + &-body {
     overflow: auto;
     height: 360px;
@@ -234,74 +239,72 @@
       margin-right: 4px;
     }
   }
-}
 
-.@{table-prefix-cls}-pagination {
-  margin: 16px 0;
-  float: right;
-}
+  &-pagination {
+    margin: 16px 0;
+    float: right;
+  }
 
-.@{table-prefix-cls}-filter-dropdown {
-  min-width: 96px;
-  margin-left: -8px;
-  background: #fff;
-  border-radius: @border-radius-base;
-  border: 1px solid @border-color-base;
-  box-shadow: @box-shadow-base;
+  &-filter-dropdown {
+    min-width: 96px;
+    margin-left: -8px;
+    background: #fff;
+    border-radius: @border-radius-base;
+    border: 1px solid @border-color-base;
+    box-shadow: @box-shadow-base;
 
-  .ant-dropdown-menu {
-    border: 0;
-    box-shadow: none;
-    border-radius: @border-radius-base @border-radius-base 0 0;
+    .ant-dropdown-menu {
+      border: 0;
+      box-shadow: none;
+      border-radius: @border-radius-base @border-radius-base 0 0;
 
-    &-sub {
-      border-radius: @border-radius-base;
-      border: 1px solid @border-color-base;
-      box-shadow: @box-shadow-base;
-    }
+      &-sub {
+        border-radius: @border-radius-base;
+        border: 1px solid @border-color-base;
+        box-shadow: @box-shadow-base;
+      }
 
-    .ant-dropdown-submenu-contain-selected {
-      .ant-dropdown-menu-submenu-title:after {
-        color: @primary-color;
-        font-weight: bold;
-        text-shadow: 0 0 2px tint(@primary-color, 80%);
+      .ant-dropdown-submenu-contain-selected {
+        .ant-dropdown-menu-submenu-title:after {
+          color: @primary-color;
+          font-weight: bold;
+          text-shadow: 0 0 2px tint(@primary-color, 80%);
+        }
       }
     }
-  }
 
-  .ant-dropdown-menu-item {
-    overflow: hidden;
-  }
-
-  > .ant-dropdown-menu > .ant-dropdown-menu-item:last-child,
-  > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
-    border-radius: 0;
-  }
-
-  &-btns {
-    overflow: hidden;
-    padding: 7px 15px;
-    border-top: 1px solid @border-color-split;
-  }
-
-  &-link {
-    color: @link-color;
-    &:hover {
-      color: @link-hover-color;
+    .ant-dropdown-menu-item {
+      overflow: hidden;
     }
-    &:active {
-      color: @link-active-color;
+
+    > .ant-dropdown-menu > .ant-dropdown-menu-item:last-child,
+    > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
+      border-radius: 0;
     }
-    &.confirm {
-      float: left;
+
+    &-btns {
+      overflow: hidden;
+      padding: 7px 15px;
+      border-top: 1px solid @border-color-split;
     }
-    &.clear {
-      float: right;
+
+    &-link {
+      color: @link-color;
+      &:hover {
+        color: @link-hover-color;
+      }
+      &:active {
+        color: @link-active-color;
+      }
+      &.confirm {
+        float: left;
+      }
+      &.clear {
+        float: right;
+      }
     }
   }
-}
 
-.@{table-prefix-cls} {
   &-row {
     &-expand-icon {
       cursor: pointer;
@@ -337,6 +340,7 @@
       display: inline-block;
     }
   }
+
   tr&-expanded-row {
     &,
     &:hover {
@@ -348,12 +352,60 @@
     margin-right: 8px;
   }
 
+  &-scroll {
+    overflow: auto;
+  }
+
+  &-body-inner {
+    overflow: scroll;
+    height: 100%;
+  }
+
+  &-fixed {
+    table-layout: fixed;
+  }
+
+  &-fixed-left,
+  &-fixed-right {
+    position: absolute;
+    top: 0;
+    overflow: hidden;
+    z-index: 1;
+    table {
+      width: auto;
+      background: #fff;
+    }
+  }
+
+  &-fixed-left {
+    left: 0;
+    box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
+    & .@{table-prefix-cls}-body-inner {
+      margin-right: -20px;
+    }
+  }
+
+  &-fixed-right {
+    right: 0;
+    box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);
+  }
+
+  &&-scroll-position-left &-fixed-left {
+    box-shadow: none;
+  }
+
+  &&-scroll-position-right &-fixed-right {
+    box-shadow: none;
+  }
+
   &-column-hidden {
     display: none;
   }
+
   th&-column-has-prev {
     position: relative;
   }
+
   th&-column-has-prev,
   td&-column-has-prev {
     padding-left: 24px;