ReactJS - Hiển thị dữ liệu dạng Tree Data trong Table với Material-UI

Chào mọi người, em hiện tại đang làm một dự án nhỏ, trong dự án này có sử dụng một Table dạng cấu trúc cây như hình minh họa!

Như trong ảnh là ở dự án cũ do em sử dụng thư viện “Ant Design” (có hỗ trợ code trên trang chủ) nên hầu như không khó để tạo ra một Table như vậy. Dạng code như sau:

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 />,

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

Nhưng ở thư viện Material-UI thì em không biết cách để tạo ra một Table dạng y như vậy!
Em mới học ReactJS được 1 tháng, cũng mới sử dụng thư viện này lần đầu. Mọi người có cách nào giúp em với ạ!

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?