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

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

## 基本使用
```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={&lt;Button type="primary"&gt;自定义左上角按钮&lt;/Button&gt;}
      secondaryOperation={&lt;Button&gt;自定义右上角按钮&lt;/Button&gt;}
    />
  );
};

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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
    />
  );
};

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={&lt;Button type="primary"&gt;创建应用&lt;/Button&gt;}
    />
  );
};

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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
      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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
      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: &lt;Button&gt;自定义内容&lt;/Button&gt;,
    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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
      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: &lt;Button&gt;自定义内容&lt;/Button&gt;,
    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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
      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: &lt;Button&gt;自定义内容&lt;/Button&gt;,
    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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
      search={search}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          &lt;Badge count={selectedRowKeys.length}&gt;
            &lt;Button disabled={selectedRowKeys.length === 0}&gt;Delete&lt;/Button&gt;
          &lt;/Badge&gt;
        );
      }}
    />
  );
};

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: &lt;Button&gt;自定义内容&lt;/Button&gt;,
    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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
      search={search}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          &lt;Badge count={selectedRowKeys.length}&gt;
            &lt;Button disabled={selectedRowKeys.length === 0}&gt;Delete&lt;/Button&gt;
          &lt;/Badge&gt;
        );
      }}
    />
  );
};

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: &lt;Button&gt;自定义内容&lt;/Button&gt;,
    beforeFilterRender: &lt;Button&gt;beforeFilterRender&lt;/Button&gt;,
    afterFilterRender: &lt;Button&gt;afterFilterRender&lt;/Button&gt;,
    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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
      search={search}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          &lt;Badge count={selectedRowKeys.length}&gt;
            &lt;Button disabled={selectedRowKeys.length === 0}&gt;Delete&lt;/Button&gt;
          &lt;/Badge&gt;
        );
      }}
    />
  );
};

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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
      search={search}
      pagination={false}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          &lt;Badge count={selectedRowKeys.length}&gt;
            &lt;Button disabled={selectedRowKeys.length === 0}&gt;Delete&lt;/Button&gt;
          &lt;/Badge&gt;
        );
      }}
    />
  );
};

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={
        &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
          手动刷新
        &lt;/Button&gt;
      }
      search={search}
      pagination={false}
      primaryKey="InstanceId"
      selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
        return (
          &lt;Badge count={selectedRowKeys.length}&gt;
            &lt;Button disabled={selectedRowKeys.length === 0}&gt;Delete&lt;/Button&gt;
          &lt;/Badge&gt;
        );
      }}
      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 (
    &lt;&gt;
      <Table
        uniqueKey="useStorage-table"
        className="cc"
        style={{ color: '#333' }}
        columns={columns}
        fetchData={fetchData}
        refreshIndex={refreshIndex}
        recordCurrent
        showRefreshButton
        isUseStorage
        operation={
          &lt;Button type="primary" onClick={() =&gt; setRefreshIndex(Date.now())}>
            手动刷新
          &lt;/Button&gt;
        }
        search={search}
        primaryKey="InstanceId"
      />
    &lt;/&gt;
  );
};

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

export default Demo;
```