how to render multiple antd tables?

Question

I need to render multiple tables instead of one table with many columns.

Currently the table looks like,

which renders data into multiple columns. I need the data to be rendered into two different tables like,

The code crashes for some reason while trying to render two tables.

Code:

function App() {
  const data = [
    {
      key: "1",
      rollNo: "16CS21",
      name: "Ronald",
      rank: 2
    },
    {
      key: "2",
      rollNo: "16CS72",
      name: "John",
      rank: 4
    }
  ];
  return (
    <div>
      {data.map((d) => (
        <DetailComponent data={d} />
      ))}
    </div>
  );
}

Table rendering Component:

function DetailComponent({ data }) {
      return (
        <div>
          <Table
            dataSource={data}
            pagination={false}
            bordered={false}
            style={{ height: "0px" }}
          >
            <Column title="Roll No" dataIndex="rollNo" key="rollNo" width="100px" />
            <Column title="Name" dataIndex="name" key="name" />
            <Column title="rank" key="rank" dataIndex="rank" />
            <Column
              title="Action"
              key="action"
              render={() => (
                <Space size="middle">
                  <EditTwoTone style={{ fontSize: "18px" }} />
                  <DeleteTwoTone style={{ fontSize: "18px" }} twoToneColor="red" />
                </Space>
              )}
            />
          </Table>
        </div>
      );
    }

CodeSanbox link : https://codesandbox.io/s/tree-data-antd-4-21-0-forked-xxhks9?file=/demo.js

Answer 1

ok i see two issues.

1. unique key prop issue
2. remove round brackets like so in map function

data.map((d)=>dataComponent)

** Edit **

it seems to me that your table component takes list of objects as data input while you're passing single object. try converting object to array of obejcts like so:

[].concat(d)

edit

solution mentioned above seems to fix the issue as shown

right now both tables are overlaping on each other. which you can fix.

make sure to mark the answer if it helped.