Material Table 分组视图添加行不显示分组字段

Question

我在 material table 中使用分组。在组视图中，当我尝试添加新行时，它不显示分组列。

在下面的示例中，我基于“地理”列进行列分组。在分组视图中，当我尝试“添加”新记录时，我没有看到地理字段。但是，当我删除所有分组时，它会按预期工作。

import React from "react";
import MaterialTable, { MTableToolbar } from "material-table";

export default function MatTableDemo() {

  const columns = [
    { title: "Geography", field: "geo", defaultGroupOrder: 0, editable: "onAdd" },
    { title: "Prouct Category", field: "prodCat", editable: "onAdd" },
    { title: "Items", field: "item", grouping: false, editable: "onAdd" },
  ];

  const data = [
    {
      id: 1,
      geo: "Canada",
      prodCat: "Food",
      item: "Dairy",
    },
    {
      id: 2,
      geo: "Europe",
      prodCat: "Food",
      item: "Dairy",
    },

  ];

  return (
    <MaterialTable
      title="Grouped Table"
      columns={columns}
      data={data}
      editable={{
        onRowAdd: (newData) => {
          return new Promise((resolve) => {
            //handleRowAdd(newData, resolve)
          })
        },
      }}
      options={{
        grouping: true,
        paging: false,
      }}
    />
  )
}

Answer 1

我不知道有什么简单的方法可以实现您正在寻找的东西，而且我在官方存储库 (link1 or link2) 上发现了一些关于此行为的已关闭或停滞问题。基于 Duplicate Action Preview 示例 docs，我发现了两种不同的解决方法，均使用 tableRef 和 initialFormData 属性。

删除应用的所有分组并创建新行

我定义了一个自定义 action 允许在显示添加行之前删除应用的过滤器。这是通过设置不同的 initialFormData 值执行重新渲染来完成的。

actions={[
          {
            icon: "library_add",
            tooltip: "Create User",
            onClick: (event, rowData) => {
              const materialTable = tableRef.current;
              setInitialFormData({});

              materialTable.setState({
                ...materialTable.dataManager.getRenderState(),
                showAddRow: true
              });
            }
          }
        ]}

这无需在列定义上使用 defaultGroupOrder 即可工作，并且至少需要一列定义了 render 属性。

const tableColumns = [
    {
      title: "Category", field: "category"
    },
    { title: "Name", field: "name" },
    {
      title: "Password",
      field: "password",
      grouping: false,
      render: (rowData) => (
        <input type="password" value={rowData.password} readOnly />
      )
    }
  ];

创建新行时使用默认列值

和以前一样的方法，但是initialFormData现在可以取类别的值（取自rowData），所以当addRow渲染后，该字段未显示但已设置值。

actions={[
          {
            icon: "library_add",
            tooltip: "Create User",

            onClick: (event, rowData) => {
              const materialTable = tableRef.current;
              setInitialFormData({
                category: rowData.category // 2nd approach
              });

              materialTable.setState({
                ...materialTable.dataManager.getRenderState(),
                showAddRow: true
              });
            }
          }
        ]}

适用于 defaultGroupOrder 列定义：

const tableColumns = [
    {
      title: "Category",
      field: "category",
      defaultGroupOrder: 0 // 2nd approach
    },
    { title: "Name", field: "name" },
    {
      title: "Password",
      field: "password",
      grouping: false,
      render: (rowData) => (
        <input type="password" value={rowData.password} readOnly />
      )
    }
  ];

第二种方法可能看起来更好，但对用户来说有点棘手，因为 addRow 总是作为 'last' 或 'first' 行生成table.

为了避免在 table 的右上角呈现默认的 **添加操作按钮 **，我使用自定义操作组件来覆盖它，如下所示：

components={{
          Action: (props) => {
            //If isn't the add action
            if (
              typeof props.action === typeof Function ||
              props.action.tooltip !== "Add"
            ) {
              return <MTableAction {...props} />;
            } else {
              return <></>;
            }
          }
        }}

当然，这个解决方案感觉有点老套，但正如我之前所说，我认为它们是解决方法，直到该功能包含在主要组件中。希望有人可以改进这些建议。

希望对你有用！沙盒 here.

Material Table 分组视图添加行不显示分组字段

Material Table grouped view add row doesn't show grouped field

reactjs

material-table

删除应用的所有分组并创建新行

创建新行时使用默认列值