具有树数据分组行的表

Question

请考虑以下分组数据：

[
    {
        field: "item",
        value: "IT282",
        rows: [
            {
                field: "order",
                value: "200",
                rows: [
                    {
                        order: "200",
                        type: "production",
                        qty: 200,
                        item: "IT282"
                    },
                    { order: "200", type: "stock", qty: 30, item: "IT282" }
                ]
            },
            {
                field: "order",
                value: "210",
                rows: [
                    {
                        order: "210",
                        type: "production",
                        qty: 300,
                        item: "IT282"
                    },
                    { order: "210", type: "stock", qty: 130, item: "IT282" }
                ]
            }
        ]
    },
    {
        field: "item",
        value: "IT283",
        rows: [
            {
                field: "order",
                value: "200",
                rows: [
                    {
                        order: "200",
                        type: "production",
                        qty: 90,
                        item: "IT283"
                    },
                    {
                        order: "200",
                        type: "production",
                        qty: 110,
                        item: "IT283"
                    }
                ]
            },
            {
                field: "order",
                value: "210",
                rows: [
                    {
                        order: "210",
                        type: "production",
                        qty: 190,
                        item: "IT283"
                    },
                    {
                        order: "210",
                        type: "production",
                        qty: 210,
                        item: "IT283"
                    }
                ]
            }
        ]
    },
    {
        field: "item",
        value: "IT102",
        rows: [
            {
                field: "order",
                value: "200",
                rows: [
                    { order: "200", type: "customer", qty: 80, item: "IT102" },
                    { order: "200", type: "customer", qty: 130, item: "IT102" }
                ]
            },
            {
                field: "order",
                value: "210",
                rows: [
                    { order: "210", type: "customer", qty: 180, item: "IT102" },
                    { order: "210", type: "customer", qty: 230, item: "IT102" }
                ]
            }
        ]
    },
    {
        field: "item",
        value: "IT233",
        rows: [
            {
                field: "order",
                value: "200",
                rows: [
                    { order: "200", type: "production", qty: 45, item: "IT233" }
                ]
            },
            {
                field: "order",
                value: "210",
                rows: [
                    {
                        order: "210",
                        type: "production",
                        qty: 145,
                        item: "IT233"
                    }
                ]
            }
        ]
    }
];

考虑到分组后的数据项应分为几行并打印出项目数，我该如何递归地显示表中的所有数据。

ITEM        ORDER  TYPE        QTY     
IT282 (2)   200    PRODUCTION  200
            210    PRODUCTION  300
IT283 (2)   200    PRODUCTION  90
            210    PRODUCTION  1100

这是我当前的代码：

  getRow = (row, rowSpan, column) => {
    // Plot the row, with rowSpan in the given field
    let columns = Object.keys(row).map(key => {
        if (key === column) return (<td rowSpan={rowSpan}>row[key] ({rowSpan})</td>);
        else return (<td>row[key]</td>);

    });

    return <td>{columns</td>

  }

  getRows = (rows, rowSpan) => {
    let ret = [];

    if (!rowSpan) rowSpan = [];

    rows.map((row, idx) => {
      if (row.groupedField) {

        rowSpan.push({
          field: row.groupedField,
          value: row.groupedValue,
          size: row.rows.length
        });

        ret = ret.concat(this.getRows(row.rows, rowSpan));
      } 
      else {
        let actual = rowSpan[rowSpan.length - 1];
        let val = rows[actual.field];

        let span = 1;
        if (val === actual.value) {
             span = actual.size;
             rowSpan.pop();
        }

        ret.push(this.getRow(row, span, actualField));
      }
    });

    return ret;
  };