Transpose (rotate) table column headers to rows in Ant Design React framework

Question

I'm trying to create a table using the Ant Design React UI framework where the rows set the table titles rather than the columns. In other words, I'm trying to trying to transpose the default table.

By default, this is how a table looks using the framework:

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

Code to create above table (see "Basic Usage table" in 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);

But instead I'd like to transpose the table so it looks as follows:

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

Where in the table API is this possible, if at all? Any guidance is appreciated.

Answer 1

I don't think antd provide an api to transpose the table. But if your table is simple and you don't want features like sorting, filtering..etc, then you can take a look at antd Description List.