Как изменить значок сортировки по умолчанию в столбце заголовка таблицы в React Material-Table?

Могу ли я изменить значок сортировки по умолчанию в столбце заголовка таблицы React Material-Table? бывший. Я хочу изменить значок сортировки asc на ArrowDownward и значок сортировки desc на ArrowUpward. Я пытаюсь установить свойства значков SortArrow в MaterialTable, но они отображаются в каждом столбце заголовка таблицы, даже в неактивном столбце сортировки. Пожалуйста помоги.

Таблица материалов

Код:

<MaterialTable ... icons={{ SortArrow: () => <ArrowDownwardIcon /> }}

reactjs material-ui material-table
person Mashizilla    schedule 08.10.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы должны переслать референсов следующим образом:

import React, { forwardRef } from 'react';  
...
<MaterialTable>  
     icons={{ SortArrow: forwardRef((props, ref) => <ArrowDownwardIcon{...props} ref={ref}/>)}}
<MaterialTable>

Это передаст необходимые реквизиты вашему пользовательскому значку, и он будет работать.

person Domino987    schedule 08.10.2019
comment
Я пробую это уже, но не работает. Значок сортировки asc по-прежнему будет ArrowUpwardIcon (я хочу изменить его на ArrowDownwardIcon). Спасибо за помощь. - person Mashizilla; 09.10.2019
comment
Возможно, это просто работает не так, как вы ожидаете. Вы пробовали использовать ArrowUpwardIcon? - person Domino987; 09.10.2019
comment
Проблема решена после попытки использовать ArrowUpwardIcon. Большое тебе спасибо. - person Mashizilla; 10.10.2019
comment
<MaterialTable data={data} icons={{ Check: forwardRef((props, ref) => <Checkbox {...props} ref={ref} icon={<CheckBoxOutlineBlankOutlinedIcon className="test" />} checkedIcon={<CheckBoxOutlinedIcon />} />)}} tableRef={ref} /> у меня не работает - person Prajapati Ghanshyam; 23.04.2021