import component rc-table

components/table/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-标准的表格。
+简单的表格。
 
 ---
 
@@ -14,16 +14,26 @@ var columns = [{
 }, {
   title: '年龄',
   dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: '',
+  render: function(a, b) {
+    console.log(a, b);
+    return <a href="#">操作</a>;
+  }
 }];
 var data = [{
   name: '胡彦斌',
-  age: 32
+  age: 32,
+  address: '西湖区湖底公园1号'
 }, {
   name: '胡彦祖',
-  age: 42
+  age: 42,
+  address: '西湖区湖底公园1号'
 }, {
   name: '李大嘴',
-  age: 32
+  age: 32,
+  address: '西湖区湖底公园1号'
 }];
 
 React.render(<Table columns={columns} data={data} />

components/table/index.jsx

@@ -4,7 +4,8 @@ import Table from 'rc-table';
 let AntTable = React.createClass({
   getDefaultProps() {
     return {
-      prefixCls: 'ant-table'
+      prefixCls: 'ant-table',
+      useFixedHeader: false
     };
   },
   render() {

components/table/index.md

@@ -2,6 +2,7 @@
 
 - category: Components
 - chinese: 表格
+- cols: 1
 
 ---
 

package.json

@@ -24,7 +24,7 @@
     "rc-select": "~4.2.1",
     "rc-steps": "~1.1.3",
     "rc-switch": "~1.1.0",
-    "rc-table": "~2.2.0",
+    "rc-table": "~3.0.1",
     "rc-tabs": "~5.2.0",
     "rc-tooltip": "~2.4.0"
   },

style/components/index.less

@@ -7,6 +7,7 @@
 @import "dialog";
 @import "confirm";
 @import "tabs";
+@import "table";
 @import "tooltip";
 @import "popover";
 @import "form";

style/components/table.less

@@ -0,0 +1,38 @@
+@import "../mixins/index";
+@tablePrefixClass: ~"@{css-prefix}table";
+@table-border-color: #e9e9e9;
+@table-head-background-color: #f3f3f3;
+
+.@{tablePrefixClass} {
+  font-size: @font-size-base;
+  color: @text-color;
+  border-radius: 6px;
+  overflow: hidden;
+
+  table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: separate;
+  }
+
+  th {
+    background: @table-head-background-color;
+    text-align: left;
+    font-weight: bold;
+  }
+
+  td {
+    border-bottom: 1px solid @table-border-color;
+  }
+
+  tr {
+    transition: all .3s ease;
+    &:hover {
+      background: tint(@primary-color, 90%);
+    }
+  }
+
+  th, td {
+    padding: 16px 8px;
+  }
+}