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

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

### 基础形态
```tsx
import React, { useState } from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';

const getDataSource = () => {
  const result: any[] = [];
  for (let i = 0; i < 5; i++) {
    result.push({
      id: 100306660940 + i,
      status: i % 2 === 0 ? '运行中' : '停用',
      type: '专用网络',
      title: '可以通过 expandedRowRender 额外渲染行',
    });
  }
  return result;
};

const render = () => {
  return (
    &lt;Actions&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
    &lt;/Actions&gt;
  );
};

export default () => {
  const [dataSource, setDataSource] = useState(getDataSource());

  const onFilter = (filterParams) => {
    let ds = getDataSource();
    Object.keys(filterParams).forEach((key) => {
      const { selectedKeys } = filterParams[key];
      if (selectedKeys.length) {
        ds = ds.filter((record) => {
          return selectedKeys.some((value) => {
            return record[key].indexOf(value) > -1;
          });
        });
      }
    });
    setDataSource(ds);
  };

  return (
    &lt;Table onFilter={onFilter} dataSource={dataSource}&gt;
      &lt;Table.Column title="实例ID/名称" dataIndex="id" width={200} /&gt;
      <Table.Column
        filters={[
          {
            label: '运行中',
            value: '运行中',
          },
          {
            label: '停用',
            value: '停用',
          },
        ]}
        title="状态"
        dataIndex="status"
      />
      &lt;Table.Column title="网络类型" dataIndex="type" /&gt;
      &lt;Table.Column title="操作" cell={render} width={200} /&gt;
    &lt;/Table&gt;
  );
};

export const meta = {
  title: '默认表格',
  describe: '',
};

```
```tsx
import React, { useState } from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';

const getDataSource = () => {
  const result: any[] = [];
  for (let i = 0; i < 5; i++) {
    result.push({
      id: 100306660940 + i,
      status: i % 2 === 0 ? '运行中' : '停用',
      type: '专用网络',
      title: '可以通过 expandedRowRender 额外渲染行',
    });
  }
  return result;
};

const onChange = function (...args) {
  console.log(...args);
};

const render = () => {
  return (
    &lt;Actions&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
    &lt;/Actions&gt;
  );
};

export default () => {
  const [dataSource, setDataSource] = useState(getDataSource());

  const onFilter = (filterParams) => {
    let ds = getDataSource();
    Object.keys(filterParams).forEach((key) => {
      const { selectedKeys } = filterParams[key];
      if (selectedKeys.length) {
        ds = ds.filter((record) => {
          return selectedKeys.some((value) => {
            return record[key].indexOf(value) > -1;
          });
        });
      }
    });
    setDataSource(ds);
  };

  return (
    <Table
      onFilter={onFilter}
      dataSource={dataSource}
      rowSelection={{
        onChange,
        mode: 'multiple',
      }}
    >
      &lt;Table.Column title="实例ID/名称" dataIndex="id" width={200} /&gt;
      <Table.Column
        filters={[
          {
            label: '运行中',
            value: '运行中',
          },
          {
            label: '停用',
            value: '停用',
          },
        ]}
        title="状态"
        dataIndex="status"
      />
      &lt;Table.Column title="网络类型" dataIndex="type" /&gt;
      &lt;Table.Column title="操作" cell={render} width={200} /&gt;
    &lt;/Table&gt;
  );
};

export const meta = {
  title: '默认多选表格',
  describe: '',
};

```
```tsx
import React, { useState } from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';

const getDataSource = () => {
  const result: any[] = [];
  for (let i = 0; i < 5; i++) {
    result.push({
      id: 100306660940 + i,
      status: i % 2 === 0 ? '运行中' : '停用',
      type: '专用网络',
      title: '可以通过 expandedRowRender 额外渲染行',
    });
  }
  return result;
};

const render = () => {
  return (
    &lt;Actions&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
    &lt;/Actions&gt;
  );
};

const expandedStyle = {
  borderWidth: 0,
  borderStyle: 'solid',
  borderColor: '#e5e5e5',
  padding: '16px',
  background: '#ffffff',
};

const centerStyle = {
  height: '128px',
  borderRadius: '4px',
  lineHeight: '128px',
  background: '#f6f6f6',
  textAlign: 'center',
} as const;

export default () => {
  const [dataSource] = useState(getDataSource());

  return (
    <Table
      dataSource={dataSource}
      expandedRowRender={() => (
        &lt;div style={expandedStyle}&gt;
          &lt;div style={centerStyle}&gt;Content Placeholder&lt;/div&gt;
        &lt;/div&gt;
      )}
    >
      &lt;Table.Column title="实例ID/名称" dataIndex="id" width={200} /&gt;
      &lt;Table.Column title="状态" dataIndex="status" /&gt;
      &lt;Table.Column title="网络类型" dataIndex="type" /&gt;
      &lt;Table.Column title="操作" cell={render} width={200} /&gt;
    &lt;/Table&gt;
  );
};

export const meta = {
  title: '可展开表格',
  describe: '可以通过 isTree 渲染树状结构表格',
};

```
```tsx
import React from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';

const data = [
  {
    id: 1,
    name: '实例名称',
    status: '成功',
    type: '专有网络',
    children: [
      {
        id: 11,
        name: '实例名称',
        status: '成功',
        type: '专有网络',
      },
      {
        id: 12,
        name: '实例名称',
        status: '成功',
        type: '专有网络',
        children: [
          {
            id: 121,
            name: '实例名称',
            status: '失败',
            type: '专有网络',
          },
        ],
      },
      {
        id: 13,
        name: '实例名称',
        status: '失败',
        type: '专有网络',
        children: [
          {
            id: 131,
            name: '实例名称',
            status: '失败',
            type: '专有网络',
            children: [
              {
                id: 1311,
                name: '实例名称',
                status: '失败',
                type: '专有网络',
              },
              {
                id: 1312,
                name: '实例名称',
                status: '失败',
                type: '专有网络',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: '实例名称',
    status: '失败',
    type: '专有网络',
  },
];

const render = () => {
  return (
    &lt;Actions&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
      &lt;LinkButton onClick={() =&gt; {}}>
        操作项
      &lt;/LinkButton&gt;
    &lt;/Actions&gt;
  );
};

export default () => {
  return (
    &lt;Table dataSource={data} primaryKey="id" isTree&gt;
      &lt;Table.Column title="实例ID/名称" dataIndex="name" width={200} /&gt;
      &lt;Table.Column title="状态" dataIndex="status" /&gt;
      &lt;Table.Column title="网络类型" dataIndex="type" /&gt;
      &lt;Table.Column title="操作" cell={render} width={200} /&gt;
    &lt;/Table&gt;
  );
};

export const meta = {
  title: '树状表格',
  describe: '',
};

```
```tsx
import React from 'react';
import { Table } from '@alicloud/console-components';

export default () => {
  return (
    <Table emptyContent={(
      &lt;div&gt;暂无内容，&lt;a href="" style={{ color: '#0064c8' }}&gt;文字链接&lt;/a&gt;&lt;/div&gt;
    )}
    >
      &lt;Table.Column title="实例ID/名称" dataIndex="name" width={200} /&gt;
      &lt;Table.Column title="状态" dataIndex="status" /&gt;
      &lt;Table.Column title="网络类型" dataIndex="type" /&gt;
      &lt;Table.Column title="操作" width={200} /&gt;
    &lt;/Table&gt;
  );
};

export const meta = {
  title: '空状态表格',
  describe: '',
};

```
### 选择可控
```tsx
```
### 行列合并与锁列
```tsx
```
### 行列合并
```tsx
```
### 定制列
```tsx
```
### 十字参考轴
```tsx
```
### 增删改查
```tsx
```
### 自定义 Loading 组件
```tsx
```
### 拖拽排序
```tsx
```
### 可编辑的表格
```tsx
```
### 可展开
```tsx
```
### 可展开-复杂
```tsx
```
### 排序与过滤
```tsx
```
### 固定表头
```tsx
```
### 自定义Row/Cell
```tsx
```
### 锁列
```tsx
```
### 混合模式
```tsx
```
### 重设列的尺寸
```tsx
```
### 选择框属性
```tsx
```
### 可选择
```tsx
```
### 样式
```tsx
```
### 虚拟滚动
```tsx
```
### 扩展
```tsx
```
### 无障碍
```tsx
```