ReactJS: Material-Table search detail panel

Question

I am using Material-table (https://material-table.com/#/) for my project. I have implemented the "detail panel" feature (https://material-table.com/#/docs/features/detail-panel) and have enabled search feature as well.

To my knowledge, the "search" function will only search against "string" values in any column in the table.

My detail panel contains text inside of an html pre tag.

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

What I want to know is:

Is it possible to also make the "search" function search against data in the "detail panel". If yes, how ?

Answer 1

For anyone having same issue, I believe I found a workaround. I added the "rowData.releaseNote" as a column entry in main table. But then I zeroed out the headerStyle and cellStyle widths and set display:none. So essentially, the data exists as an invisible column in the 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's solution will cause weird spacing in Columns in my Material-table, I use this one to solve the problem:

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

Answer 3

Adding:

{ 
   hidden: true,
}

should work.