如何使用react js和antd添加两个静态行

Question

我目前正在使用 antd 表 我知道如何在 antd 表中添加一个静态行 现在我想将两个数据分组到静态行中，例如一个有工作的数据应该在工作下方，一个有发票的数据应该在发票下方，如下所示

我目前是这样做的：

const columns = [
        {
          title: "Date Due",
          dataIndex: "date_due",
          sorter: (a, b) => {
            return a?.date_due?.localeCompare(b?.date_due);
          },
    
          children: [
            {
              title: "Jobs",
              dataIndex: "job",
              key: "date_scheduled",
              render: (text, record) => (
                  record?.date_scheduled
              ),
            },
          ],
  children: [
    {
      title: "Invoice",
      dataIndex: "invoice",
      key: "date_scheduled",
      render: (text, record) => record?.date_scheduled,
    },
  ],
          sorter: (a, b) => {
            return a?.date_scheduled?.localeCompare(b?.date_scheduled);
          },
        },
        {
          title: "Status",
          children: [
            {
              dataIndex: "status",
              key: "status",
              render: (text, record) => (
                  record?.status
              ),
            },
          ],
          sorter: (a, b) => {
            return a?.status?.localeCompare(b?.status);
          },
        },
        {
          title: "Amount",
          children: [
            {
              dataIndex: "amount",
              key: "amount_due",
              render: (text, record) => (
                  record?.amount_due
              ),
            },
          ],
          sorter: (a, b) => {
            return a?.amount_due?.localeCompare(b?.amount_due);
          },
        },
        {
          title: "Actions",
          children: [
            {
              dataIndex: "action",
              key: "action",
              render: (text, record) => (
                <>
                <Button
                  className="default-btn"
                  icon={<CloseOutlined />}
                  style={{
                    backgroundColor: "#D15B47",
                    color: "#ffffff",
                    borderColor: "#87B87F",
                    borderRadius: "10px",
                  }}
                />
              </>
              ),
            },
          ],
        },
      ];

但是这样我只能得到一个像这样的静态行 最后的孩子在这里显示 我也无法添加没有工作添加到帐单中，并且没有发票添加到帐单中，如果没有任何信息

那么任何人都可以帮助我解决这个问题吗？ 先感谢您