Question

我正在为项目使用材料表（https://material-table.com/#/）。我已经实现了“详细信息面板”功能（https://material-table.com/#/docs/features/detail-panel），并且还启用了搜索功能。

据我所知，“搜索”功能将仅搜索表中任何列中的“字符串”值。

我的详细信息面板在html pre标记内包含文本。

detailPanel={rowData => {
          return <pre style={preCss}>{rowData.releaseNote}</pre>;
        }}

我想知道的是：

是否还可以使“搜索”功能针对“详细信息面板”中的数据进行搜索。如果是，怎么办？

Answer 1

对于遇到相同问题的任何人，我相信我都找到了解决方法。我在主表中将"rowData.releaseNote"添加为列条目。但随后我将headerStyle和cellStyle宽度归零，并设置display:none。因此，从本质上讲，数据在表中以不可见列的形式存在。

 {
    title: "",
    field: "releaseNote",
    sorting: false,
    filtering: false,
    headerStyle: { display: "none", width: "0px", maxWidth: "0px" },

    cellStyle: { display: "none", width: "0px", maxWidth: "0px" }
  }

Answer 2

Wai Ha Lee的解决方案将导致我的Material-Table中的Columns出现奇怪的间距，我使用该解决方案来解决此问题：

      {
        title: "",
        field: "releaseNote",
        sorting: false,
        filtering: false,
        hidden: true,
        searchable: true,
        width: "0px"
      }

Answer 3

添加：

{ 
   hidden: true,
}

应该工作。

ReactJS：材料表搜索详细信息面板

3 个答案: