#reactjs #material-ui #material-table
#reactjs #материал-пользовательский интерфейс #материал-таблица
Вопрос:
Я хочу разместить кнопку свободного действия в material-table вверху слева. Вот иллюстрация того, что я хочу.
Я знаю, что это что-то вроде переопределения компонентов. Но не могу этого сделать и не могу найти ни одного примера.
Комментарии:
1. Я не уверен насчет фактической кнопки свободного доступа, но вы можете добиться очень похожего положения с помощью переопределения панели инструментов, например, в ссылке, которой вы поделились, она не будет на том же уровне компонента поиска, но, по крайней мере, у вас будет больше свободы позиционировать кнопку обновления, переопределяякомпонент панели инструментов
Ответ №1:
Спасибо всем за внимание. Это было так просто, но раньше не находил. Я добавил опцию в разметку Material-Table как
options={{
search: true,
actionsColumnIndex: -1,
toolbarButtonAlignment:"left" // here is the option to change toolbar buttons' alignment
}}
Ответ №2:
Вы можете получить это, переопределив компонент панели инструментов вместо использования actions свойства. Ниже приведен пример кода components нужного вам свойства <MaterialTable /> , вы можете изменять стили и компоненты в соответствии с тем, что вам нужно:
components={{
Toolbar: (toolbarProps) => (
<Box display="flex" alignItems="center">
<Button
style={{ marginLeft: '8px', marginRight: 'auto' }}
variant="contained"
color="secondary"
>
Refresh
</Button>
<MTableToolbar {...toolbarProps} />
</Box>
),
}}