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

创建上表的代码（参见＆＃34;基本用法表＆＃34;在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提供了用于转置table的api。但是，如果您的table很简单，并且不想使用诸如排序，过滤等功能，那么可以看看antd Description List。

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

1 个答案: