diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..d18969d8c
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,16 @@
+const base = require('@umijs/fabric/dist/eslint');
+
+module.exports = {
+  ...base,
+  rules: {
+    ...base.rules,
+    'react/no-array-index-key': 0,
+    'react/sort-comp': 0,
+    '@typescript-eslint/no-explicit-any': 1,
+    'react/no-find-dom-node': 1,
+    'react/require-default-props': 0,
+    'no-confusing-arrow': 0,
+    'jsx-a11y/label-has-for': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+  },
+};
diff --git a/.fatherrc.js b/.fatherrc.js
new file mode 100644
index 000000000..767a2abfe
--- /dev/null
+++ b/.fatherrc.js
@@ -0,0 +1,8 @@
+export default {
+  cjs: 'babel',
+  esm: { type: 'babel', importLibToEs: true },
+  preCommit: {
+    eslint: true,
+    prettier: true,
+  },
+};
diff --git a/.gitignore b/.gitignore
index a3b5eb63d..15278f7ab 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.storybook
 *.iml
 *.log
 .idea/
diff --git a/.travis.yml b/.travis.yml
index 1b9f79ca2..d16a491a7 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -9,7 +9,7 @@ notifications:
   - yesmeck@gmail.com
 
 node_js:
-- 8
+- 10
 
 script:
 - |
diff --git a/assets/bordered.less b/assets/bordered.less
index f3ad2e84a..239059136 100644
--- a/assets/bordered.less
+++ b/assets/bordered.less
@@ -1,11 +1,55 @@
-@tablePrefixCls: rc-table;
-@table-border-color: #e9e9e9;
-
-.@{tablePrefixCls}.bordered {
-  table {
-    border-collapse: collapse;
-  }
-  th, td {
-    border: 1px solid @table-border-color;
+.move-enter,
+.move-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-duration: 2.5s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-leave {
+  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-enter.move-enter-active,
+.move-appear.move-enter-active {
+  animation-name: moveLeftIn;
+  animation-play-state: running;
+}
+.move-leave.move-leave-active {
+  animation-name: moveRightOut;
+  animation-play-state: running;
+}
+@keyframes moveLeftIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(30px);
+    opacity: 0;
+    background: #fff6de;
+  }
+  20% {
+    transform-origin: 0 0;
+    transform: translateX(0);
+    opacity: 1;
+  }
+  80% {
+    background: #fff6de;
+  }
+  100% {
+    background: transparent;
+    opacity: 1;
+  }
+}
+@keyframes moveRightOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(-30px);
+    opacity: 0;
   }
 }
diff --git a/examples/animation.html b/examples/animation.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/animation.js b/examples/animation.js
index 93a7998f0..8ee181b5a 100644
--- a/examples/animation.js
+++ b/examples/animation.js
@@ -1,10 +1,9 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
 import Animate from 'rc-animate';
-import 'rc-table/assets/index.less';
-import 'rc-table/assets/animation.less';
+import Table from '../src';
+import '../assets/index.less';
+import '../assets/animation.less';
 
 const AnimateBody = props => <Animate transitionName="move" component="tbody" {...props} />;
 
@@ -38,26 +37,32 @@ class Demo extends React.Component {
   onDelete(key, e) {
     console.log('Delete', key);
     e.preventDefault();
-    const data = this.state.data.filter(item => item.key !== key);
-    this.setState({ data });
+    this.setState(({ data }) => ({
+      data: data.filter(item => item.key !== key),
+    }));
   }
 
   onAdd() {
-    const data = [...this.state.data];
-    data.push({
-      a: 'new data',
-      b: 'new data',
-      c: 'new data',
-      key: Date.now(),
-    });
-    this.setState({ data });
+    this.setState(({ data }) => ({
+      data: [
+        ...data,
+        {
+          a: 'new data',
+          b: 'new data',
+          c: 'new data',
+          key: Date.now(),
+        },
+      ],
+    }));
   }
 
   render() {
     return (
       <div style={{ margin: 20 }}>
         <h2>Table row with animation</h2>
-        <button onClick={() => this.onAdd()}>添加</button>
+        <button type="button" onClick={() => this.onAdd()}>
+          添加
+        </button>
         <Table
           columns={this.columns}
           data={this.state.data}
@@ -69,4 +74,6 @@ class Demo extends React.Component {
     );
   }
 }
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/childrenIndent.html b/examples/childrenIndent.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/childrenIndent.js b/examples/childrenIndent.js
index f77d388eb..99baa6a9d 100644
--- a/examples/childrenIndent.js
+++ b/examples/childrenIndent.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   {
@@ -100,7 +99,9 @@ function onExpand(expanded, record) {
   console.log('onExpand', expanded, record);
 }
 
-ReactDOM.render(
-  <Table defaultExpandAllRows columns={columns} data={data} indentSize={30} onExpand={onExpand} />,
-  document.getElementById('__react-content'),
+const Demo = () => (
+  <Table defaultExpandAllRows columns={columns} data={data} indentSize={30} onExpand={onExpand} />
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/className.html b/examples/className.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/className.js b/examples/className.js
index b67bc4ecf..5b9b4adb2 100644
--- a/examples/className.js
+++ b/examples/className.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   {
@@ -44,7 +43,7 @@ const data = [
   { a: '1333', c: 'eee', d: 2, key: '3' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>rowClassName and className</h2>
     <Table
@@ -55,6 +54,8 @@ ReactDOM.render(
       data={data}
       className="table"
     />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/colspan-rowspan.html b/examples/colspan-rowspan.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/colspan-rowspan.js b/examples/colspan-rowspan.js
index b04d65e58..60b58b9fc 100644
--- a/examples/colspan-rowspan.js
+++ b/examples/colspan-rowspan.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   {
@@ -128,10 +127,12 @@ const data = [
   { a: '资料统计完毕于xxxx年xxx月xxx日', key: '6' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>colSpan & rowSpan</h2>
     <Table columns={columns} data={data} className="table" />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/column-resize.html b/examples/column-resize.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/column-resize.js b/examples/column-resize.js
index e56bcfc68..cc6bc199a 100644
--- a/examples/column-resize.js
+++ b/examples/column-resize.js
@@ -1,10 +1,9 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
 import { Resizable } from 'react-resizable';
+import Table from '../src';
+import '../assets/index.less';
 import 'react-resizable/css/styles.css';
 
 const ResizeableTitle = props => {
@@ -84,4 +83,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default Demo;
+/* eslint-enable */
diff --git a/examples/dropdown.html b/examples/dropdown.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/dropdown.js b/examples/dropdown.js
index 7950dbda7..06a742646 100644
--- a/examples/dropdown.js
+++ b/examples/dropdown.js
@@ -1,15 +1,14 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
 import Menu, { Item, Divider } from 'rc-menu';
 import DropDown from 'rc-dropdown';
-import 'rc-table/assets/index.less';
 import 'rc-dropdown/assets/index.css';
 import 'rc-menu/assets/index.css';
+import Table from '../src';
+import '../assets/index.less';
 
 const data = [];
-for (let i = 0; i < 10; i++) {
+for (let i = 0; i < 10; i += 1) {
   data.push({
     key: i,
     a: `a${i}`,
@@ -61,6 +60,7 @@ class Demo extends React.Component {
         <Divider />
         <Item disabled>
           <button
+            type="button"
             style={{
               cursor: 'pointer',
               color: '#000',
@@ -101,10 +101,12 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(
+const Test = () => (
   <div>
     <h2>use dropdown</h2>
     <Demo />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Test;
+/* eslint-enable */
diff --git a/examples/ellipsis.html b/examples/ellipsis.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/ellipsis.js b/examples/ellipsis.js
index 2dda0fedc..9f7209c70 100644
--- a/examples/ellipsis.js
+++ b/examples/ellipsis.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'name', dataIndex: 'name', width: 100, ellipsis: true },
@@ -32,10 +31,12 @@ const data = [
   { name: 'jack nickson', descrption: 'descrption descrption', key: '4' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>Table ellipsis</h2>
     <Table columns={columns} data={data} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/expandIcon.html b/examples/expandIcon.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/expandIcon.js b/examples/expandIcon.js
index ac474c133..61f9996ae 100644
--- a/examples/expandIcon.js
+++ b/examples/expandIcon.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,react/prop-types,react/no-danger */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const data = [
   { key: 0, a: '123' },
@@ -54,10 +53,12 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(
+const Test = () => (
   <div>
     <h2>expandIcon</h2>
     <Demo />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Test;
+/* eslint-enable */
diff --git a/examples/expandedRowRender.html b/examples/expandedRowRender.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/expandedRowRender.js b/examples/expandedRowRender.js
index cdde359fc..40556c575 100644
--- a/examples/expandedRowRender.js
+++ b/examples/expandedRowRender.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const tableData = [
   { key: 0, a: '123' },
@@ -50,14 +49,22 @@ class Demo extends React.Component {
   toggleButton() {
     if (this.state.expandedRowKeys.length) {
       const closeAll = () => this.setState({ expandedRowKeys: [] });
-      return <button onClick={closeAll}>Close All</button>;
+      return (
+        <button type="button" onClick={closeAll}>
+          Close All
+        </button>
+      );
     }
     const openAll = () => this.setState({ expandedRowKeys: [0, 1, 2] });
-    return <button onClick={openAll}>Expand All</button>;
+    return (
+      <button type="button" onClick={openAll}>
+        Expand All
+      </button>
+    );
   }
 
   remove(index) {
-    const data = this.state.data;
+    const { data } = this.state;
     data.splice(index, 1);
     this.setState({ data });
   }
@@ -106,10 +113,12 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(
+const Test = () => (
   <div>
     <h2>expandedRowRender</h2>
     <Demo />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Test;
+/* eslint-enable */
diff --git a/examples/fixedColumns-auto-height.html b/examples/fixedColumns-auto-height.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/fixedColumns-auto-height.js b/examples/fixedColumns-auto-height.js
index 94fe34a35..3a67f7ee2 100644
--- a/examples/fixedColumns-auto-height.js
+++ b/examples/fixedColumns-auto-height.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
@@ -36,7 +35,7 @@ const data = [
   { a: '133', c: 'edd12221', d: 2, key: '9', title: 'hello' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ width: 800 }}>
     <h2>Fixed columns</h2>
     <Table
@@ -45,12 +44,12 @@ ReactDOM.render(
       expandIconAsCell
       scroll={{ x: 1200 }}
       data={data}
-      onRow={(record, index) => {
-        return {
-          className: `customize-class-${index}`,
-        };
-      }}
+      onRow={(record, index) => ({
+        className: `customize-class-${index}`,
+      })}
     />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/fixedColumns.html b/examples/fixedColumns.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/fixedColumns.js b/examples/fixedColumns.js
index 77eb0613c..4eb64e114 100644
--- a/examples/fixedColumns.js
+++ b/examples/fixedColumns.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
@@ -14,9 +13,11 @@ const columns = [
   {
     title: (
       <div>
-        title7<br />
+        title7
         <br />
-        <br />Hello world!
+        <br />
+        <br />
+        Hello world!
       </div>
     ),
     dataIndex: 'b',
@@ -41,7 +42,7 @@ const data = [
   { a: '133', c: 'edd12221', d: 2, key: '9' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ width: 800 }}>
     <h2>Fixed columns</h2>
     <Table
@@ -51,6 +52,8 @@ ReactDOM.render(
       scroll={{ x: 1200 }}
       data={data}
     />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/fixedColumnsAndHeader.html b/examples/fixedColumnsAndHeader.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/fixedColumnsAndHeader.js b/examples/fixedColumnsAndHeader.js
index 844084ff5..eb7fb9e3c 100644
--- a/examples/fixedColumnsAndHeader.js
+++ b/examples/fixedColumnsAndHeader.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
@@ -31,10 +30,12 @@ const data = [
   { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '9' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>Fixed columns and header</h2>
     <Table columns={columns} scroll={{ x: 1650, y: 300 }} data={data} style={{ width: 800 }} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/fixedColumnsAndHeaderSyncRowHeight.html b/examples/fixedColumnsAndHeaderSyncRowHeight.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/fixedColumnsAndHeaderSyncRowHeight.js b/examples/fixedColumnsAndHeaderSyncRowHeight.js
index aab60b9a4..54cef1eda 100644
--- a/examples/fixedColumnsAndHeaderSyncRowHeight.js
+++ b/examples/fixedColumnsAndHeaderSyncRowHeight.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
@@ -31,10 +30,12 @@ const data = [
   { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '9' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>Fixed columns and header, resize window for test</h2>
     <Table columns={columns} scroll={{ x: '150%', y: 300 }} data={data} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/fixedColumnsWhenResize.html b/examples/fixedColumnsWhenResize.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/fixedColumnsWhenResize.js b/examples/fixedColumnsWhenResize.js
index bc23f413f..23fdd95b2 100644
--- a/examples/fixedColumnsWhenResize.js
+++ b/examples/fixedColumnsWhenResize.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
@@ -14,9 +13,11 @@ const columns = [
   {
     title: (
       <div>
-        title7<br />
+        title7
         <br />
-        <br />Hello world!
+        <br />
+        <br />
+        Hello world!
       </div>
     ),
     dataIndex: 'b',
@@ -41,7 +42,7 @@ const data = [
   { a: '133', c: 'edd12221', d: 2, key: '9' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>See fixed columns when you resize window</h2>
     <Table
@@ -51,6 +52,8 @@ ReactDOM.render(
       scroll={{ x: 800 }}
       data={data}
     />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/grouping-columns.html b/examples/grouping-columns.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/grouping-columns.js b/examples/grouping-columns.js
index 48b639f84..5837d2f4a 100644
--- a/examples/grouping-columns.js
+++ b/examples/grouping-columns.js
@@ -1,9 +1,8 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
-import 'rc-table/assets/bordered.less';
+import Table from '../src';
+import '../assets/index.less';
+import '../assets/bordered.less';
 
 const columns = [
   {
@@ -93,10 +92,12 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>grouping columns</h2>
     <Table columns={columns} data={data} className="bordered" />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/hide-header.html b/examples/hide-header.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/hide-header.js b/examples/hide-header.js
index fc9de3fb4..fa905c09a 100644
--- a/examples/hide-header.js
+++ b/examples/hide-header.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
@@ -24,10 +23,12 @@ const data = [
   { a: '1333', c: 'eee', d: 2, key: '3' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>hide table head</h2>
     <Table columns={columns} showHeader={false} data={data} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/jsx.html b/examples/jsx.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/jsx.js b/examples/jsx.js
index aa79a603d..2ea5e9317 100644
--- a/examples/jsx.js
+++ b/examples/jsx.js
@@ -1,8 +1,8 @@
-/* eslint-disable no-console,func-names,react/no-multi-comp */
+/* eslint-disable
+  no-console, func-names, react/no-multi-comp, import/no-named-as-default-member */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const { ColumnGroup, Column } = Table;
 
@@ -12,7 +12,7 @@ const data = [
   { a: '1333', c: 'eee', d: 2, key: '3' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>JSX table</h2>
     <Table data={data}>
@@ -23,6 +23,8 @@ ReactDOM.render(
       <Column title="title3" dataIndex="c" key="c" width={200} />
       <Column title="Operations" dataIndex="" key="d" render={() => <a href="#">Operations</a>} />
     </Table>
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/key.html b/examples/key.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/key.js b/examples/key.js
index 8a1081d70..bad10393c 100644
--- a/examples/key.js
+++ b/examples/key.js
@@ -1,9 +1,8 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const CheckBox = ({ id }) => (
   <label>
@@ -30,10 +29,11 @@ class Demo extends React.Component {
   }
 
   remove(index) {
-    const rows = this.state.data;
-    rows.splice(index, 1);
-    this.setState({
-      data: rows,
+    this.setState(({ data }) => {
+      data.splice(index, 1);
+      return {
+        data,
+      };
     });
   }
 
@@ -41,16 +41,14 @@ class Demo extends React.Component {
     this.remove(index);
   };
 
-  renderAction = (o, row, index) => {
-    return (
-      <a href="#" onClick={this.handleClick(index)}>
-        Delete
-      </a>
-    );
-  };
+  renderAction = (o, row, index) => (
+    <a href="#" onClick={this.handleClick(index)}>
+      Delete
+    </a>
+  );
 
   render() {
-    const state = this.state;
+    const { state } = this;
     const columns = [
       { title: 'title1', dataIndex: 'a', key: 'a', width: 100, render: a => <CheckBox id={a} /> },
       { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
@@ -65,10 +63,12 @@ class Demo extends React.Component {
 
 const data = [{ a: '123' }, { a: 'cdd', b: 'edd' }, { a: '1333', c: 'eee', d: 2 }];
 
-ReactDOM.render(
+const Test = () => (
   <div>
     <h2>specify key</h2>
     <Demo data={data} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Test;
+/* eslint-enable */
diff --git a/examples/nested.html b/examples/nested.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/nested.js b/examples/nested.js
index f4bc69016..52798122e 100644
--- a/examples/nested.js
+++ b/examples/nested.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'First Name', dataIndex: 'names.first', key: 'a', width: 100 },
@@ -36,10 +35,11 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>Nested data table</h2>
     <Table columns={columns} data={data} className="table" />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
diff --git a/examples/no-data.html b/examples/no-data.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/no-data.js b/examples/no-data.js
index 7bfce02d3..695723460 100644
--- a/examples/no-data.js
+++ b/examples/no-data.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
@@ -20,10 +19,12 @@ const columns = [
 
 const data = [];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>simple table</h2>
     <Table columns={columns} data={data} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/react-dnd.html b/examples/react-dnd.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/react-dnd.js b/examples/react-dnd.js
index 167ce3dbf..8c989d3bc 100644
--- a/examples/react-dnd.js
+++ b/examples/react-dnd.js
@@ -1,14 +1,13 @@
 /* eslint-disable no-unused-expressions,new-cap */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { injectGlobal } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
 import update from 'immutability-helper';
 import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
-injectGlobal`
+createGlobalStyle`
   tr.drop-over-downward td {
     border-bottom: 2px dashed red;
   }
@@ -50,7 +49,7 @@ let BodyRow = props => {
   } = props;
   const style = { cursor: 'move' };
 
-  let className = restProps.className;
+  let { className } = restProps;
   if (isOver && initialClientOffset) {
     const direction = dragDirection(
       dragRow.index,
@@ -147,8 +146,8 @@ class Demo extends React.Component {
     const { data } = this.state;
     const dragRow = data[dragIndex];
 
-    this.setState(
-      update(this.state, {
+    this.setState(prevState =>
+      update(prevState, {
         data: {
           $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
         },
@@ -171,12 +170,16 @@ class Demo extends React.Component {
   }
 }
 
-Demo = DragDropContext(HTML5Backend)(Demo);
+console.log('>>>', DragDropContext);
 
-ReactDOM.render(
+const WrappedDemo = DragDropContext(HTML5Backend)(Demo);
+
+const Test = () => (
   <div>
     <h2>Integrate with react-dnd</h2>
-    <Demo />
-  </div>,
-  document.getElementById('__react-content'),
+    <WrappedDemo />
+  </div>
 );
+
+export default Test;
+/* eslint-enable */
diff --git a/examples/rowAndCellClick.html b/examples/rowAndCellClick.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/rowAndCellClick.js b/examples/rowAndCellClick.js
index 255ae0cee..16d15c44e 100644
--- a/examples/rowAndCellClick.js
+++ b/examples/rowAndCellClick.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const onRowClick = (record, index, event) => {
   console.log(`Click nth(${index}) row of parent, record.name: ${record.name}`);
@@ -108,7 +107,7 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <Table
     columns={columns}
     data={data}
@@ -116,6 +115,8 @@ ReactDOM.render(
       onClick: onRowClick.bind(null, record, index),
       onDoubleClick: onRowDoubleClick.bind(null, record, index),
     })}
-  />,
-  document.getElementById('__react-content'),
+  />
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/scrollX.html b/examples/scrollX.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/scrollX.js b/examples/scrollX.js
index 5792cdfcf..7ad0e6526 100644
--- a/examples/scrollX.js
+++ b/examples/scrollX.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
@@ -26,10 +25,12 @@ const data = [
   { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>Scroll X</h2>
     <Table style={{ width: 800 }} scroll={{ x: true }} columns={columns} data={data} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/scrollXY.html b/examples/scrollXY.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/scrollXY.js b/examples/scrollXY.js
index a4cbf5f6a..452392d07 100644
--- a/examples/scrollXY.js
+++ b/examples/scrollXY.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
@@ -31,7 +30,7 @@ const data = [
   { a: '133', c: 'edd12221 edd12221', d: 2, key: '9' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>Scroll X/Y</h2>
     <Table
@@ -41,6 +40,8 @@ ReactDOM.render(
       columns={columns}
       data={data}
     />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/scrollY.html b/examples/scrollY.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/scrollY.js b/examples/scrollY.js
index 60547c62a..684486bf4 100644
--- a/examples/scrollY.js
+++ b/examples/scrollY.js
@@ -1,11 +1,10 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const data = [];
-for (let i = 0; i < 10; i++) {
+for (let i = 0; i < 10; i += 1) {
   data.push({
     key: i,
     a: `a${i}`,
@@ -20,9 +19,7 @@ class Demo extends React.Component {
   };
 
   toggleBody = () => {
-    this.setState({
-      showBody: !this.state.showBody,
-    });
+    this.setState(({ showBody }) => ({ showBody: !showBody }));
   };
 
   render() {
@@ -57,10 +54,12 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(
+const Test = () => (
   <div>
     <h2>scroll body table</h2>
     <Demo />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Test;
+/* eslint-enable */
diff --git a/examples/simple.html b/examples/simple.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/simple.js b/examples/simple.js
index c62aefb20..71ae3627d 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
@@ -24,10 +23,12 @@ const data = [
   { a: '1333', c: 'eee', d: 2, key: '3' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>simple table</h2>
     <Table columns={columns} data={data} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/examples/styled-components.html b/examples/styled-components.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/styled-components.js b/examples/styled-components.js
index ab0a25ff7..38bc35313 100644
--- a/examples/styled-components.js
+++ b/examples/styled-components.js
@@ -1,8 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import styled from 'styled-components';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
@@ -36,10 +35,11 @@ const components = {
   },
 };
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>Integrate with styled-components</h2>
     <Table columns={columns} data={data} components={components} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
diff --git a/examples/subTable.html b/examples/subTable.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/subTable.js b/examples/subTable.js
index ac788e614..6242575d2 100644
--- a/examples/subTable.js
+++ b/examples/subTable.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const data = [
   {
@@ -44,13 +43,11 @@ class Demo extends React.Component {
         title: 'Operations',
         dataIndex: '',
         key: 'x',
-        render: (text, record) => {
-          return (
-            <a href="#" onClick={e => this.handleClick(record, e)}>
-              click {record.a}
-            </a>
-          );
-        },
+        render: (text, record) => (
+          <a href="#" onClick={e => this.handleClick(record, e)}>
+            click {record.a}
+          </a>
+        ),
       },
     ];
     return (
@@ -62,4 +59,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default Demo;
+/* eslint-enable */
diff --git a/examples/title-and-footer.html b/examples/title-and-footer.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/examples/title-and-footer.js b/examples/title-and-footer.js
index e48306165..69907603a 100644
--- a/examples/title-and-footer.js
+++ b/examples/title-and-footer.js
@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
@@ -24,7 +23,7 @@ const data = [
   { a: '1333', c: 'eee', d: 2, key: '3' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>title and footer</h2>
     <Table
@@ -33,6 +32,8 @@ ReactDOM.render(
       title={currentData => <div>Title: {currentData.length} items</div>}
       footer={currentData => <div>Footer: {currentData.length} items</div>}
     />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 000000000..61d043014
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
+};
\ No newline at end of file
diff --git a/now.json b/now.json
new file mode 100644
index 000000000..6c94384f5
--- /dev/null
+++ b/now.json
@@ -0,0 +1,11 @@
+{
+  "version": 2,
+  "name": "rc-table",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": { "distDir": ".doc" }
+    }
+  ]
+}
diff --git a/package.json b/package.json
index 1d794e62d..3ca305206 100644
--- a/package.json
+++ b/package.json
@@ -30,85 +30,54 @@
     "url": "http://github.com/react-component/table/issues"
   },
   "license": "MIT",
-  "config": {
-    "port": 8000,
-    "entry": {
-      "rc-table": [
-        "./assets/animation.less",
-        "./assets/bordered.less",
-        "./assets/index.less",
-        "./src/index.js"
-      ]
-    }
-  },
   "scripts": {
-    "dist": "rc-tools run dist",
-    "build": "rc-tools run build",
-    "compile": "rc-tools run compile --babel-runtime",
-    "gh-pages": "rc-tools run gh-pages",
-    "start": "rc-tools run server",
-    "pub": "rc-tools run pub --babel-runtime",
-    "lint": "rc-tools run lint",
-    "test": "jest",
-    "coverage": "jest --coverage",
-    "pre-commit": "rc-tools run pre-commit",
-    "lint-staged": "lint-staged"
+    "start": "cross-env NODE_ENV=development father doc dev --storybook",
+    "build": "father doc build --storybook",
+    "compile": "father build && lessc assets/index.less assets/index.css && lessc assets/animation.less assets/animation.css && lessc assets/bordered.less assets/bordered.css",
+    "gh-pages": "npm run build && father doc deploy",
+    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish && npm run gh-pages",
+    "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
+    "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
+    "test": "father test",
+    "coverage": "father test --coverage"
   },
-  "jest": {
-    "setupFiles": [
-      "./tests/setup.js"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*"
-    ],
-    "transform": {
-      "\\.jsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js"
-    },
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "dependencies": {
-    "babel-runtime": "6.x",
     "classnames": "^2.2.5",
     "component-classes": "^1.2.6",
     "lodash": "^4.17.5",
     "mini-store": "^2.0.0",
     "prop-types": "^15.5.8",
-    "rc-util": "^4.0.4",
+    "rc-util": "^4.13.0",
     "react-lifecycles-compat": "^3.0.2",
-    "shallowequal": "^1.0.2",
-    "warning": "^4.0.3"
+    "shallowequal": "^1.0.2"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "@umijs/fabric": "^1.1.10",
+    "cross-env": "^6.0.3",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.1",
     "enzyme-to-json": "^3.1.2",
+    "father": "^2.22.0",
     "immutability-helper": "^3.0.0",
-    "jest": "^21.2.1",
-    "lint-staged": "^9.0.0",
-    "pre-commit": "1.x",
     "prettier": "^1.11.1",
     "rc-animate": "^2.3.0",
     "rc-dropdown": "~2.0.1",
     "rc-menu": "^7.4.23",
-    "rc-tools": "^8.4.1",
     "react": "^16.0.0",
-    "react-dnd": "^9.3.4",
-    "react-dnd-html5-backend": "^9.3.4",
+    "react-dnd": "^2.5.4",
+    "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.0.0",
     "react-resizable": "^1.7.5",
     "react-test-renderer": "^16.0.0",
     "react-virtualized": "^9.12.0",
-    "styled-components": "^4.3.2"
-  },
-  "lint-staged": {
-    "*.{js,jsx,tsx}": [
-      "npm run pre-commit",
-      "git add"
-    ]
-  },
-  "pre-commit": [
-    "lint-staged"
-  ]
+    "styled-components": "^4.3.2",
+    "typescript": "^3.6.4"
+  }
 }
diff --git a/src/BaseTable.js b/src/BaseTable.tsx
similarity index 80%
rename from src/BaseTable.js
rename to src/BaseTable.tsx
index a39a486c2..2d51b4b9a 100644
--- a/src/BaseTable.js
+++ b/src/BaseTable.tsx
@@ -6,25 +6,34 @@ import ColGroup from './ColGroup';
 import TableHeader from './TableHeader';
 import TableRow from './TableRow';
 import ExpandableRow from './ExpandableRow';
+import {
+  ColumnType,
+  TableStore,
+  Expander,
+  GetRowKey,
+  RowHoverEventHandler,
+  FixedType,
+  RenderRows,
+} from './interface';
+
+export interface BaseTableProps<ValueType> {
+  fixed?: FixedType;
+  columns: ColumnType[];
+  tableClassName: string;
+  hasHead: boolean;
+  hasBody: boolean;
+  store: TableStore;
+  expander: Expander<ValueType>;
+  getRowKey?: GetRowKey<ValueType>;
+  isAnyColumnsFixed?: boolean;
+}
 
-class BaseTable extends React.Component {
-  static propTypes = {
-    fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    columns: PropTypes.array.isRequired,
-    tableClassName: PropTypes.string.isRequired,
-    hasHead: PropTypes.bool.isRequired,
-    hasBody: PropTypes.bool.isRequired,
-    store: PropTypes.object.isRequired,
-    expander: PropTypes.object.isRequired,
-    getRowKey: PropTypes.func,
-    isAnyColumnsFixed: PropTypes.bool,
-  };
-
+class BaseTable<ValueType> extends React.Component<BaseTableProps<ValueType>> {
   static contextTypes = {
     table: PropTypes.any,
   };
 
-  getColumns(cols) {
+  getColumns(cols?: ColumnType[]) {
     const { columns = [], fixed } = this.props;
     const { table } = this.context;
     const { prefixCls } = table.props;
@@ -37,13 +46,13 @@ class BaseTable extends React.Component {
     }));
   }
 
-  handleRowHover = (isHover, key) => {
+  handleRowHover: RowHoverEventHandler = (isHover, key) => {
     this.props.store.setState({
       currentHoverKey: isHover ? key : null,
     });
   };
 
-  renderRows = (renderData, indent, ancestorKeys = []) => {
+  renderRows: RenderRows<ValueType> = (renderData, indent, ancestorKeys = []) => {
     const { table } = this.context;
     const { columnManager, components } = table;
     const {
@@ -60,20 +69,20 @@ class BaseTable extends React.Component {
     } = table.props;
     const { getRowKey, fixed, expander, isAnyColumnsFixed } = this.props;
 
-    const rows = [];
+    const rows: React.ReactElement[] = [];
 
-    for (let i = 0; i < renderData.length; i++) {
+    for (let i = 0; i < renderData.length; i += 1) {
       const record = renderData[i];
       const key = getRowKey(record, i);
-      const className =
+      const className: string =
         typeof rowClassName === 'string' ? rowClassName : rowClassName(record, i, indent);
 
-      const onHoverProps = {};
+      const onHoverProps: { onHover?: RowHoverEventHandler } = {};
       if (columnManager.isAnyColumnsFixed()) {
         onHoverProps.onHover = this.handleRowHover;
       }
 
-      let leafColumns;
+      let leafColumns: ColumnType[];
       if (fixed === 'left') {
         leafColumns = columnManager.leftLeafColumns();
       } else if (fixed === 'right') {
@@ -97,9 +106,7 @@ class BaseTable extends React.Component {
           needIndentSpaced={expander.needIndentSpaced}
           onExpandedChange={expander.handleExpandChange}
         >
-          {(
-            expandableRow, // eslint-disable-line
-          ) => (
+          {(expandableRow: any) => (
             <TableRow
               fixed={fixed}
               indent={indent}
@@ -138,7 +145,7 @@ class BaseTable extends React.Component {
     const { components } = table;
     const { prefixCls, scroll, data, getBodyWrapper } = table.props;
     const { expander, tableClassName, hasHead, hasBody, fixed } = this.props;
-    const tableStyle = {};
+    const tableStyle: React.CSSProperties = {};
 
     if (!fixed && scroll.x) {
       // not set width, then use content fixed width
@@ -152,7 +159,7 @@ class BaseTable extends React.Component {
     const Table = hasBody ? components.table : 'table';
     const BodyWrapper = components.body.wrapper;
 
-    let body;
+    let body: React.ReactElement;
     if (hasBody) {
       body = <BodyWrapper className={`${prefixCls}-tbody`}>{this.renderRows(data, 0)}</BodyWrapper>;
       if (getBodyWrapper) {
diff --git a/src/BodyTable.js b/src/BodyTable.tsx
similarity index 83%
rename from src/BodyTable.js
rename to src/BodyTable.tsx
index 82f6702a0..93e9adf3d 100644
--- a/src/BodyTable.js
+++ b/src/BodyTable.tsx
@@ -2,8 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { measureScrollbar } from './utils';
 import BaseTable from './BaseTable';
+import { FixedType, ColumnType, GetRowKey, Expander } from './interface';
 
-export default function BodyTable(props, { table }) {
+export interface BodyTableProps<ValueType> {
+  fixed?: FixedType;
+  columns: ColumnType[];
+  tableClassName: string;
+  handleWheel: React.WheelEventHandler<HTMLDivElement>;
+  handleBodyScroll: React.UIEventHandler<HTMLDivElement>;
+  getRowKey: GetRowKey<ValueType>;
+  expander: Expander;
+  isAnyColumnsFixed?: boolean;
+}
+
+export default function BodyTable<ValueType>(props: BodyTableProps<ValueType>, { table }) {
   const { prefixCls, scroll } = table.props;
   const {
     columns,
@@ -18,7 +30,7 @@ export default function BodyTable(props, { table }) {
   const { saveRef } = table;
   let { useFixedHeader } = table.props;
   const bodyStyle = { ...table.props.bodyStyle };
-  const innerBodyStyle = {};
+  const innerBodyStyle: React.CSSProperties = {};
 
   if (scroll.x || fixed) {
     bodyStyle.overflowX = bodyStyle.overflowX || 'scroll';
@@ -61,7 +73,7 @@ export default function BodyTable(props, { table }) {
   );
 
   if (fixed && columns.length) {
-    let refName;
+    let refName: string;
     if (columns[0].fixed === 'left' || columns[0].fixed === true) {
       refName = 'fixedColumnsBodyLeft';
     } else if (columns[0].fixed === 'right') {
@@ -102,17 +114,6 @@ export default function BodyTable(props, { table }) {
   );
 }
 
-BodyTable.propTypes = {
-  fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  columns: PropTypes.array.isRequired,
-  tableClassName: PropTypes.string.isRequired,
-  handleWheel: PropTypes.func.isRequired,
-  handleBodyScroll: PropTypes.func.isRequired,
-  getRowKey: PropTypes.func.isRequired,
-  expander: PropTypes.object.isRequired,
-  isAnyColumnsFixed: PropTypes.bool,
-};
-
 BodyTable.contextTypes = {
   table: PropTypes.any,
 };
diff --git a/src/ColGroup.js b/src/ColGroup.tsx
similarity index 71%
rename from src/ColGroup.js
rename to src/ColGroup.tsx
index 8a5dde43d..b7445b4d1 100644
--- a/src/ColGroup.js
+++ b/src/ColGroup.tsx
@@ -1,18 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { INTERNAL_COL_DEFINE } from './utils';
+import { FixedType, ColumnType, InternalColumnType } from './interface';
 
-export default function ColGroup(props, { table }) {
+export interface ColGroupProps {
+  fixed: FixedType;
+  /** FIXME: Not used. Should confirm why this prop here */
+  columns?: ColumnType[];
+}
+
+const ColGroup: React.FC<ColGroupProps> = (props, { table }) => {
   const { prefixCls, expandIconAsCell } = table.props;
   const { fixed } = props;
 
-  let cols = [];
+  let cols: React.ReactElement[] = [];
 
   if (expandIconAsCell && fixed !== 'right') {
     cols.push(<col className={`${prefixCls}-expand-icon-col`} key="rc-table-expand-icon-col" />);
   }
 
-  let leafColumns;
+  let leafColumns: InternalColumnType[];
 
   if (fixed === 'left') {
     leafColumns = table.columnManager.leftLeafColumns();
@@ -29,12 +36,10 @@ export default function ColGroup(props, { table }) {
   );
 
   return <colgroup>{cols}</colgroup>;
-}
-
-ColGroup.propTypes = {
-  fixed: PropTypes.string,
 };
 
 ColGroup.contextTypes = {
   table: PropTypes.any,
 };
+
+export default ColGroup;
diff --git a/src/Column.js b/src/Column.js
deleted file mode 100644
index cd66a7133..000000000
--- a/src/Column.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-
-function Column() {}
-
-Column.propTypes = {
-  className: PropTypes.string,
-  colSpan: PropTypes.number,
-  title: PropTypes.node,
-  dataIndex: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  fixed: PropTypes.oneOf([true, 'left', 'right']),
-  render: PropTypes.func,
-  onCellClick: PropTypes.func,
-  onCell: PropTypes.func,
-  onHeaderCell: PropTypes.func,
-};
-
-export default Column;
diff --git a/src/Column.tsx b/src/Column.tsx
new file mode 100644
index 000000000..69ccb916a
--- /dev/null
+++ b/src/Column.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { ColumnType } from './interface';
+
+export type ColumnProps = ColumnType;
+
+const Column: React.FC<ColumnProps> = () => null;
+
+export default Column;
diff --git a/src/ColumnGroup.js b/src/ColumnGroup.js
deleted file mode 100644
index 15954bd15..000000000
--- a/src/ColumnGroup.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-
-export default class ColumnGroup extends Component {
-  static isTableColumnGroup = true;
-  static propTypes = {
-    title: PropTypes.node,
-  };
-}
diff --git a/src/ColumnGroup.tsx b/src/ColumnGroup.tsx
new file mode 100644
index 000000000..56cb0649b
--- /dev/null
+++ b/src/ColumnGroup.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface ColumnGroupProps {
+  title?: React.ReactNode;
+}
+
+export default class ColumnGroup extends React.Component<ColumnGroupProps> {
+  static isTableColumnGroup = true;
+}
diff --git a/src/ColumnManager.js b/src/ColumnManager.tsx
similarity index 64%
rename from src/ColumnManager.js
rename to src/ColumnManager.tsx
index 45a849f17..54bff2750 100644
--- a/src/ColumnManager.js
+++ b/src/ColumnManager.tsx
@@ -1,42 +1,43 @@
+/* eslint-disable no-underscore-dangle */
 import React from 'react';
+import { ColumnType, Cell } from './interface';
+import ColumnGroup from './ColumnGroup';
 
 export default class ColumnManager {
   _cached = {};
 
-  constructor(columns, elements) {
+  columns: ColumnType[];
+
+  constructor(columns: ColumnType[], elements: React.ReactNode) {
     this.columns = columns || this.normalize(elements);
   }
 
   isAnyColumnsFixed() {
-    return this._cache('isAnyColumnsFixed', () => {
-      return this.columns.some(column => !!column.fixed);
-    });
+    return this._cache('isAnyColumnsFixed', () => this.columns.some(column => !!column.fixed));
   }
 
   isAnyColumnsLeftFixed() {
-    return this._cache('isAnyColumnsLeftFixed', () => {
-      return this.columns.some(column => column.fixed === 'left' || column.fixed === true);
-    });
+    return this._cache('isAnyColumnsLeftFixed', () =>
+      this.columns.some(column => column.fixed === 'left' || column.fixed === true),
+    );
   }
 
   isAnyColumnsRightFixed() {
-    return this._cache('isAnyColumnsRightFixed', () => {
-      return this.columns.some(column => column.fixed === 'right');
-    });
+    return this._cache('isAnyColumnsRightFixed', () =>
+      this.columns.some(column => column.fixed === 'right'),
+    );
   }
 
   leftColumns() {
-    return this._cache('leftColumns', () => {
-      return this.groupedColumns().filter(
-        column => column.fixed === 'left' || column.fixed === true,
-      );
-    });
+    return this._cache('leftColumns', () =>
+      this.groupedColumns().filter(column => column.fixed === 'left' || column.fixed === true),
+    );
   }
 
   rightColumns() {
-    return this._cache('rightColumns', () => {
-      return this.groupedColumns().filter(column => column.fixed === 'right');
-    });
+    return this._cache('rightColumns', () =>
+      this.groupedColumns().filter(column => column.fixed === 'right'),
+    );
   }
 
   leafColumns() {
@@ -52,9 +53,15 @@ export default class ColumnManager {
   }
 
   // add appropriate rowspan and colspan to column
-  groupedColumns() {
+  groupedColumns(): ColumnType[] {
     return this._cache('groupedColumns', () => {
-      const _groupColumns = (columns, currentRow = 0, parentColumn = {}, rows = []) => {
+      const _groupColumns = (
+        columns: ColumnType[],
+        currentRow = 0,
+        parentColumn: ColumnType = {},
+        rows: Cell[][] = [],
+      ) => {
+        /* eslint-disable no-param-reassign */
         // track how many rows we got
         rows[currentRow] = rows[currentRow] || [];
         const grouped = [];
@@ -77,10 +84,10 @@ export default class ColumnManager {
             newColumn.children = _groupColumns(newColumn.children, currentRow + 1, newColumn, rows);
             parentColumn.colSpan += newColumn.colSpan;
           } else {
-            parentColumn.colSpan++;
+            parentColumn.colSpan += 1;
           }
           // update rowspan to all same row columns
-          for (let i = 0; i < rows[currentRow].length - 1; ++i) {
+          for (let i = 0; i < rows[currentRow].length - 1; i += 1) {
             setRowSpan(rows[currentRow][i]);
           }
           // last column, update rowspan immediately
@@ -90,22 +97,23 @@ export default class ColumnManager {
           grouped.push(newColumn);
         });
         return grouped;
+        /* eslint-enable no-param-reassign */
       };
       return _groupColumns(this.columns);
     });
   }
 
-  normalize(elements) {
+  normalize(elements: React.ReactNode) {
     const columns = [];
     React.Children.forEach(elements, element => {
       if (!React.isValidElement(element)) {
         return;
       }
-      const column = { ...element.props };
+      const column: ColumnType = { ...element.props };
       if (element.key) {
         column.key = element.key;
       }
-      if (element.type.isTableColumnGroup) {
+      if ((element.type as typeof ColumnGroup).isTableColumnGroup) {
         column.children = this.normalize(column.children);
       }
       columns.push(column);
@@ -113,12 +121,12 @@ export default class ColumnManager {
     return columns;
   }
 
-  reset(columns, elements) {
+  reset(columns: ColumnType[], elements?: React.ReactNode) {
     this.columns = columns || this.normalize(elements);
     this._cached = {};
   }
 
-  _cache(name, fn) {
+  _cache(name: string, fn: Function) {
     if (name in this._cached) {
       return this._cached[name];
     }
@@ -126,7 +134,7 @@ export default class ColumnManager {
     return this._cached[name];
   }
 
-  _leafColumns(columns) {
+  _leafColumns(columns: ColumnType[]) {
     const leafColumns = [];
     columns.forEach(column => {
       if (!column.children) {
@@ -138,3 +146,4 @@ export default class ColumnManager {
     return leafColumns;
   }
 }
+/* eslint-enable */
diff --git a/src/ExpandIcon.js b/src/ExpandIcon.tsx
similarity index 56%
rename from src/ExpandIcon.js
rename to src/ExpandIcon.tsx
index 589cde95a..3ec9beaae 100644
--- a/src/ExpandIcon.js
+++ b/src/ExpandIcon.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import shallowequal from 'shallowequal';
+import { IconExpandEventHandler } from './interface';
 
-export default class ExpandIcon extends React.Component {
-  static propTypes = {
-    record: PropTypes.object,
-    prefixCls: PropTypes.string,
-    expandable: PropTypes.any,
-    expanded: PropTypes.bool,
-    needIndentSpaced: PropTypes.bool,
-    onExpand: PropTypes.func,
-  };
+export interface ExpandIconProps<ValueType> {
+  record?: ValueType;
+  prefixCls?: string;
+  expandable?: boolean;
+  expanded?: boolean;
+  needIndentSpaced?: boolean;
+  onExpand?: IconExpandEventHandler<ValueType>;
+}
 
-  shouldComponentUpdate(nextProps) {
+export default class ExpandIcon<ValueType> extends React.Component<ExpandIconProps<ValueType>> {
+  shouldComponentUpdate(nextProps: ExpandIconProps<ValueType>) {
     return !shallowequal(nextProps, this.props);
   }
 
@@ -26,9 +26,12 @@ export default class ExpandIcon extends React.Component {
           onClick={e => onExpand(record, e)}
         />
       );
-    } else if (needIndentSpaced) {
+    }
+
+    if (needIndentSpaced) {
       return <span className={`${prefixCls}-expand-icon ${prefixCls}-spaced`} />;
     }
+
     return null;
   }
 }
diff --git a/src/ExpandableRow.js b/src/ExpandableRow.tsx
similarity index 64%
rename from src/ExpandableRow.js
rename to src/ExpandableRow.tsx
index ec2cc9891..a2e0aac43 100644
--- a/src/ExpandableRow.js
+++ b/src/ExpandableRow.tsx
@@ -1,34 +1,60 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'mini-store';
 import ExpandIcon from './ExpandIcon';
+import {
+  Key,
+  FixedType,
+  ExpandedRowRender,
+  IconExpandEventHandler,
+  RenderExpandIcon,
+  LegacyFunction,
+} from './interface';
+
+export interface ExpandableRowProps<ValueType> {
+  prefixCls: string;
+  rowKey: Key;
+  fixed?: FixedType;
+  record: ValueType;
+  indentSize?: number;
+  needIndentSpaced: boolean;
+  expandRowByClick?: boolean;
+  expanded: boolean;
+  expandIconAsCell?: boolean;
+  expandIconColumnIndex?: number;
+  childrenColumnName?: string;
+  expandedRowRender?: ExpandedRowRender<ValueType>;
+  expandIcon?: RenderExpandIcon<ValueType>;
+  onExpandedChange: (
+    expanded: boolean,
+    record: ValueType,
+    event: React.MouseEvent<HTMLElement>,
+    rowKey: Key,
+    destroy?: boolean,
+  ) => void;
+  onRowClick?: LegacyFunction<ValueType>;
+  children: (info: {
+    indentSize: number;
+    expanded: boolean;
+    onRowClick: LegacyFunction<ValueType>;
+    hasExpandIcon: (index: number) => boolean;
+    renderExpandIcon: () => React.ReactNode;
+    renderExpandIconCell: (cells: React.ReactElement[]) => void;
+  }) => React.ReactNode;
+}
 
-class ExpandableRow extends React.Component {
-  static propTypes = {
-    prefixCls: PropTypes.string.isRequired,
-    rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    record: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
-    indentSize: PropTypes.number,
-    needIndentSpaced: PropTypes.bool.isRequired,
-    expandRowByClick: PropTypes.bool,
-    expanded: PropTypes.bool.isRequired,
-    expandIconAsCell: PropTypes.bool,
-    expandIconColumnIndex: PropTypes.number,
-    childrenColumnName: PropTypes.string,
-    expandedRowRender: PropTypes.func,
-    expandIcon: PropTypes.func,
-    onExpandedChange: PropTypes.func.isRequired,
-    onRowClick: PropTypes.func,
-    children: PropTypes.func.isRequired,
-  };
+class ExpandableRow<ValueType> extends React.Component<ExpandableRowProps<ValueType>> {
+  expandIconAsCell: boolean;
+
+  expandIconColumnIndex: number;
+
+  expandable: boolean;
 
   componentWillUnmount() {
     this.handleDestroy();
   }
 
   // Show icon within first column
-  hasExpandIcon = columnIndex => {
+  hasExpandIcon = (columnIndex: number) => {
     const { expandRowByClick, expandIcon } = this.props;
 
     if (this.expandIconAsCell || columnIndex !== this.expandIconColumnIndex) {
@@ -38,7 +64,7 @@ class ExpandableRow extends React.Component {
     return !!expandIcon || !expandRowByClick;
   };
 
-  handleExpandChange = (record, event) => {
+  handleExpandChange: IconExpandEventHandler<ValueType> = (record, event) => {
     const { onExpandedChange, expanded, rowKey } = this.props;
     if (this.expandable) {
       onExpandedChange(!expanded, record, event, rowKey);
@@ -118,7 +144,8 @@ class ExpandableRow extends React.Component {
 
     const expandableRowProps = {
       indentSize,
-      expanded, // not used in TableRow, but it's required to re-render TableRow when `expanded` changes
+      // not used in TableRow, but it's required to re-render TableRow when `expanded` changes
+      expanded,
       onRowClick: this.handleRowClick,
       hasExpandIcon: this.hasExpandIcon,
       renderExpandIcon: this.renderExpandIcon,
@@ -130,5 +157,5 @@ class ExpandableRow extends React.Component {
 }
 
 export default connect(({ expandedRowKeys }, { rowKey }) => ({
-  expanded: !!~expandedRowKeys.indexOf(rowKey),
+  expanded: expandedRowKeys.includes(rowKey),
 }))(ExpandableRow);
diff --git a/src/ExpandableTable.js b/src/ExpandableTable.tsx
similarity index 65%
rename from src/ExpandableTable.js
rename to src/ExpandableTable.tsx
index fcaa4d48b..1e8a8afad 100644
--- a/src/ExpandableTable.js
+++ b/src/ExpandableTable.tsx
@@ -1,33 +1,72 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'mini-store';
 import { polyfill } from 'react-lifecycles-compat';
 import shallowEqual from 'shallowequal';
 import TableRow from './TableRow';
 import { remove } from './utils';
+import {
+  Key,
+  RenderExpandIcon,
+  TableStore,
+  Cell,
+  FixedType,
+  GetRowKey,
+  RenderRows,
+  ExpandedRowRender,
+} from './interface';
+import ColumnManager from './ColumnManager';
 
-class ExpandableTable extends React.Component {
-  static propTypes = {
-    expandIconAsCell: PropTypes.bool,
-    expandedRowKeys: PropTypes.array,
-    expandedRowClassName: PropTypes.func,
-    defaultExpandAllRows: PropTypes.bool,
-    defaultExpandedRowKeys: PropTypes.array,
-    expandIconColumnIndex: PropTypes.number,
-    expandedRowRender: PropTypes.func,
-    expandIcon: PropTypes.func,
-    childrenColumnName: PropTypes.string,
-    indentSize: PropTypes.number,
-    onExpand: PropTypes.func,
-    onExpandedRowsChange: PropTypes.func,
-    columnManager: PropTypes.object.isRequired,
-    store: PropTypes.object.isRequired,
-    prefixCls: PropTypes.string.isRequired,
-    data: PropTypes.array,
-    children: PropTypes.func.isRequired,
-    getRowKey: PropTypes.func.isRequired,
-  };
+export type RenderTableRows<ValueType> = (
+  renderRows: RenderRows<ValueType>,
+  rows: React.ReactElement[],
+  record: ValueType,
+  index: number,
+  indent: number,
+  fixed: FixedType,
+  parentKey: Key,
+  ancestorKeys: Key[],
+) => void;
+
+export type ExpandChangeEventHandler<ValueType> = (
+  expanded: boolean,
+  record: ValueType,
+  event: React.MouseEvent<HTMLElement>,
+  rowKey: Key,
+  destroy: boolean,
+) => void;
+
+export type RenderExpandIndentCell = (rows: Cell[][], fixed: FixedType) => void;
 
+export type ExpandEventHandler<ValueType> = (expanded: boolean, record: ValueType) => void;
+
+export interface ExpandableTableProps<ValueType> {
+  expandIconAsCell?: boolean;
+  expandedRowKeys?: Key[];
+  expandedRowClassName?: (record: ValueType, index: number, indent: number) => string;
+  defaultExpandAllRows?: boolean;
+  defaultExpandedRowKeys?: Key[];
+  expandIconColumnIndex?: number;
+  expandedRowRender?: ExpandedRowRender<ValueType>;
+  expandIcon?: RenderExpandIcon<ValueType>;
+  childrenColumnName?: string;
+  indentSize?: number;
+  onExpand?: ExpandEventHandler<ValueType>;
+  onExpandedRowsChange?: (expandedKeys: Key[]) => void;
+  columnManager: ColumnManager;
+  store: TableStore;
+  prefixCls: string;
+  data?: ValueType[];
+  children: (info: {
+    props: ExpandableTableProps<ValueType>;
+    needIndentSpaced: boolean;
+    renderRows: RenderTableRows<ValueType>;
+    handleExpandChange: ExpandChangeEventHandler<ValueType>;
+    renderExpandIndentCell: RenderExpandIndentCell;
+  }) => React.ReactNode;
+  getRowKey: GetRowKey<ValueType>;
+}
+
+class ExpandableTable<ValueType> extends React.Component<ExpandableTableProps<ValueType>> {
   static defaultProps = {
     expandIconAsCell: false,
     expandedRowClassName: () => '',
@@ -40,7 +79,7 @@ class ExpandableTable extends React.Component {
     onExpandedRowsChange() {},
   };
 
-  constructor(props) {
+  constructor(props: ExpandableTableProps<ValueType>) {
     super(props);
 
     const {
@@ -56,7 +95,7 @@ class ExpandableTable extends React.Component {
     let rows = [...data];
 
     if (defaultExpandAllRows) {
-      for (let i = 0; i < rows.length; i++) {
+      for (let i = 0; i < rows.length; i += 1) {
         const row = rows[i];
         finalExpandedRowKeys.push(getRowKey(row, i));
         rows = rows.concat(row[childrenColumnName] || []);
@@ -74,6 +113,12 @@ class ExpandableTable extends React.Component {
     });
   }
 
+  columnManager: ColumnManager;
+
+  store: TableStore;
+
+  latestExpandedRows: Key[];
+
   componentDidMount() {
     this.handleUpdated();
   }
@@ -88,11 +133,20 @@ class ExpandableTable extends React.Component {
   }
 
   handleUpdated() {
-    // We should record latest expanded rows to avoid multiple rows remove cause `onExpandedRowsChange` trigger many times
+    /**
+     * We should record latest expanded rows to avoid
+     * multiple rows remove cause `onExpandedRowsChange` trigger many times
+     */
     this.latestExpandedRows = null;
   }
 
-  handleExpandChange = (expanded, record, event, rowKey, destroy = false) => {
+  handleExpandChange: ExpandChangeEventHandler<ValueType> = (
+    expanded,
+    record,
+    event,
+    rowKey,
+    destroy = false,
+  ) => {
     if (event) {
       event.stopPropagation();
     }
@@ -125,7 +179,7 @@ class ExpandableTable extends React.Component {
     }
   };
 
-  renderExpandIndentCell = (rows, fixed) => {
+  renderExpandIndentCell = (rows: Cell[][], fixed: FixedType) => {
     const { prefixCls, expandIconAsCell } = this.props;
     if (!expandIconAsCell || fixed === 'right' || !rows.length) {
       return;
@@ -141,7 +195,15 @@ class ExpandableTable extends React.Component {
     rows[0].unshift({ ...iconColumn, column: iconColumn });
   };
 
-  renderExpandedRow(record, index, render, className, ancestorKeys, indent, fixed) {
+  renderExpandedRow(
+    record: ValueType,
+    index: number,
+    render: ExpandedRowRender<ValueType>,
+    className: string,
+    ancestorKeys: Key[],
+    indent: number,
+    fixed: FixedType,
+  ) {
     const { prefixCls, expandIconAsCell, indentSize } = this.props;
     const parentKey = ancestorKeys[ancestorKeys.length - 1];
     const rowKey = `${parentKey}-extra-row`;
@@ -151,7 +213,7 @@ class ExpandableTable extends React.Component {
         cell: 'td',
       },
     };
-    let colCount;
+    let colCount: number;
     if (fixed === 'left') {
       colCount = this.columnManager.leftLeafColumns().length;
     } else if (fixed === 'right') {
@@ -164,7 +226,7 @@ class ExpandableTable extends React.Component {
         key: 'extra-row',
         render: () => {
           const { expandedRowKeys } = this.store.getState();
-          const expanded = !!~expandedRowKeys.indexOf(parentKey);
+          const expanded = expandedRowKeys.includes(parentKey);
           return {
             props: {
               colSpan: colCount,
@@ -198,7 +260,16 @@ class ExpandableTable extends React.Component {
     );
   }
 
-  renderRows = (renderRows, rows, record, index, indent, fixed, parentKey, ancestorKeys) => {
+  renderRows: RenderTableRows<ValueType> = (
+    renderRows,
+    rows,
+    record,
+    index,
+    indent,
+    fixed,
+    parentKey,
+    ancestorKeys,
+  ) => {
     const { expandedRowClassName, expandedRowRender, childrenColumnName } = this.props;
     const childrenData = record[childrenColumnName];
     const nextAncestorKeys = [...ancestorKeys, parentKey];
diff --git a/src/HeadTable.js b/src/HeadTable.tsx
similarity index 78%
rename from src/HeadTable.js
rename to src/HeadTable.tsx
index d3e9b370d..9754e4b75 100644
--- a/src/HeadTable.js
+++ b/src/HeadTable.tsx
@@ -3,13 +3,22 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { measureScrollbar } from './utils';
 import BaseTable from './BaseTable';
+import { ColumnType, FixedType, Expander } from './interface';
 
-export default function HeadTable(props, { table }) {
+export interface HeadTableProps {
+  columns: ColumnType[];
+  fixed?: FixedType;
+  tableClassName: string;
+  handleBodyScrollLeft: React.UIEventHandler<HTMLDivElement>;
+  expander: Expander;
+}
+
+export default function HeadTable(props: HeadTableProps, { table }) {
   const { prefixCls, scroll, showHeader } = table.props;
   const { columns, fixed, tableClassName, handleBodyScrollLeft, expander } = props;
   const { saveRef } = table;
   let { useFixedHeader } = table.props;
-  const headStyle = {};
+  const headStyle: React.CSSProperties = {};
   const scrollbarWidth = measureScrollbar({ direction: 'vertical' });
 
   if (scroll.y) {
@@ -22,7 +31,7 @@ export default function HeadTable(props, { table }) {
       headStyle.paddingBottom = '0px';
       // https://github.com/ant-design/ant-design/issues/17051
       headStyle.overflowX = 'scroll';
-      headStyle.overflowY = `${scrollbarWidth === 0 ? 'hidden' : 'scroll'}`;
+      headStyle.overflowY = scrollbarWidth === 0 ? 'hidden' : 'scroll';
     }
   }
 
@@ -52,14 +61,6 @@ export default function HeadTable(props, { table }) {
   );
 }
 
-HeadTable.propTypes = {
-  fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  columns: PropTypes.array.isRequired,
-  tableClassName: PropTypes.string.isRequired,
-  handleBodyScrollLeft: PropTypes.func.isRequired,
-  expander: PropTypes.object.isRequired,
-};
-
 HeadTable.contextTypes = {
   table: PropTypes.any,
 };
diff --git a/src/Table.js b/src/Table.tsx
similarity index 79%
rename from src/Table.js
rename to src/Table.tsx
index b1cb8aa64..77bebe044 100644
--- a/src/Table.js
+++ b/src/Table.tsx
@@ -2,64 +2,78 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import shallowequal from 'shallowequal';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import warning from 'rc-util/lib/warning';
 import { Provider, create } from 'mini-store';
 import merge from 'lodash/merge';
 import classes from 'component-classes';
 import classNames from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
-import { debounce, warningOnce, getDataAndAriaProps } from './utils';
+import { debounce, getDataAndAriaProps } from './utils';
 import ColumnManager from './ColumnManager';
 import HeadTable from './HeadTable';
 import BodyTable from './BodyTable';
-import ExpandableTable from './ExpandableTable';
-
-class Table extends React.Component {
-  static propTypes = {
-    data: PropTypes.array,
-    useFixedHeader: PropTypes.bool,
-    columns: PropTypes.array,
-    prefixCls: PropTypes.string,
-    bodyStyle: PropTypes.object,
-    style: PropTypes.object,
-    rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    onRow: PropTypes.func,
-    onHeaderRow: PropTypes.func,
-    onRowClick: PropTypes.func,
-    onRowDoubleClick: PropTypes.func,
-    onRowContextMenu: PropTypes.func,
-    onRowMouseEnter: PropTypes.func,
-    onRowMouseLeave: PropTypes.func,
-    showHeader: PropTypes.bool,
-    title: PropTypes.func,
-    id: PropTypes.string,
-    footer: PropTypes.func,
-    emptyText: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    scroll: PropTypes.object,
-    rowRef: PropTypes.func,
-    getBodyWrapper: PropTypes.func,
-    children: PropTypes.node,
-    components: PropTypes.shape({
-      table: PropTypes.any,
-      header: PropTypes.shape({
-        wrapper: PropTypes.any,
-        row: PropTypes.any,
-        cell: PropTypes.any,
-      }),
-      body: PropTypes.shape({
-        wrapper: PropTypes.any,
-        row: PropTypes.any,
-        cell: PropTypes.any,
-      }),
-    }),
-    ...ExpandableTable.PropTypes,
-  };
+import Column from './Column';
+import ColumnGroup from './ColumnGroup';
+import ExpandableTable, { ExpandableTableProps } from './ExpandableTable';
+import {
+  ColumnType,
+  GetRowKey,
+  GetComponentProps,
+  LegacyFunction,
+  TableComponents,
+  TableStore,
+  DefaultValueType,
+  ScrollPosition,
+  Expander,
+  Key,
+} from './interface';
+
+export interface TableProps<ValueType>
+  extends Omit<ExpandableTableProps<ValueType>, 'prefixCls' | 'children'> {
+  data?: ValueType[];
+  useFixedHeader?: boolean;
+  columns?: ColumnType[];
+  prefixCls?: string;
+  bodyStyle?: React.CSSProperties;
+  className?: string;
+  style?: React.CSSProperties;
+  rowKey?: string | GetRowKey<ValueType>;
+  rowClassName?: string | ((record: ValueType, index: number, indent: number) => string);
+  onRow?: GetComponentProps<ValueType>;
+  onHeaderRow?: GetComponentProps<ColumnType[]>;
+  onRowClick?: LegacyFunction<ValueType>;
+  onRowDoubleClick?: LegacyFunction<ValueType>;
+  onRowContextMenu?: LegacyFunction<ValueType>;
+  onRowMouseEnter?: LegacyFunction<ValueType>;
+  onRowMouseLeave?: LegacyFunction<ValueType>;
+  showHeader?: boolean;
+  title?: (data: ValueType[]) => React.ReactNode;
+  id?: string;
+  footer?: (data: ValueType[]) => React.ReactNode;
+  emptyText?: React.ReactNode | (() => React.ReactNode);
+  scroll?: { x?: number | true | string; y?: number };
+  rowRef?: (record: ValueType, index: number, indent: number) => React.Ref<React.ReactElement>;
+  getBodyWrapper?: (body: React.ReactElement) => React.ReactElement;
+  children?: React.ReactNode;
+  components?: TableComponents;
+  tableLayout?: 'fixed';
+}
 
+interface TableState {
+  columns?: ColumnType[];
+  children?: React.ReactNode;
+}
+
+class Table<ValueType> extends React.Component<TableProps<ValueType>, TableState> {
   static childContextTypes = {
     table: PropTypes.any,
     components: PropTypes.any,
   };
 
+  static Column = Column;
+
+  static ColumnGroup = ColumnGroup;
+
   static defaultProps = {
     data: [],
     useFixedHeader: false,
@@ -76,7 +90,7 @@ class Table extends React.Component {
     emptyText: () => 'No Data',
   };
 
-  constructor(props) {
+  constructor(props: TableProps<ValueType>) {
     super(props);
 
     [
@@ -86,10 +100,10 @@ class Table extends React.Component {
       'onRowMouseEnter',
       'onRowMouseLeave',
     ].forEach(name => {
-      warningOnce(props[name] === undefined, `${name} is deprecated, please use onRow instead.`);
+      warning(props[name] === undefined, `${name} is deprecated, please use onRow instead.`);
     });
 
-    warningOnce(
+    warning(
       props.getBodyWrapper === undefined,
       'getBodyWrapper is deprecated, please use custom components instead.',
     );
@@ -107,7 +121,37 @@ class Table extends React.Component {
     this.debouncedWindowResize = debounce(this.handleWindowResize, 150);
   }
 
-  state = {};
+  state: TableState = {};
+
+  columnManager: ColumnManager;
+
+  store: TableStore;
+
+  debouncedWindowResize: Function & {
+    cancel: Function;
+  };
+
+  resizeEvent: {
+    remove: Function;
+  };
+
+  headTable: HTMLDivElement;
+
+  bodyTable: HTMLDivElement;
+
+  tableNode: HTMLDivElement;
+
+  scrollPosition: ScrollPosition;
+
+  lastScrollLeft: number;
+
+  lastScrollTop: number;
+
+  fixedColumnsBodyLeft: HTMLDivElement;
+
+  fixedColumnsBodyRight: HTMLDivElement;
+
+  expander: Expander;
 
   getChildContext() {
     return {
@@ -135,18 +179,21 @@ class Table extends React.Component {
     };
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  static getDerivedStateFromProps(nextProps: TableProps<DefaultValueType>, prevState: TableState) {
     if (nextProps.columns && nextProps.columns !== prevState.columns) {
       return {
         columns: nextProps.columns,
         children: null,
       };
-    } else if (nextProps.children !== prevState.children) {
+    }
+
+    if (nextProps.children !== prevState.children) {
       return {
         columns: null,
         children: nextProps.children,
       };
     }
+
     return null;
   }
 
@@ -187,10 +234,10 @@ class Table extends React.Component {
     }
   }
 
-  getRowKey = (record, index) => {
-    const rowKey = this.props.rowKey;
+  getRowKey = (record: ValueType, index: number) => {
+    const { rowKey } = this.props;
     const key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
-    warningOnce(
+    warning(
       key !== undefined,
       'Each record in table should have a unique `key` prop,' +
         'or set `rowKey` to an unique primary key.',
@@ -198,7 +245,7 @@ class Table extends React.Component {
     return key === undefined ? index : key;
   };
 
-  setScrollPosition(position) {
+  setScrollPosition(position: ScrollPosition) {
     this.scrollPosition = position;
     if (this.tableNode) {
       const { prefixCls } = this.props;
@@ -267,12 +314,12 @@ class Table extends React.Component {
     const bodyRows = this.bodyTable.querySelectorAll(`.${prefixCls}-row`) || [];
     const fixedColumnsHeadRowsHeight = [].map.call(
       headRows,
-      row => row.getBoundingClientRect().height || 'auto',
+      (row: HTMLElement) => row.getBoundingClientRect().height || 'auto',
     );
     const state = this.store.getState();
     const fixedColumnsBodyRowsHeight = [].reduce.call(
       bodyRows,
-      (acc, row) => {
+      (acc: Record<string, number | 'auto'>, row: HTMLElement) => {
         const rowKey = row.getAttribute('data-row-key');
         const height =
           row.getBoundingClientRect().height || state.fixedColumnsBodyRowsHeight[rowKey] || 'auto';
@@ -308,12 +355,12 @@ class Table extends React.Component {
     return 'x' in scroll;
   }
 
-  handleBodyScrollLeft = e => {
+  handleBodyScrollLeft: React.UIEventHandler<HTMLDivElement> = e => {
     // Fix https://github.com/ant-design/ant-design/issues/7635
     if (e.currentTarget !== e.target) {
       return;
     }
-    const target = e.target;
+    const target = e.target as HTMLDivElement;
     const { scroll = {} } = this.props;
     const { headTable, bodyTable } = this;
     if (target.scrollLeft !== this.lastScrollLeft && scroll.x) {
@@ -328,8 +375,8 @@ class Table extends React.Component {
     this.lastScrollLeft = target.scrollLeft;
   };
 
-  handleBodyScrollTop = e => {
-    const target = e.target;
+  handleBodyScrollTop: React.UIEventHandler<HTMLDivElement> = e => {
+    const target = e.target as HTMLDivElement;
     // Fix https://github.com/ant-design/ant-design/issues/9033
     if (e.currentTarget !== target) {
       return;
@@ -337,7 +384,7 @@ class Table extends React.Component {
     const { scroll = {} } = this.props;
     const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this;
     if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== headTable) {
-      const scrollTop = target.scrollTop;
+      const { scrollTop } = target;
       if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) {
         fixedColumnsBodyLeft.scrollTop = scrollTop;
       }
@@ -352,17 +399,17 @@ class Table extends React.Component {
     this.lastScrollTop = target.scrollTop;
   };
 
-  handleBodyScroll = e => {
+  handleBodyScroll: React.UIEventHandler<HTMLDivElement> = e => {
     this.handleBodyScrollLeft(e);
     this.handleBodyScrollTop(e);
   };
 
-  handleWheel = event => {
+  handleWheel: React.WheelEventHandler<HTMLDivElement> = event => {
     const { scroll = {} } = this.props;
     if (window.navigator.userAgent.match(/Trident\/7\./) && scroll.y) {
       event.preventDefault();
       const wd = event.deltaY;
-      const target = event.target;
+      const { target } = event;
       const { bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this;
       let scrollTop = 0;
 
@@ -384,7 +431,7 @@ class Table extends React.Component {
     }
   };
 
-  saveRef = name => node => {
+  saveRef = (name: string) => (node: HTMLElement) => {
     this[name] = node;
   };
 
@@ -496,8 +543,8 @@ class Table extends React.Component {
   }
 
   render() {
-    const props = this.props;
-    const prefixCls = props.prefixCls;
+    const { props } = this;
+    const { prefixCls } = props;
 
     if (this.state.columns) {
       this.columnManager.reset(props.columns);
@@ -520,7 +567,7 @@ class Table extends React.Component {
     return (
       <Provider store={this.store}>
         <ExpandableTable {...props} columnManager={this.columnManager} getRowKey={this.getRowKey}>
-          {expander => {
+          {(expander: Expander) => {
             this.expander = expander;
             return (
               <div
diff --git a/src/TableCell.js b/src/TableCell.tsx
similarity index 74%
rename from src/TableCell.js
rename to src/TableCell.tsx
index 509b5725b..58782aa91 100644
--- a/src/TableCell.js
+++ b/src/TableCell.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import get from 'lodash/get';
+import { ColumnType, CustomizeComponent, Cell, RenderedCell } from './interface';
 
-function isInvalidRenderCellText(text) {
+function isInvalidRenderCellText(text: any): text is RenderedCell {
   return (
     text &&
     !React.isValidElement(text) &&
@@ -11,19 +11,19 @@ function isInvalidRenderCellText(text) {
   );
 }
 
-export default class TableCell extends React.Component {
-  static propTypes = {
-    record: PropTypes.object,
-    prefixCls: PropTypes.string,
-    index: PropTypes.number,
-    indent: PropTypes.number,
-    indentSize: PropTypes.number,
-    column: PropTypes.object,
-    expandIcon: PropTypes.node,
-    component: PropTypes.any,
-  };
+export interface TableCellProps<ValueType> {
+  record?: ValueType;
+  prefixCls?: string;
+  index?: number;
+  indent?: number;
+  indentSize?: number;
+  column?: ColumnType;
+  expandIcon?: React.ReactNode;
+  component?: CustomizeComponent;
+}
 
-  handleClick = e => {
+export default class TableCell<ValueType> extends React.Component<TableCellProps<ValueType>> {
+  handleClick: React.MouseEventHandler<HTMLElement> = e => {
     const {
       record,
       column: { onCellClick },
@@ -48,7 +48,7 @@ export default class TableCell extends React.Component {
 
     // We should return undefined if no dataIndex is specified, but in order to
     // be compatible with object-path's behavior, we return the record object instead.
-    let text;
+    let text: React.ReactNode | RenderedCell;
     if (typeof dataIndex === 'number') {
       text = get(record, dataIndex);
     } else if (!dataIndex || dataIndex.length === 0) {
@@ -56,16 +56,17 @@ export default class TableCell extends React.Component {
     } else {
       text = get(record, dataIndex);
     }
-    let tdProps = {};
-    let colSpan;
-    let rowSpan;
+    let tdProps: Cell = {};
+    let colSpan: number;
+    let rowSpan: number;
 
     if (render) {
       text = render(text, record, index);
+
+      // `render` support cell with additional config like `props`
       if (isInvalidRenderCellText(text)) {
         tdProps = text.props || tdProps;
-        colSpan = tdProps.colSpan;
-        rowSpan = tdProps.rowSpan;
+        ({ colSpan, rowSpan } = tdProps);
         text = text.children;
       }
     }
diff --git a/src/TableHeader.js b/src/TableHeader.tsx
similarity index 74%
rename from src/TableHeader.js
rename to src/TableHeader.tsx
index 743c42a00..e272a2eb7 100644
--- a/src/TableHeader.js
+++ b/src/TableHeader.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TableHeaderRow from './TableHeaderRow';
+import {
+  ColumnType,
+  Expander,
+  Cell,
+  InternalColumnType,
+  FixedType,
+  GetComponentProps,
+} from './interface';
 
-function getHeaderRows(columns, currentRow = 0, rows) {
-  rows = rows || [];
+function getHeaderRows(columns: InternalColumnType[], currentRow = 0, rows: Cell[][] = []) {
+  // eslint-disable-next-line no-param-reassign
   rows[currentRow] = rows[currentRow] || [];
 
   columns.forEach(column => {
@@ -12,7 +20,7 @@ function getHeaderRows(columns, currentRow = 0, rows) {
         rows.push([]);
       }
     }
-    const cell = {
+    const cell: Cell = {
       key: column.key,
       className: column.className || '',
       children: column.title,
@@ -34,7 +42,14 @@ function getHeaderRows(columns, currentRow = 0, rows) {
   return rows.filter(row => row.length > 0);
 }
 
-export default function TableHeader(props, { table }) {
+export interface TableHeaderProps {
+  fixed?: FixedType;
+  columns: ColumnType[];
+  expander: Expander;
+  onHeaderRow?: GetComponentProps<ColumnType[]>;
+}
+
+const TableHeader: React.FC<TableHeaderProps> = (props, { table }) => {
   const { components } = table;
   const { prefixCls, showHeader, onHeaderRow } = table.props;
   const { expander, columns, fixed } = props;
@@ -66,15 +81,10 @@ export default function TableHeader(props, { table }) {
       ))}
     </HeaderWrapper>
   );
-}
-
-TableHeader.propTypes = {
-  fixed: PropTypes.string,
-  columns: PropTypes.array.isRequired,
-  expander: PropTypes.object.isRequired,
-  onHeaderRow: PropTypes.func,
 };
 
 TableHeader.contextTypes = {
   table: PropTypes.any,
 };
+
+export default TableHeader;
diff --git a/src/TableHeaderRow.js b/src/TableHeaderRow.tsx
similarity index 67%
rename from src/TableHeaderRow.js
rename to src/TableHeaderRow.tsx
index 8477e1cb2..340364a6f 100644
--- a/src/TableHeaderRow.js
+++ b/src/TableHeaderRow.tsx
@@ -1,9 +1,35 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'mini-store';
 import classNames from 'classnames';
+import {
+  TableComponents,
+  GetComponentProps,
+  ColumnType,
+  Cell,
+  TableStoreState,
+  FixedType,
+} from './interface';
 
-function TableHeaderRow({ row, index, height, components, onHeaderRow, prefixCls }) {
+export interface TableHeaderRowProps {
+  row: Cell[];
+  index: number;
+  height: string | number;
+  components: TableComponents;
+  onHeaderRow: GetComponentProps<ColumnType[]>;
+  prefixCls: string;
+  columns: ColumnType[];
+  rows: Cell[];
+  fixed: FixedType;
+}
+
+function TableHeaderRow({
+  row,
+  index,
+  height,
+  components,
+  onHeaderRow,
+  prefixCls,
+}: TableHeaderRowProps) {
   const HeaderRow = components.header.row;
   const HeaderCell = components.header.cell;
   const rowProps = onHeaderRow(row.map(cell => cell.column), index);
@@ -31,16 +57,7 @@ function TableHeaderRow({ row, index, height, components, onHeaderRow, prefixCls
   );
 }
 
-TableHeaderRow.propTypes = {
-  row: PropTypes.array,
-  index: PropTypes.number,
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  components: PropTypes.any,
-  onHeaderRow: PropTypes.func,
-  prefixCls: PropTypes.string,
-};
-
-function getRowHeight(state, props) {
+function getRowHeight(state: TableStoreState, props: TableHeaderRowProps) {
   const { fixedColumnsHeadRowsHeight } = state;
   const { columns, rows, fixed } = props;
   const headerHeight = fixedColumnsHeadRowsHeight[0];
@@ -58,8 +75,6 @@ function getRowHeight(state, props) {
   return null;
 }
 
-export default connect((state, props) => {
-  return {
-    height: getRowHeight(state, props),
-  };
-})(TableHeaderRow);
+export default connect((state: TableStoreState, props: TableHeaderRowProps) => ({
+  height: getRowHeight(state, props),
+}))(TableHeaderRow);
diff --git a/src/TableRow.js b/src/TableRow.tsx
similarity index 72%
rename from src/TableRow.js
rename to src/TableRow.tsx
index 54a2bf974..4ed8ac135 100644
--- a/src/TableRow.js
+++ b/src/TableRow.tsx
@@ -1,43 +1,60 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
+import warning from 'rc-util/lib/warning';
 import { connect } from 'mini-store';
 import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import TableCell from './TableCell';
-import { warningOnce } from './utils';
-
-class TableRow extends React.Component {
-  static propTypes = {
-    onRow: PropTypes.func,
-    onRowClick: PropTypes.func,
-    onRowDoubleClick: PropTypes.func,
-    onRowContextMenu: PropTypes.func,
-    onRowMouseEnter: PropTypes.func,
-    onRowMouseLeave: PropTypes.func,
-    record: PropTypes.object,
-    prefixCls: PropTypes.string,
-    onHover: PropTypes.func,
-    columns: PropTypes.array,
-    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    index: PropTypes.number,
-    rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    className: PropTypes.string,
-    indent: PropTypes.number,
-    indentSize: PropTypes.number,
-    hasExpandIcon: PropTypes.func,
-    hovered: PropTypes.bool.isRequired,
-    visible: PropTypes.bool.isRequired,
-    store: PropTypes.object.isRequired,
-    fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    renderExpandIcon: PropTypes.func,
-    renderExpandIconCell: PropTypes.func,
-    components: PropTypes.any,
-    expandedRow: PropTypes.bool,
-    isAnyColumnsFixed: PropTypes.bool,
-    ancestorKeys: PropTypes.array.isRequired,
-  };
+import {
+  GetComponentProps,
+  LegacyFunction,
+  Key,
+  ColumnType,
+  TableStore,
+  FixedType,
+  RenderNode,
+  Cell,
+  TableComponents,
+  DefaultValueType,
+  TableStoreState,
+} from './interface';
+
+export interface TableRowProps<ValueType> {
+  onRow?: GetComponentProps<ValueType>;
+  onRowClick?: LegacyFunction<ValueType>;
+  onRowDoubleClick?: LegacyFunction<ValueType>;
+  onRowContextMenu?: LegacyFunction<ValueType>;
+  onRowMouseEnter?: LegacyFunction<ValueType>;
+  onRowMouseLeave?: LegacyFunction<ValueType>;
+  record?: ValueType;
+  prefixCls?: string;
+  onHover?: (hovered: boolean, rowKey: Key) => void;
+  columns?: ColumnType[];
+  height?: string | number;
+  index?: number;
+  rowKey: Key;
+  className?: string;
+  indent?: number;
+  indentSize?: number;
+  hasExpandIcon?: (index: number) => boolean;
+  hovered: boolean;
+  visible: boolean;
+  store: TableStore;
+  fixed?: FixedType;
+  renderExpandIcon?: RenderNode;
+  renderExpandIconCell?: (cells: Cell[]) => void;
+  components?: TableComponents;
+  expandedRow?: boolean;
+  isAnyColumnsFixed?: boolean;
+  ancestorKeys: Key[];
+}
+
+interface TableRowState {
+  shouldRender?: boolean;
+  visible?: boolean;
+}
 
+class TableRow<ValueType> extends React.Component<TableRowProps<ValueType>, TableRowState> {
   static defaultProps = {
     onRow() {},
     onHover() {},
@@ -46,15 +63,16 @@ class TableRow extends React.Component {
     renderExpandIconCell() {},
   };
 
-  constructor(props) {
-    super(props);
+  state: TableRowState = {};
 
-    this.shouldRender = props.visible;
+  rowRef: HTMLElement;
 
-    this.state = {};
-  }
+  style: React.CSSProperties;
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  static getDerivedStateFromProps(
+    nextProps: TableRowProps<DefaultValueType>,
+    prevState: TableRowState,
+  ): Partial<TableRowState> {
     if (prevState.visible || (!prevState.visible && nextProps.visible)) {
       return {
         shouldRender: true,
@@ -82,10 +100,14 @@ class TableRow extends React.Component {
     }
   }
 
-  onTriggerEvent = (rowPropFunc, legacyFunc, additionalFunc) => {
+  onTriggerEvent = (
+    rowPropFunc: Function,
+    legacyFunc: LegacyFunction<ValueType>,
+    additionalFunc?: Function,
+  ) => {
     const { record, index } = this.props;
 
-    return (...args) => {
+    return (...args: [React.SyntheticEvent]) => {
       // Additional function like trigger `this.onHover` to handle self logic
       if (additionalFunc) {
         additionalFunc();
@@ -108,6 +130,7 @@ class TableRow extends React.Component {
     const { onHover, rowKey } = this.props;
     onHover(true, rowKey);
   };
+
   onMouseLeave = () => {
     const { onHover, rowKey } = this.props;
     onHover(false, rowKey);
@@ -116,7 +139,7 @@ class TableRow extends React.Component {
   setExpandedRowHeight() {
     const { store, rowKey } = this.props;
     let { expandedRowsHeight } = store.getState();
-    const height = this.rowRef.getBoundingClientRect().height;
+    const { height } = this.rowRef.getBoundingClientRect();
     expandedRowsHeight = {
       ...expandedRowsHeight,
       [rowKey]: height,
@@ -127,7 +150,7 @@ class TableRow extends React.Component {
   setRowHeight() {
     const { store, rowKey } = this.props;
     const { fixedColumnsBodyRowsHeight } = store.getState();
-    const height = this.rowRef.getBoundingClientRect().height;
+    const { height } = this.rowRef.getBoundingClientRect();
     store.setState({
       fixedColumnsBodyRowsHeight: {
         ...fixedColumnsBodyRowsHeight,
@@ -151,7 +174,7 @@ class TableRow extends React.Component {
   }
 
   saveRowRef() {
-    this.rowRef = ReactDOM.findDOMNode(this);
+    this.rowRef = ReactDOM.findDOMNode(this) as HTMLElement;
 
     const { isAnyColumnsFixed, fixed, expandedRow, ancestorKeys } = this.props;
 
@@ -205,14 +228,14 @@ class TableRow extends React.Component {
       className += ` ${prefixCls}-hover`;
     }
 
-    const cells = [];
+    const cells: Cell[] = [];
 
     renderExpandIconCell(cells);
 
-    for (let i = 0; i < columns.length; i++) {
+    for (let i = 0; i < columns.length; i += 1) {
       const column = columns[i];
 
-      warningOnce(
+      warning(
         column.onCellClick === undefined,
         'column[onCellClick] is deprecated, please use column[onCell] instead.',
       );
@@ -234,7 +257,7 @@ class TableRow extends React.Component {
 
     const { className: customClassName, style: customStyle, ...rowProps } =
       onRow(record, index) || {};
-    let style = { height };
+    let style: React.CSSProperties = { height };
 
     if (!visible) {
       style.display = 'none';
@@ -296,10 +319,10 @@ function getRowHeight(state, props) {
 
 polyfill(TableRow);
 
-export default connect((state, props) => {
+export default connect((state: TableStoreState, props: TableRowProps<DefaultValueType>) => {
   const { currentHoverKey, expandedRowKeys } = state;
   const { rowKey, ancestorKeys } = props;
-  const visible = ancestorKeys.length === 0 || ancestorKeys.every(k => ~expandedRowKeys.indexOf(k));
+  const visible = ancestorKeys.length === 0 || ancestorKeys.every(k => expandedRowKeys.includes(k));
 
   return {
     visible,
diff --git a/src/index.js b/src/index.ts
similarity index 79%
rename from src/index.js
rename to src/index.ts
index a47f48069..9896dd58f 100644
--- a/src/index.js
+++ b/src/index.ts
@@ -3,8 +3,5 @@ import Column from './Column';
 import ColumnGroup from './ColumnGroup';
 import { INTERNAL_COL_DEFINE } from './utils';
 
-Table.Column = Column;
-Table.ColumnGroup = ColumnGroup;
-
 export default Table;
 export { Column, ColumnGroup, INTERNAL_COL_DEFINE };
diff --git a/src/interface.ts b/src/interface.ts
new file mode 100644
index 000000000..7bc53c71e
--- /dev/null
+++ b/src/interface.ts
@@ -0,0 +1,142 @@
+import React from 'react';
+
+export type Key = React.Key;
+
+export type FixedType = 'left' | 'right' | boolean;
+
+export type DefaultValueType = Record<string, any>;
+
+export interface RenderedCell {
+  props?: Cell;
+  children?: React.ReactNode;
+}
+
+export interface ColumnType<ValueType = DefaultValueType> {
+  // TODO: https://ant.design/components/table-cn/#Column
+  key?: Key;
+  dataIndex?: Key;
+  fixed?: FixedType;
+  className?: string;
+  ellipsis?: boolean;
+  align?: 'left' | 'center' | 'right';
+  width?: number | string;
+  rowSpan?: number;
+  colSpan?: number;
+  title?: React.ReactNode;
+  children?: ColumnType[];
+  render?: (value: any, record: ValueType, index: number) => React.ReactNode | RenderedCell;
+
+  /** @deprecated Please use `onCell` instead */
+  onCellClick?: (record: ValueType, e: React.MouseEvent<HTMLElement>) => void;
+  onCell?: GetComponentProps<ValueType>;
+  onHeaderCell?: GetComponentProps<ColumnType>;
+}
+
+export interface InternalColumnType extends ColumnType {
+  RC_TABLE_INTERNAL_COL_DEFINE?: object;
+}
+
+export interface Cell {
+  key?: Key;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  column?: ColumnType;
+  colSpan?: number;
+  rowSpan?: number;
+}
+
+export interface TableStoreState {
+  currentHoverKey: Key;
+  expandedRowKeys: Key[];
+  expandedRowsHeight: Record<Key, number>;
+  fixedColumnsHeadRowsHeight: Record<Key, number | 'auto'>;
+  fixedColumnsBodyRowsHeight: Record<Key, number>;
+}
+
+export interface TableStore {
+  getState: () => TableStoreState;
+  setState: (state: Partial<TableStoreState>) => void;
+}
+
+// TODO: Fill this
+export interface Expander<ValueType = DefaultValueType> {
+  props: any;
+  needIndentSpaced: boolean;
+  handleExpandChange: any;
+  renderRows: (
+    renderRows: any,
+    rows: React.ReactElement[],
+    record: ValueType,
+    index: number,
+    indent: number,
+    fixed: FixedType,
+    key: Key,
+    ancestorKeys: Key[],
+  ) => React.ReactElement[];
+  renderExpandIndentCell: (rows: Cell[][], fixed: FixedType) => void;
+}
+
+export type GetRowKey<ValueType> = (value: ValueType, index: number) => Key;
+
+export type RowHoverEventHandler = (isHover: boolean, key: Key) => void;
+
+export type GetComponentProps<DataType> = (
+  data: DataType,
+  index?: number,
+) => React.HTMLAttributes<HTMLElement>;
+
+export type IconExpandEventHandler<ValueType> = (
+  record: ValueType,
+  event: React.MouseEvent<HTMLElement>,
+) => void;
+
+export type CustomizeComponent<
+  P extends React.HTMLAttributes<HTMLElement> = React.HTMLAttributes<HTMLElement>
+> = React.ComponentType<P> | React.FC<P> | string;
+
+export type LegacyFunction<ValueType> = (
+  record: ValueType,
+  index: number,
+  event: React.SyntheticEvent,
+) => void;
+
+export type RenderNode = () => React.ReactNode;
+
+export interface TableComponents {
+  table?: CustomizeComponent;
+  header?: {
+    wrapper?: CustomizeComponent;
+    row?: CustomizeComponent;
+    cell?: CustomizeComponent;
+  };
+  body?: {
+    wrapper?: CustomizeComponent;
+    row?: CustomizeComponent;
+    cell?: CustomizeComponent;
+  };
+}
+
+export type RenderExpandIcon<ValueType> = (props: {
+  prefixCls: string;
+  expanded: boolean;
+  record: ValueType;
+  needIndentSpaced: boolean;
+  expandable: boolean;
+  onExpand: IconExpandEventHandler<ValueType>;
+}) => React.ReactNode;
+
+export type RenderRows<ValueType> = (
+  renderData: ValueType[],
+  indent: number,
+  ancestorKeys?: Key[],
+) => React.ReactElement[];
+
+export type ExpandedRowRender<ValueType> = (
+  record: ValueType,
+  index: number,
+  indent: number,
+  expanded: boolean,
+) => React.ReactNode;
+
+export type ScrollPosition = 'left' | 'middle' | 'right' | 'both';
diff --git a/src/utils.js b/src/utils.ts
similarity index 80%
rename from src/utils.js
rename to src/utils.ts
index 8da2c10c1..82a983193 100644
--- a/src/utils.js
+++ b/src/utils.ts
@@ -1,7 +1,5 @@
-import warning from 'warning';
-
-let scrollbarVerticalSize;
-let scrollbarHorizontalSize;
+let scrollbarVerticalSize: number;
+let scrollbarHorizontalSize: number;
 
 // Measure scrollbar width for padding body during modal show/hide
 const scrollbarMeasure = {
@@ -14,14 +12,22 @@ const scrollbarMeasure = {
 // This const is used for colgroup.col internal props. And should not provides to user.
 export const INTERNAL_COL_DEFINE = 'RC_TABLE_INTERNAL_COL_DEFINE';
 
-export function measureScrollbar({ direction = 'vertical', prefixCls }) {
+export function measureScrollbar({
+  direction = 'vertical',
+  prefixCls,
+}: {
+  direction: 'horizontal' | 'vertical';
+  prefixCls?: string;
+}) {
   if (typeof document === 'undefined' || typeof window === 'undefined') {
     return 0;
   }
   const isVertical = direction === 'vertical';
   if (isVertical && scrollbarVerticalSize) {
     return scrollbarVerticalSize;
-  } else if (!isVertical && scrollbarHorizontalSize) {
+  }
+
+  if (!isVertical && scrollbarHorizontalSize) {
     return scrollbarHorizontalSize;
   }
   const scrollDiv = document.createElement('div');
@@ -50,9 +56,9 @@ export function measureScrollbar({ direction = 'vertical', prefixCls }) {
   return size;
 }
 
-export function debounce(func, wait, immediate) {
-  let timeout;
-  function debounceFunc(...args) {
+export function debounce(func: Function, wait: number, immediate?: boolean) {
+  let timeout: NodeJS.Timeout;
+  function debounceFunc(...args: any[]) {
     const context = this;
     // https://fb.me/react-event-pooling
     if (args[0] && args[0].persist) {
@@ -80,15 +86,7 @@ export function debounce(func, wait, immediate) {
   return debounceFunc;
 }
 
-const warned = {};
-export function warningOnce(condition, format, args) {
-  if (!warned[format]) {
-    warning(condition, format, args);
-    warned[format] = !condition;
-  }
-}
-
-export function remove(array, item) {
+export function remove<T>(array: T[], item: T) {
   const index = array.indexOf(item);
   const front = array.slice(0, index);
   const last = array.slice(index + 1, array.length);
@@ -99,7 +97,7 @@ export function remove(array, item) {
  * Returns only data- and aria- key/value pairs
  * @param {object} props
  */
-export function getDataAndAriaProps(props) {
+export function getDataAndAriaProps(props: object) {
   return Object.keys(props).reduce((memo, key) => {
     if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
       memo[key] = props[key];
diff --git a/tests/setup.js b/tests/setup.js
deleted file mode 100644
index ff832046c..000000000
--- a/tests/setup.js
+++ /dev/null
@@ -1,10 +0,0 @@
-global.requestAnimationFrame =
-  global.requestAnimationFrame ||
-  function requestAnimationFrame(cb) {
-    return setTimeout(cb, 0);
-  };
-
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-Enzyme.configure({ adapter: new Adapter() });