ReactJS：Material-Table 搜索详细信息面板

Question

我正在使用 Material-table (https://material-table.com/#/) for my project. I have implemented the "detail panel" feature (https://material-table.com/#/docs/features/detail-panel) 并且还启用了搜索功能。

据我所知，"search" 函数只会搜索 table 中任何列中的 "string" 个值。

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

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

我想知道的是：

是否也可以使 "search" 函数搜索 "detail panel" 中的数据。如果是，如何？

Answer 1

对于遇到相同问题的任何人，我相信我找到了解决方法。我在主 table 中添加了 "rowData.releaseNote" 作为列条目。但后来我将 headerStyle 和 cellStyle 宽度归零并设置 display:none。所以本质上，数据作为 table.

中的不可见列存在

 {
    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 中的列出现奇怪的间距，我使用这个解决问题：

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

Answer 3

添加：

{ 
   hidden: true,
}

应该可以。

ReactJS：Material-Table 搜索详细信息面板

ReactJS: Material-Table search detail panel

reactjs

material-table