cnd-components-mcp/componentData/components/CndTable.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

---
group:
  title: 云原生业务组件
---

# CndTable 表格组件

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-table

> 如果使用 refreshIndex 属性，初始值应设置为 0，设置为非 0 时, 第一次加载时可能造成 fetchData 函数执行两次

## 基本使用

```tsx preview
import React from 'react';
import { CndTable } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      columns={columns}
      fetchData={fetchData}
      pagination={{
        current: 1,
        pageSize: 10,
        total: 40,
      }}
    />
  );
};

export default Demo;
```

## operation && secondaryOperation

```tsx preview
import React from 'react';
import Table from '@ali/cnd-table';
import { Button } from '@alicloud/console-components';
import axios from 'axios';
import { get } from 'lodash';
import '@alicloud/console-components/dist/xconsole.css';

const Demo = () => {
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const fetchData = async params => {
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <Table
      columns={columns}
      fetchData={fetchData}
      pagination={{
        current: 1,
        pageSize: 10,
        total: 40,
      }}
      showRefreshButton
      operation={<Button type="primary">自定义左上角按钮</Button>}
      secondaryOperation={<Button>自定义右上角按钮</Button>}
    />
  );
};

export default Demo;
```

## refreshIndex

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      pagination={{
        current: 1,
        pageSize: 10,
        total: 40,
      }}
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
    />
  );
};

export default Demo;
```

## showRefreshButton

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      columns={columns}
      fetchData={fetchData}
      showRefreshButton
      operation={<Button type="primary">创建应用</Button>}
    />
  );
};

export default Demo;
```

## search

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
      },
    ],
  };
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      showRefreshButton
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
      search={search}
    />
  );
};

export default Demo;
```

## recordCurrent

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
      },
    ],
  };
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      recordCurrent
      showRefreshButton
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
      search={search}
    />
  );
};

export default Demo;
```

## search children

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    children: <Button>自定义内容</Button>,
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
      },
    ],
  };
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      recordCurrent
      showRefreshButton
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
      search={search}
    />
  );
};

export default Demo;
```

## search default value

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    children: <Button>自定义内容</Button>,
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
        defaultValue: 'abc',
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: 'c',
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: ['a', 'd'],
      },
    ],
  };
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      recordCurrent
      showRefreshButton
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
      search={search}
    />
  );
};

export default Demo;
```

## selection

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button, Badge } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    children: <Button>自定义内容</Button>,
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
        defaultValue: 'abc',
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: 'c',
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: ['a', 'd'],
      },
    ],
  };
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      className="cc"
      style={{ color: '#333' }}
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      recordCurrent
      showRefreshButton
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
      search={search}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          <Badge count={selectedRowKeys.length}>
            <Button disabled={selectedRowKeys.length === 0}>Delete</Button>
          </Badge>
        );
      }}
    />
  );
};

export default Demo;
```

## onlySupportOne

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button, Badge } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    children: <Button>自定义内容</Button>,
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    onlySupportOne: true,
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
        defaultValue: 'abc',
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: 'c',
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: ['a', 'd'],
      },
    ],
  };
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      className="cc"
      style={{ color: '#333' }}
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      recordCurrent
      showRefreshButton
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
      search={search}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          <Badge count={selectedRowKeys.length}>
            <Button disabled={selectedRowKeys.length === 0}>Delete</Button>
          </Badge>
        );
      }}
    />
  );
};

export default Demo;
```

## filterSlot

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button, Badge } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    children: <Button>自定义内容</Button>,
    beforeFilterRender: <Button>beforeFilterRender</Button>,
    afterFilterRender: <Button>afterFilterRender</Button>,
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    onlySupportOne: true,
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
        defaultValue: 'abc',
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: 'c',
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: ['a', 'd'],
      },
    ],
  };
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      className="cc"
      style={{ color: '#333' }}
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      recordCurrent
      showRefreshButton
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
      search={search}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          <Badge count={selectedRowKeys.length}>
            <Button disabled={selectedRowKeys.length === 0}>Delete</Button>
          </Badge>
        );
      }}
    />
  );
};

export default Demo;
```

## pagination = false

```tsx preview
import React, { useState } from 'react';
import { CndTable, Button, Badge } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';


const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
      sortDirections: ['desc', 'asc', 'default', ],
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    onlySupportOne: true,
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
        defaultValue: 'abc',
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: 'c',
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: ['a', 'd'],
      },
    ],
  };
  const fetchData = async params => {
    console.log('params', params);
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    console.log(res);
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <CndTable
      className="cc"
      style={{ color: '#333' }}
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      recordCurrent
      showRefreshButton
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
      search={search}
      pagination={false}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          <Badge count={selectedRowKeys.length}>
            <Button disabled={selectedRowKeys.length === 0}>Delete</Button>
          </Badge>
        );
      }}
    />
  );
};

export default Demo;
```

## isShowLoading loop

```tsx preview
import React, { useState,useEffect} from 'react';
import Table from '@ali/cnd-table';
import axios from 'axios';
import { get } from 'lodash';
import { Button, Badge } from '@alicloud/console-components';
import '@alicloud/console-components/dist/xconsole.css';

const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);
  const [isShowLoading, setIsShowLoading] = useState(true);
  const [isLoop, setIsLoop] = useState(false);

  useEffect(()=>{
    setTimeout(()=>{
      setIsLoop(true);
    },10000)
     setTimeout(()=>{
        setIsLoop(false);
      },60000)
  },[])

  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
      sortDirections: ['desc', 'asc', 'default', ],
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    onlySupportOne: true,
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
        defaultValue: 'abc',
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: 'c',
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
        defaultValue: ['a', 'd'],
      },
    ],
  };
  const fetchData = async params => {
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <Table
      className="cc"
      style={{ color: '#333' }}
      columns={columns}
      fetchData={fetchData}
      refreshIndex={refreshIndex}
      recordCurrent
      showRefreshButton
      operation={
        <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
          手动刷新
        </Button>
      }
      search={search}
      pagination={false}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          <Badge count={selectedRowKeys.length}>
            <Button disabled={selectedRowKeys.length === 0}>Delete</Button>
          </Badge>
        );
      }}
      isShowLoading={ isShowLoading }
      loop={{enable: isLoop,time: 5000,showLoading:false}}
    />
  );
};

export default Demo;
```

## isUseStorage

```tsx preview
import React, { useState, useEffect } from 'react';
import Table from '@ali/cnd-table';
import axios from 'axios';
import { get } from 'lodash';
import { Button, Badge } from '@alicloud/console-components';
import '@alicloud/console-components/dist/xconsole.css';

const Demo = () => {
  const [refreshIndex, setRefreshIndex] = useState(0);

  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      sortable: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];
  const search = {
    defaultDataIndex: 'name',
    defaultSelectedDataIndex: 'name',
    options: [
      {
        label: '实例名称',
        dataIndex: 'name',
        template: 'input',
        templateProps: {
          placeholder: '按实例名称搜索',
        },
      },
      {
        label: '网络类型',
        dataIndex: 'type',
        template: 'select',
        templateProps: {
          placeholder: '请选择网络类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
      },
      {
        label: '付费类型',
        dataIndex: 'pay',
        template: 'multiple',
        templateProps: {
          placeholder: '请选择付费类型',
          dataSource: [
            { label: 'A', value: 'a' },
            { label: 'B', value: 'b' },
            { label: 'C', value: 'c' },
            { label: 'D', value: 'd' },
          ],
        },
      },
    ],
  };
  const fetchData = async params => {
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };
  return (
    <>
      <Table
        uniqueKey="useStorage-table"
        className="cc"
        style={{ color: '#333' }}
        columns={columns}
        fetchData={fetchData}
        refreshIndex={refreshIndex}
        recordCurrent
        showRefreshButton
        isUseStorage
        operation={
          <Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
            手动刷新
          </Button>
        }
        search={search}
        primaryKey="InstanceId"
      />
    </>
  );
};

export default Demo;
```

## 列属性：控制列的展示与隐藏

```tsx preview
import React, { useState, useEffect } from 'react';
import Table from '@ali/cnd-table';
import axios from 'axios';
import { get } from 'lodash';
import { Button, Badge, Card } from '@alicloud/console-components';
import '@alicloud/console-components/dist/xconsole.css';

const Demo = () => {
  const [showTimeColumn, setShowTimeColumn] = useState(true);
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setDataSource([
        {
          InstanceName: '实例1',
          Address: '127.0.0.1',
          CreationTime: '2025-02-11 10:36:03',
          Status: '运行中',
        },
        {
          InstanceName: '实例2',
          Address: '127.0.0.2',
          CreationTime: '2025-02-11 12:36:03',
          Status: '运行中',
        },
      ]);
      setLoading(false);
    }, 5000);
  }, []);

  const columns = [
    {
      key: 'InstanceName',
      title: '实例名称',
      dataIndex: 'InstanceName',
      width: 300,
    },
    {
      key: 'Address',
      title: 'IP地址',
      dataIndex: 'Address',
      width: 300,
    },
    {
      key: 'CreationTime',
      title: '创建时间',
      width: 300,
      dataIndex: 'CreationTime',
      disabled: true,
    },
    {
      key: 'Status',
      title: '状态',
      dataIndex: 'Status',
      width: 300,
    },
  ];

  const fetchData = async params => {
    const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
      params,
    });
    return {
      data: get(res, 'data.data.Instances.Instance'),
      total: get(res, 'data.data.TotalCount'),
    };
  };

  return (
    <div>
      <Card
        title="方案一：对于通过 columns 设置列，可在columns子项中添加disabled属性，设置列的展示隐藏"
        contentHeight="auto"
        style={{ marginBottom: 10 }}
      >
        <Table loading={loading} columns={columns} dataSource={dataSource} primaryKey="InstanceId" />
      </Card>
      <Card title="方案二：对于通过 Table.Column 设置列，可以根据条件表达式设置列的展示隐藏" contentHeight="auto">
        <Button type="primary" onClick={() => setShowTimeColumn(!showTimeColumn)}>
          {showTimeColumn ? '隐藏创建时间' : '显示创建时间'}
        </Button>
        <Table fetchData={fetchData}>
          <Table.Column title="实例名称" dataIndex="InstanceName" width={300} />
          <Table.Column title="IP地址" dataIndex="Address" width={300} />
          {showTimeColumn && <Table.Column title="创建时间" dataIndex="CreationTime" width={300} />}
          <Table.Column title="状态" dataIndex="Status" width={300} />
        </Table>
      </Card>
    </div>
  );
};

export default Demo;
```

## API

> 继承 [@alicloud/console-components-table](https://xconsole.aliyun-inc.com/nexconsole/component_web/wyqgmh#/apis) 组件的 API

| 名称              | 类型                                                         | 说明                                                                                                        | 默认值 |
| ----------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------ |
| fetchData         | (data: [IParams](#iparams)) => Promise<[IResult](#iresult)\> | 请求数据源的方法, 入参信息包含搜索条件和分页信息等                                                          | -      |
| dataSource        | any[]                                                         | 数据源<br />-当使用 fetchData 时，该属性无效<br />-使用数据源渲染时，如需做分页处理，需要通过pagination自定义，loading也需要通过loading字段自定义                                                                     | -      |
| refreshIndex      | number                                                       | 触发刷新操作,重新请求fetchData                                                                              | 0      |
| recordCurrent     | boolean                                                      | 仅 refreshIndex 设置后生效，默认为false， refreshIndex 更新后，当前页会到第一页，设置为true后，停留在当前页 | false  |
| showRefreshButton | boolean                                                      | 是否显示刷新按钮                                                                                            | false  |
| search            | [IRcSearchProps](#ircsearchprops)                            |                                                                                                             | -      |
| columns           | ColumnProps[]                                                | 列描述数据对象，是 columns 中的一项，继承Table.Column的 API                                                 | -      |
|operation         | ReactNode  | 自定义左上角内容 | - |
|secondaryOperation         | ReactNode  | 自定义右上角内容 | - |
| isShowLoading | boolean | 数据刷新时是否需要展示loading <br />- showRefreshButton为true，使用table内置刷新按钮时不生效<br />- 开启轮询后，轮询中数据刷新时loading是否展示根据loop中showLoading设置，不受该参数控制<br />- 仅控制非轮询状态下数据刷新时loading是否展示 | true |
| loop | Object | 接口是否轮询，以及轮询时间设置，轮询时是否展示loading | { enable: false, time: 10000, showLoading: false } |
|isUseStorage| boolean| 是否使用搜索栏和分页器的记忆能力| false |
|uniqueKey| string| 配合 isUseStorage 字段使用，标识 table 对应的的唯一 key，默认取 columns 的 key 以 - 拼接而成| - |
|useLocalStorage| boolean| 配合 isUseStorage 字段使用，是否使用localStorge存储当前搜索栏和分页数据，默认使用sessionStorage| false |


### IParams

```
interface IParams {
  current?: number;
  pageSize?: number;
  [key: string]: any;
}
```

### IResult

```
interface IResult {
  data: any[];
  total?: number;
}
```

### IRcSearchProps

> 继承 [@alicloud/console-components-search](https://xconsole.aliyun-inc.com/nexconsole/modules/rc-search#api) 组件的 API

| 名称                     | 类型                    | 说明                                               | 默认值 |
| ------------------------ | ----------------------- | -------------------------------------------------- | ------ |
| options                  | IRcSearchOptionsProps[] | 请求数据源的方法, 入参信息包含搜索条件和分页信息等 | -      |
| placeholder              | string                  | 默认placeholder                                    | -      |
| children                 | ReactNode               | 自定义内容                                         | -      |
| beforeFilterRender       | ReactNode               | filter 之前的 插槽                                 | -      |
| afterFilterRender        | ReactNode               | filter 之后的 插槽                                 | -      |
| onlySupportOne           | boolean                 | 是否仅支持单选                                     | -      |
| defaultDataIndex         | string                  | 默认搜索类别                                       | -      |
| defaultSelectedDataIndex | string                  | 默认选中的类别                                     | -      |

### IRcSearchOptionsProps

| 名称          | 类型   | 说明                                                                                                             | 默认值 |
| ------------- | ------ | ---------------------------------------------------------------------------------------------------------------- | ------ |
| label         | string | 字段展示名称                                                                                                     | -      |
| dataIndex     | string | 字段表单key                                                                                                      | -      |
| defaultValue  | any    | 默认值                                                                                                           | -      |
| template      | string | 字段，交互组件类型（input/select/multiple）<br />- input：搜索框<br />- select：单选<br />- multiple：多选<br /> | -      |
| templateProps | any    | 定义传给表单项的属性 templateProps.placeholder templateProps.dataSource                                          | -      |
| groupName     | string | 分组                                                                                                             | -      |