在使用（React）材料表生成数据表时在表中添加行跨度或列跨度功能

Question

我在 ReactJS 中使用 material-table 插件生成数据表。我找不到使用插件在 dataTable 中生成 rowspan 或 column span 的任何直接方式或选项。有什么办法吗？

这是一个示例屏幕截图，显示了表格的外观，但将通过 dataTable 显示

Answer 1

您要做什么的解释有点不清楚。

如果你想在 col span 的每一行上添加一个按钮之类的东西，你可以在 Table 的“columns”属性中定义它，如下所示：

columns={[
      { title: 'Update', field: '', render: rowData => <button onClick={() => doSomethingWithId(rowData.id)} className="myTableButtonStyle" /> },
      { title: 'Name', field: 'name' },
      ....
    ]}

这将添加一个更新按钮，该按钮将调用 doSomethingWithId() 函数，将行的 id 作为参数传递。 是你要找的吗？否则你介意解释一下你想要什么吗？

编辑

这是我得到的

使用以下代码

<MaterialTable
      data={[
        { name: '', nationality: 'British', address: '', country: 'England' },
        { name: 'Noor', nationality: 'American', address: 'California', country: 'US' },
        { name: '', nationality: 'Chinese', address: '', country: 'China' },
        { name: '', nationality: '', address: '', country: '' },
      ]}
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Nationality', field: 'nationality' },
        { title: 'Address', field: 'address' },
        { title: 'Country', field: 'country' },
      ]}
      options={{
        rowStyle: {
          height: '25px',
        },
      }}
      title="Display Data"
    />

您不需要添加行或列跨度来实现此渲染，只需提供好的数据集和列定义即可。

在您的 data 道具中，您需要提供一个包含所有您需要的数据的对象列表。 然后，您可以使用 columns 道具定义哪些数据显示在哪里。如果您想在一列中进行更个性化的渲染（例如：您想以粗体显示国家/地区），您可以通过在 columns 对象中进行渲染来定义它，如下所示：

{title: 'Country', field: '', render: rowData => <strong>{rowData.country}</strong>

要使空行与其他行具有相同的大小，请在您的桌子上使用道具 options。 这对您有帮助吗？