在 Ant Design React 框架中将表列标题转置（旋转）到行

Question

我正在尝试使用 Ant Design React UI 框架创建一个表格，其中行设置表格标题而不是列。换句话说，我试图转置默认表。

默认情况下，这是使用框架的表的外观：

 First Name | Last Name | Date of Birth | Address
 ----------------------------------------------------
 Fred       | Smith     | 1/1/1980      | 123 Main St
 ----------------------------------------------------
 James      | Williams  | 6/30/1985     | 456 Main St

创建上表的代码（参见Ant Design 文档中的“基本用法表” ）：

import { Table } from 'antd';

const columns = [{
  title: 'First Name',
  dataIndex: 'firstName',
  key: 'firstName',
}, {
  title: 'Last Name',
  dataIndex: 'lastName',
  key: 'lastName',
}, {
  title: 'Date of Birth',
  dataIndex: 'dob',
  key: 'dob',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}];

const data = [{
  key: '1',
  firstName: 'Fred',
  lastName: 'Smith ',
  dob: '1/1/1980',
  address: '123 Main St',
}, {
  key: '2',
  firstName: 'James',
  lastName: 'Williams ',
  dob: '6/30/1985',
  address: '456 Main St',
}];

ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);

但相反，我想转置表格，使其看起来如下：

                ------------- -------------
First Name     | Fred        | James
-------------------------------------------
Last Name      | Smith       | Williams
-------------------------------------------
Date of Birth  | 1/1/1980    | 6/30/185
-------------------------------------------
Address        | 123 Main St | 456 Main St

如果有的话，表 API 中的哪个位置是可能的？任何指导表示赞赏。

Answer 1

我不认为antd提供 api 来转置table. 但如果你的内容table很简单，并且不需要排序、过滤等功能，那么你可以看看antd Description List.