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

【问题标题】：Creating rows in a table when data is missing for some columns当某些列缺少数据时在表中创建行
【发布时间】：2019-05-15 15:19:50
【问题描述】：

我有一个类似于以下内容的 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 是表标题，每个表标题对象的值是列值。例如，当列标题为document 时，其列的值之一是document-generated-by。同样，当列标题为department 时，其列值之一为department-name。可以看出，某些列的值比其他列多。

我正在尝试从这个 javascript 对象生成一个表。

我将表头生成为：

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

我不确定如何生成表格行/列。我怎么能这样做？我想创建一个动态表，类似于我在下面给出的 sn-p：

<table>
  {tableHead}
  <tbody>
    {tableRows}
  </tbody>
</table>

注意：javascript 对象中的所有键都是动态的而不是固定的。它们有时可能存在/不存在，具体取决于某些配置。

基于列数的表格类似于：

如您所见，与其他列相比，时间列的行数更多。

对于上面的数据结构表看起来类似于：

date  time    adm     document              department

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

【问题讨论】：

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

标签： javascript html reactjs algorithm

【解决方案1】：

正如@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>
    );

下面是对应的 CSS：

        .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;
        }

然后您可以直接在您的渲染方法中使用flexHead。对于我创建的模拟，结果如下：

【讨论】：