reactjs - 在 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 documentation 中的“基本用法表”):

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。但是，如果您的表格很简单，并且您不需要排序、过滤等功能，那么您可以看看antd Description List .