Javascript 当某些列缺少数据时在表中创建行

我有一个javascript对象，看起来类似于：

    const relevantTags = {
        "tags": {
            date: {
                day: "day",
                month: "month",
                year: "year"
            },
            time: {
                hours: "hours",
                minutes: "minutes"
            },
            adm: {
                admId: "adm-id"
            },
            document: {
                documentId: "document-id",
                documentGeneratedBy: "document-generated-by",
                approvalStatus: "approval-status"
            },
            department: {
                departmentName: "department-name"
            }
        }
}

date  time    adm     document              department

day   hours   adm-id  document-id           department-name
month minutes         document-generated-by
year                  approval-status

这里的键

date

、

time

、

adm

、

document

和

department

是表标题，每个表标题对象的值是列值。例如，当列标题为

document

时，其列的一个值为

由

生成的文档。类似地，当列标题为

部门

时，其中一个列值为

部门名称

。可以看出，某些列的值比其他列的值多

我试图从这个javascript对象生成一个表

我生成的表格标题如下：

 const tableHead = (
  <thead>
    <tr>
      {Object.keys(relevantTags.tags).map(pts => (
        <th scope="col">{pts}</th>
      ))}
    </tr>
  </thead>
);

---

正如@trixn所建议的，flexbox更适合这种情况

您可以采用以下方法：

 const flexHead = (
    <div className="d-flex flex-row flex-wrap">
        {Object.keys(relevantTags.tags).map(pts => (
        <div className="p-d-1">
            <span className="uppercase muted small">{pts}</span>
            <div className="d-flex flex-column">
            {Object.values(relevantTags[pts]).map(dts => (
                <div className="p-d-1">
                <Tag onClick={this.onTagSelection} color="blue">
                    {dts}
                </Tag>
                </div>
            ))}
            </div>
        </div>
        ))}
    </div>
    );

然后可以在渲染方法中直接使用

flexHead

。对于我创建的模拟，结果是这样的：

---

如果该列不存在值，您是否只想呈现空单元格？我认为您呈现的数据不适合呈现为表。表是基于行的，因此每一行的每一列都有一个值。这里的列表更像是一个不共享公共属性的列表集合。@trixn是的，只想呈现空单元格。请添加一个示例，说明在上面的标记示例中，表的外观如何？我明白了。正如我所说的，这不是一个数据结构，您将以表的形式呈现。在表中，每一行通常共享公共属性，其中每个属性都有自己的列。在您的示例中，这些行没有任何共同点。您可以使用flexbox或css grid之类的工具来显示彼此相邻的多个列表，以实现类似的效果，但我不会使用表格。

 const flexHead = (
    <div className="d-flex flex-row flex-wrap">
        {Object.keys(relevantTags.tags).map(pts => (
        <div className="p-d-1">
            <span className="uppercase muted small">{pts}</span>
            <div className="d-flex flex-column">
            {Object.values(relevantTags[pts]).map(dts => (
                <div className="p-d-1">
                <Tag onClick={this.onTagSelection} color="blue">
                    {dts}
                </Tag>
                </div>
            ))}
            </div>
        </div>
        ))}
    </div>
    );

        .d-flex {
            display: flex!important;
        }

        .flex-column {
            -webkit-box-orient: vertical!important;
            -webkit-box-direction: normal!important;
            -ms-flex-direction: column!important;
            flex-direction: column!important;
        }

        .flex-row {
            -webkit-box-orient: horizontal!important;
            -webkit-box-direction: normal!important;
            -ms-flex-direction: row!important;
            flex-direction: row!important;
        }

        .flex-wrap {
            -ms-flex-wrap: wrap!important;
            flex-wrap: wrap!important;
        }

        .p-d-1 {
           padding: 0.10rem !important;
        }

        .muted {
          color: #6c757d !important;
          font-family: "Muli"
        }

        .small {
           font-size: 85%;
           font-weight: 400;
        }