react antd table 表头自定义
在 Ant Design 的 React 组件库中，你可以使用 Ant Design Table 组件，并通过 `columns` 属性来定义表格的列。如果你想要自定义表头，可以在 `columns` 中使用 `title` 属性，该属性可以接受一个 React 组件来实现自定义表头。
以下是一个简单的示例，演示如何使用 Ant Design Table 自定义表头：
首先，确保你的项目中已经安装了 Ant Design 相关的库：
```bash
npm install antd
```
然后，你可以在你的 React 组件中使用 Ant Design 的 Table 组件，并通过 `columns` 属性定义表格的列，包括自定义表头：
```jsxant design
import React from 'react';
import { Table } from 'antd';
const columns = [
  {
    title: '自定义表头1',
    dataIndex: 'column1',
    key: 'column1',
  },
  {
    title: '自定义表头2',
    dataIndex: 'column2',
    key: 'column2',
  },
  {
    title: '操作', // 这里是自定义表头
    key: 'action',
    render: () => (
      <span>
        <a href="#">编辑</a>
        <span style={{ margin: '0 8px' }}>|</span>
        <a href="#">删除</a>
      </span>
    ),
  },
];
const data = [
  {
    key: '1',
    column1: '数据1',
    column2: '数据2',
  },
  // ... 其他数据行
];
const CustomTable = () => {
  return <Table columns={columns} dataSource={data} />;
};
export default CustomTable;
```
在上面的例子中，通过在 `columns` 数组中定义一个包含 `title` 和 `render` 属性的对象，实现了自定义表头。`render` 属性接受一个函数，返回一个 React 元素，这里返回的是包含编辑和删除链接的 `<span>` 元素。
你可以根据实际需求自定义表头内容，利用 `render` 函数提供灵活性，以满足不同的设计和交互要求。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。