---
title: Table - 表格组件
nav:
  title: RN组件
  path: /react-native
group:
  title: 展示组件
  path: /display
---

# Table 表格组件

## 效果演示

### 1. 基本的用法

```tsx | pure
  const columns = [
    {
      title: '管理员',
      dataIndex: 'userInfo',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: '角色',
      dataIndex: 'roleName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: '部门',
      dataIndex: 'opDepartmentName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: '操作内容',
      dataIndex: 'opContent',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: '业务模块',
      dataIndex: 'businessModule',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
  ];

  const dataSource = [
    {
      id: 4694447,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '',
      opType: '解除封禁会员账号、漫克',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '会员模块',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:22.000+08:00',
    },
    {
      id: 4694446,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '117569,[2, 1, 4],11',
      opType: '封禁会员账号、漫克',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '会员模块',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:09.000+08:00',
    },
    {
      id: 4694443,
      userId: 116969,
      userName: 'zhuxc',
      nickName: 'zhuxc',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 4,
      opDepartmentName: '根部门1',
      accountType: 1,
      opResources: 'zhuxc',
      opType: '运营商用户名密码登录',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '用户登录',
      loginIp: '60.12.241.84',
      loginCity: null,
      createdAt: '2020-12-01T17:15:09.000+08:00',
    },
    {
      id: 4694369,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '117569,[4],11',
      opType: '封禁会员账号、漫克',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '会员模块',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:00:21.000+08:00',
    },
    {
      id: 4694357,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '',
      opType: '查看黑白名单列表',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '黑白名单',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T16:59:43.000+08:00',
    }]
<WingBlank>
  <Table columns={columns} dataSource={data} height={300} />
</WingBlank>
```

<center>
  <figure>
    <img
      alt="基本的用法 ios"
      src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608881149351049415.gif"
      style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
    />
  </figure>
</center>

### 2. columns 属性

```tsx | pure
  const columns = [
     {
      title: '管理员',
      dataIndex: 'userInfo',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 100,
      flex: 2,
    },
    {
      title: '角色',
      dataIndex: 'roleName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 50,
    },
    {
      title: '部门',
      dataIndex: 'opDepartmentName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 20,
    },
    {
      title: '操作内容',
      dataIndex: 'opContent',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: '业务模块',
      dataIndex: 'businessModule',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: '操作时间',
      dataIndex: 'createdAt',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'dateTimeRange',
    },
    {
      title: 'IP地址',
      dataIndex: 'loginIp',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
  ];

  const dataSource = [
    {
      id: 4694447,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '',
      opType: '解除封禁会员账号、漫克',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '会员模块',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:22.000+08:00',
    },
    {
      id: 4694446,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '117569,[2, 1, 4],11',
      opType: '封禁会员账号、漫克',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '会员模块',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:09.000+08:00',
    },
    {
      id: 4694443,
      userId: 116969,
      userName: 'zhuxc',
      nickName: 'zhuxc',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 4,
      opDepartmentName: '根部门1',
      accountType: 1,
      opResources: 'zhuxc',
      opType: '运营商用户名密码登录',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '用户登录',
      loginIp: '60.12.241.84',
      loginCity: null,
      createdAt: '2020-12-01T17:15:09.000+08:00',
    },
    {
      id: 4694369,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '117569,[4],11',
      opType: '封禁会员账号、漫克',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '会员模块',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:00:21.000+08:00',
    },
    {
      id: 4694357,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '',
      opType: '查看黑白名单列表',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '黑白名单',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T16:59:43.000+08:00',
    }]
<WingBlank>
  <Table columns={columns} dataSource={data} height={300} />
</WingBlank>
```

<center>
  <figure>
    <img
      alt="columns 属性 ios"
      src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608881149467256102.gif"
      style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
    />
  </figure>
</center>

### 3. 横向滚动

```tsx | pure
  const columns = [
     {
      title: '管理员',
      dataIndex: 'userInfo',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 100,
      flex: 2,
    },
    {
      title: '角色',
      dataIndex: 'roleName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 50,
    },
    {
      title: '部门',
      dataIndex: 'opDepartmentName',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
      width: 20,
    },
    {
      title: '操作内容',
      dataIndex: 'opContent',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: '业务模块',
      dataIndex: 'businessModule',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
    {
      title: '操作时间',
      dataIndex: 'createdAt',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'dateTimeRange',
    },
    {
      title: 'IP地址',
      dataIndex: 'loginIp',
      align: 'left',
      ellipsis: false,
      copyable: false,
      valueType: 'text',
      hideInSearch: false,
    },
  ];

  const dataSource = [
    {
      id: 4694447,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '',
      opType: '解除封禁会员账号、漫克',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '会员模块',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:22.000+08:00',
    },
    {
      id: 4694446,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '117569,[2, 1, 4],11',
      opType: '封禁会员账号、漫克',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '会员模块',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:17:09.000+08:00',
    },
    {
      id: 4694443,
      userId: 116969,
      userName: 'zhuxc',
      nickName: 'zhuxc',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 4,
      opDepartmentName: '根部门1',
      accountType: 1,
      opResources: 'zhuxc',
      opType: '运营商用户名密码登录',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '用户登录',
      loginIp: '60.12.241.84',
      loginCity: null,
      createdAt: '2020-12-01T17:15:09.000+08:00',
    },
    {
      id: 4694369,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '117569,[4],11',
      opType: '封禁会员账号、漫克',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '会员模块',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T17:00:21.000+08:00',
    },
    {
      id: 4694357,
      userId: 117676,
      userName: 'sxj',
      nickName: 'sxj',
      roleId: 519,
      roleName: '超级管理员角色',
      opDepartmentId: 22,
      opDepartmentName: 'lw是',
      accountType: 1,
      opResources: '',
      opType: '查看黑白名单列表',
      deviceNo: null,
      deviceSystem: null,
      clientId: 'manke-management',
      groupId: null,
      businessModule: '黑白名单',
      loginIp: '222.173.46.190',
      loginCity: null,
      createdAt: '2020-12-01T16:59:43.000+08:00',
    }]
<WingBlank>
  <Table columns={columns} dataSource={data}  height={300} />
</WingBlank>
```

<center>
  <figure>
    <img
      alt="横向滚动 ios"
      src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608881149887640842.gif"
      style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
    />
  </figure>
</center>

### 4. 空状态

```tsx | pure
const columns = [
  {
    title: '管理员',
    dataIndex: 'userInfo',
    align: 'left',
    ellipsis: false,
    copyable: false,
    valueType: 'text',
    hideInSearch: false,
    width: 100,
    flex: 2,
  },
  {
    title: '角色',
    dataIndex: 'roleName',
    align: 'left',
    ellipsis: false,
    copyable: false,
    valueType: 'text',
    hideInSearch: false,
    width: 50,
  },
  {
    title: '部门',
    dataIndex: 'opDepartmentName',
    align: 'left',
    ellipsis: false,
    copyable: false,
    valueType: 'text',
    hideInSearch: false,
    width: 20,
  },
  {
    title: '操作内容',
    dataIndex: 'opContent',
    align: 'left',
    ellipsis: false,
    copyable: false,
    valueType: 'text',
    hideInSearch: false,
  },
  {
    title: '业务模块',
    dataIndex: 'businessModule',
    align: 'left',
    ellipsis: false,
    copyable: false,
    valueType: 'text',
    hideInSearch: false,
  },
  {
    title: '操作时间',
    dataIndex: 'createdAt',
    align: 'left',
    ellipsis: false,
    copyable: false,
    valueType: 'dateTimeRange',
  },
  {
    title: 'IP地址',
    dataIndex: 'loginIp',
    align: 'left',
    ellipsis: false,
    copyable: false,
    valueType: 'text',
    hideInSearch: false,
  },
];

<WingBlank>
  <Table columns={columns} dataSource={[]} height={300} />
</WingBlank>;
```

<center>
  <figure>
    <img
      alt="空状态 ios"
      src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608881148736057650.gif"
      style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
    />
  </figure>
</center>

## API

### table 组件 API

| 属性 | 必填 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | --- |
| columns | `true` | 表格的列定义 | `ColumnProps[]` |  |
| dataSource | `true` | 表格的数据 | `[{ [key: string]: string }]` |  |
| keyExtractor | `true` | 指定 Table 的唯一标识字段 | `(item: T, index: number) => string` |  |
| headerStyle | `false` | 表单头部样式 | `ViewStyle` |  |
| rowStyle | `false` | 数据行样式 | `ViewStyle` |  |
| onRefresh | `false` | 表格下拉刷新 | `() => void` |  |
| onEndReached | `false` | 表格上拉加载 | `() => void` |  |
| refreshing | `false` | 刷新状态 | `boolean` | `false` |
| height | `false` | 表单的高度 （如果不填则为 flex:1，由外部容器决定） | `number` | `deviceHeight` |
| fixedHeader | `false` | 是否固定头部 | `boolean` | `false` |
| showHeader | `false` | 是否显示表头 | `boolean` | `false` |
| emptyComponent | `false` | 空状态的视图 | `ReactElement` |  |

### ColumnProps 属性

| 属性          | 必填    | 说明             | 类型                                               | 默认值 |
| ------------- | ------- | ---------------- | -------------------------------------------------- | ------ |
| title         | `true`  | 表单的列标题     | `string`                                           |        |
| dataIndex     | `true`  | 数据的 key 值    | `string`                                           |        |
| numberOfLines | `false` | 文字行数         | `number`                                           |        |
| ellipsisMode  | `false` | 超出后的截取方式 | `head` \| `middle` \| `tail` \| `clip`             |        |
| textAlign     | `false` | 文字对其方式     | `center` \| `left` \| `right`                      |        |
| width         | `false` | 列的宽度         | `number`                                           |        |
| renderText    | `false` | 自定义文本       | `(item: any, column: ColumnProps) => string`       |        |
| render        | `false` | 自定义组件       | `(item: any, column: ColumnProps) => ReactElement` |        |