table組件，主要用于大量結構化的數(shù)據(jù)需要展現(xiàn)時使用，在各端應用開發(fā)中使用非常廣泛，達到幾乎必用的地步。在原生ios開發(fā)中，通常需要自定義cell來進行數(shù)據(jù)的展示，antd 的table組件功能相當強大，能實現(xiàn)的功能覆蓋范圍也相當廣泛，本文只是簡單介紹一下最基本的用法，有興趣的可以直接去官網(wǎng)上看，示例更豐富，而且都帶有效果展示。
首先，指定表格的數(shù)據(jù)源 dataSource 為一個數(shù)組：

const dataSource = [
  {
    key: '1',
    name: '胡大大',
    age: 32,
    address: '南湖區(qū)湖底公園1號',
  },
  {
    key: '2',
    name: '胡小小',
    age: 42,
    address: '南湖區(qū)湖底公園2號',
  },
];

再指定表格的列的名稱：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年齡',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

引入table，然后直接<Table>標簽就能展示出效果來：

import {Table } from 'antd'
<Table dataSource={dataSource} columns={columns} />;

在數(shù)據(jù)較多，會自動分頁展示，每一列會根據(jù)內(nèi)容的長度自動撐長，上手使用非常簡單，通常PC上對表格會有一些編輯等操作，在原生ios中需要自己布局、定義方法等一系列操作，antd table則只需要在列名稱中添加鏈接就好：

{
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <span>
        <a href="javascript:;">Invite {record.name}</a>
        <Divider type="vertical" />
        <a href="javascript:;">Delete</a>
      </span>
    ),
  },

值得一提的是，表格的樣式是默認的，需要修改的話要自己改變樣式，可以參考以下方法：

.ant-table{
  :global {
    width: 98%;
    margin-left: 1%;
    .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
        padding: 6px 8px !important;
    }
    .ant-table-thead > tr > th {
        background-color: #242542;
        color: white;
    }
    .ant-table-thead > tr > th:hover {
        background-color: #535781;
    }
    .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
        background: rgb(201, 223, 11);
    }
    .ant-table-content { 
      background-color: #343655; 
      color: white;
     }
    .ant-table-tbody > tr:hover > td{
      background-color:rgba(106, 178, 245, 0.5) ! important;
     }
  }
}

自定義andt table表格樣式的方式也比較多，上述方法可能會引起全局改變，如果只是改變代碼中一個table，則需要注意以下。以上只是介紹的最最最基礎的用法，還有很多高級一些的方法大家可以去官網(wǎng)細看。