ant-design/components/table/demo/basic.html

<div class="code-box">
  <div class="code-box-demo">
    <div id="components-table-demo-basic"></div>
    <script>(function(){'use strict';

var Table = antd.Table;
var columns = [{
  title: '姓名',
  dataIndex: 'name',
  render: function render(text) {
    return React.createElement(
      'a',
      { href: "javascript:;" },
      text
    );
  }
}, {
  title: '年龄',
  dataIndex: 'age'
}, {
  title: '住址',
  dataIndex: 'address'
}, {
  title: '操作',
  dataIndex: '',
  render: function render(text, record) {
    return React.createElement(
      'span',
      null,
      React.createElement(
        'a',
        { href: "javascript:;" },
        '操作一'
      ),
      React.createElement('span', { className: "ant-divider" }),
      React.createElement(
        'a',
        { href: "javascript:;" },
        '操作二'
      ),
      React.createElement('span', { className: "ant-divider" }),
      React.createElement(
        'a',
        { href: "javascript:;", className: "ant-dropdown-link" },
        '更多 ',
        React.createElement('i', { className: "anticon anticon-down" })
      )
    );
  }
}];
var data = [{
  name: '胡彦斌',
  age: 32,
  address: '西湖区湖底公园1号'
}, {
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}, {
  name: '李大嘴',
  age: 32,
  address: '西湖区湖底公园1号'
}];

React.render(React.createElement(Table, { columns: columns, dataSource: data }), document.getElementById('components-table-demo-basic'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Table = antd.Table;
<span class="keyword">var</span> columns = [{
  title: <span class="string">'姓名'</span>,
  dataIndex: <span class="string">'name'</span>,
  render: <span class="function"><span class="keyword">function</span><span class="params">(text)</span> {</span>
    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"javascript:;"</span>&gt;</span>{text}<span class="tag">&lt;/<span class="title">a</span>&gt;</span>;</span>
  }
}, {
  title: <span class="string">'年龄'</span>,
  dataIndex: <span class="string">'age'</span>
}, {
  title: <span class="string">'住址'</span>,
  dataIndex: <span class="string">'address'</span>
}, {
  title: <span class="string">'操作'</span>,
  dataIndex: <span class="string">''</span>,
  render: <span class="function"><span class="keyword">function</span><span class="params">(text, record)</span> {</span>
    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="title">span</span>&gt;</span>
      <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"javascript:;"</span>&gt;</span>操作一<span class="tag">&lt;/<span class="title">a</span>&gt;</span>
      <span class="tag">&lt;<span class="title">span</span> <span class="attribute">className</span>=<span class="value">"ant-divider"</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span>
      <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"javascript:;"</span>&gt;</span>操作二<span class="tag">&lt;/<span class="title">a</span>&gt;</span>
      <span class="tag">&lt;<span class="title">span</span> <span class="attribute">className</span>=<span class="value">"ant-divider"</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span>
      <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"javascript:;"</span> <span class="attribute">className</span>=<span class="value">"ant-dropdown-link"</span>&gt;</span>
        更多 <span class="tag">&lt;<span class="title">i</span> <span class="attribute">className</span>=<span class="value">"anticon anticon-down"</span>&gt;</span><span class="tag">&lt;/<span class="title">i</span>&gt;</span>
      <span class="tag">&lt;/<span class="title">a</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">span</span>&gt;</span>;</span>
  }
}];
<span class="keyword">var</span> data = [{
  name: <span class="string">'胡彦斌'</span>,
  age: <span class="number">32</span>,
  address: <span class="string">'西湖区湖底公园1号'</span>
}, {
  name: <span class="string">'胡彦祖'</span>,
  age: <span class="number">42</span>,
  address: <span class="string">'西湖区湖底公园1号'</span>
}, {
  name: <span class="string">'李大嘴'</span>,
  age: <span class="number">32</span>,
  address: <span class="string">'西湖区湖底公园1号'</span>
}];

React.render(<span class="xml"><span class="tag">&lt;<span class="title">Table</span> <span class="attribute">columns</span>=<span class="value">{columns}</span> <span class="attribute">dataSource</span>=<span class="value">{data}</span> /&gt;</span>
, document.getElementById('components-table-demo-basic'));</span></code></pre></div>
  </div>
  <div class="code-box-meta markdown">
    <div class="code-box-title">基本用法</div>
    <p>简单的表格，最后一列是各种操作。</p>
    <span class="collapse anticon anticon-circle-o-right"></span>
  </div>
</div>