antd table component属性

Ant Design的Table组件是一个强大的表格展示工具，它有许多内置的属性用于定制化显示效果、数据处理以及交互。以下是几个重要的属性：

1. `columns`：列配置数组，每个元素包含字段名、标题、渲染函数等信息。例如：

   const columns = [
     { title: '姓名', dataIndex: 'name' },
     { title: '年龄', dataIndex: 'age', render: (text) => <span>{text + '岁'</span> },
   ];

2. `dataSource`：数据源数组，通常是从服务器获取的数据或本地存储的数据。

3. `pagination`：分页配置，包括总页数、当前页、每页大小等，支持多种分页模式。

4. `rowKey`：每一行的唯一标识，用于跟踪行的状态或排序。

5. `sorter` 和 `onSort`：排序功能，可以设置默认排序规则并提供回调来处理用户自定义排序。

6. `filter` 和 `onFilter`：过滤功能，用户可以输入关键词进行筛选，同样有对应的回调函数。

7. `loading`：加载状态，当数据正在加载时，可以展示一个占位符或加载动画。

8. `expandedRowKeys` 和 `onExpandedRowsChange`：展开行的管理，用于控制哪些行会被展开。

相关问题

antd table component.body

Ant Design (antd) Table 组件中的 `body` 属性通常用于配置表格数据的展示部分，它是一个数组，每个元素对应表格的一行数据。这个数组的结构需要与表头（header）中的列定义相匹配，通常是包含每个列对应的值的对象。

例如，如果有一个包含姓名、年龄和职位的表头：

const columns = [
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Position', dataIndex: 'position' },
];

那么 `body` 部分的数据应该像这样：

const data = [
  { name: 'John Doe', age: 25, position: 'Developer' },
  { name: 'Jane Smith', age: 30, position: 'Designer' },
  // 更多行...
];

你可以使用 `map` 函数来遍历 `data` 并生成表格的每一行：

<Table dataSource={data} columns={columns} />

antd table component.body绑定方法

Ant Design (antd) Table 组件的 `.body` 属性通常用于配置表格数据单元格的渲染逻辑。当你将一个函数或方法绑定到 `.body` 上时，这个方法会在每次渲染表格行时被调用，并接收当前行的数据作为参数。你可以在这个方法中返回自定义的 HTML 结构、组件或者其他动态内容。

例如，假设有一个简单的用户对象数组，你想展示每个用户的姓名和年龄：

import { Table } from 'antd';

const data = [
  {
    key: '1',
    name: 'John Doe',
    age: 28,
  },
  // 更多用户对象...
];

function formatBody(record) {
  return (
    <p>Name: {record.name}, Age: {record.age}</p>
  );
}

ReactDOM.render(
  <Table dataSource={data} columns={['Name', 'Age']} rowBody={formatBody} />,
  document.getElementById('container'),
);

在这个例子中，`formatBody` 方法会被应用到每一行上，生成包含用户名和年龄的具体文本。