时间戳

首页 > 解决方案 > 材料表分组视图添加行不显示分组字段

reactjs - 材料表分组视图添加行不显示分组字段

问题描述

我在材料表中使用分组。在我尝试添加新行时的组视图中，它不显示分组列。

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

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,
      }}
    />
  )
}

标签： reactjsmaterial-table

解决方案

我不知道有一种简单的方法可以实现您正在寻找的东西，而且我在官方存储库（link1或link2）上发现了一些关于此行为的关闭或停滞问题。基于docs中的Duplicate Action Preview示例，我发现了两种不同的解决方法，两者都使用和props。tableRefinitialFormData

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

在此处输入图像描述

我定义了一个自定义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
              });
            }
          }
        ]}

与defaultGroupOrderon 列定义一起使用：

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总是作为表的“最后”或“第一”行产生。

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

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

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

希望对你有用！沙箱在这里。

推荐阅读