Изменение стандартного размещения кнопки для добавления новой записи в MATERIAL-TABLE
Добавил в компонент material-table функцию добавления новой записи (через editable, функция onRowAdd).При этом на форму добавляется кнопка с иконкой (+) и располагается она по умолчанию в toolbar, справа от строки поиска. Под toolbar есть строка с фильтрами для полей (options.filtering:true). Можно ли отобразить кнопку для добавления новой записи в этой строке (с фильтрами, под заголовком Actions)? Исходный код:
import React from 'react';
import MaterialTable from 'material-table';
export default function MaterialTableDemo() {
const [state, setState] = React.useState({
columns: [
{ title: 'Name', field: 'name'},
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'Moscow', 63: 'Kazan' },
},
],
data: [
{ name: 'Serg', surname: 'Ivanov', birthYear: 1987, birthCity: 63 },
{
name: 'Olga',
surname: 'Ivanova',
birthYear: 1988,
birthCity: 34,
},
],
options={{
filtering: true,
actionsColumnIndex:-1
}}
});
return (
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
editable={{
onRowAdd: (newData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.push(newData);
return { ...prevState, data };
});
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
if (oldData) {
setState((prevState) => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
}),
onRowDelete: (oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
return { ...prevState, data };
});
}, 600);
}),
}}
/>