ReactJS: панель деталей поиска по таблице материалов

Я использую таблицу материалов (https://material-table.com/#/) для мой проект. Я реализовал функцию «панели деталей» (https://material-table.com/#/docs/features/detail-panel), а также включили функцию поиска.

Насколько мне известно, функция «поиска» будет выполнять поиск только по «строковым» значениям в любом столбце таблицы.

Моя панель сведений содержит текст внутри тега pre html.

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

Я хочу знать следующее:

Можно ли также сделать функцию "поиска" поиском по данным в "панели деталей". Если да, то как?


reactjs material-table
person jlrivera81    schedule 03.03.2020    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Для тех, у кого такая же проблема, я считаю, что нашел обходной путь. Я добавил "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" }
  }
person jlrivera81    schedule 02.04.2020
comment
Куда вы добавляете этот фрагмент кода? Внутри свойства detailPanel таблицы материалов? - person L_H; 26.08.2020

arrow_upward
1
arrow_downward

Решение Вай Ха Ли вызовет странный интервал в столбцах в моей таблице материалов, я использую это для решения проблемы:

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

arrow_upward
-1
arrow_downward

Добавление:

{ 
   hidden: true,
}

должно сработать.

person Andy    schedule 19.10.2020
comment
Если это дубликат, это не очевидно. Другой ответ содержит намного больше кода и не подчеркивает, что важной / существенной частью решения является просто правило hidden. Этот ответ подразумевает, что скрытое - единственное, что нужно для решения проблемы. Тем не менее, ему может быть полезно объяснение. Ответы только на код не приветствуются. - person SherylHohman; 20.10.2020