typescript - Display Tree Data in Table with Material-UI in Reactjs

Question

I am currently working on a small project, in this project I use a tree structure Table as shown!

enter image description here

As in the picture is the Table in the old project, I use the Ant Design library (with code support on the homepage), so it is hardly difficult to create such a Table. The code form is as follows:

const columns = [
  {
    title: '', dataIndex: 'name', key: 'name', width: '20%'
  },
  {
    title: '', dataIndex: 'User1', key: 'User1', width: '10%',
  },
  {
    title: '', dataIndex: 'User2', width: '10%', key: 'User2',
  }
];

const data = [
  {
    key: 1,
    name: <h3 style={{ fontSize: "16px", color: "white" }}>Module 1</h3>,
    children: [],
  },
  {
    key: 2,
    name: <h3 style={{ fontSize: "16px", color: "white", }} className="level0">Module 2</h3>,
    children: [
      {
        key: 21,
        name: <p style={{ fontSize: "14px", color: "white" }}>Function name</p>,
        User1: <p style={{ fontSize: "14px", color: "white" }}>User 1</p>,
        User2: <p style={{ fontSize: "14px", color: "white" }}>User 2</p>,
        children: [
          {
            key: 211,
            name: <p style={{ fontWeight: "bold" }}>Function 1</p>,
            User1: '',
            User2: '',
            children: [
              {
                key: 2111,
                name: <p>Feature 1</p>,
                User1: <Checkbox />,
                User2: <Checkbox />,
              }
            ],
          },
          {
            key: 221,
            name: <p style={{ fontWeight: "bold" }}> Function 2</p>,
            User1: '',
            User2: '',
            children: [
              {
                key: 2211,
                name: <p>Feature 1</p>,
                User1: <Checkbox />,
                User2: <Checkbox />,

              }
            ]
          }
        ],
      },
    ],
  },
];

return (
      <Table
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 5, hideOnSinglePage: true }}
      >
      </Table>
);
}

But in the Material-UI, I don't know how to create a Table like that! I've only been learning ReactJS for a month and have just used this library for the first time.

Could you show me how to do it? Thanks for reading!

(English isn’t my first language, so please excuse my mistakes!)

Answer 1

等待大神答复