MUI-Таблицы данных, Как настроить выпадающий список фильтра выберите с дополнительным столбцом, содержащим значок

#filter #dropdown #multiple-columns #multi-select #mui-datatable

Вопрос:

Я использую MUI-таблицы данных (gregnb) и хочу настроить раскрывающийся список с несколькими вариантами выбора на вкладке фильтр, добавив дополнительный столбец в раскрывающийся список.
Возможно ли это? Будет ли это в filteroptions.display? или customFilterListOptions (которые я использую для настройки текста в чипе), и если да, то как, пожалуйста.

Спасибо

Ответ №1:

Я получил это, указав filterType = «пользовательский» и вернув разметку пользовательского интерфейса. Т. е.

 filterType = 'custom';
filterOptions = {
    names: getMyArray(),
    logic: (value, filters) => { ......
    },
     display: (filterList, onChange, index, column) => {
        return (
           <FormControl>
              <InputLabel htmlFor="select-multiple-chip">Location</InputLabel>
                  <Select
                      className ={class1.A}
                      multiple
                      value={filterList[index]}
                      renderValue={(selected) => selected.join(", ")}
                      onChange={(event) => {
                      filterList[index] = event.target.value;
                      onChange(filterList[index], index, column);
                  }}
                  >                                                     

                  {locArr.map((name, name2) =>(
                      <MenuItem key={id} value={name}  className ={classesF.A}>
                          <Checkbox className ={classesF.D} />
                          <ListItemText primary={name}/>
                          <ListItemText primary={name2}/>
                     </MenuItem>
                 ))}
            </Select>
       </FormControl>
   );
 

}