Search code examples
reactjsdatatablesantdant-design-pro

Show Ant Design Table's data Vertically


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

by default ant-design tables are shown like this:

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

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 

Any guidance is welcomed!


Solution

  • 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 https://ant.design/components/descriptions/ or you can use List https://ant.design/components/list/#header