Изменение размещения значка addNewRow в таблице материалов для React - PullRequest
1 голос
/ 18 июня 2020

Я поместил обработчик onRowAdd в редактируемую опцию компонента material-table, чтобы получить возможность добавлять новую строку. Все работает хорошо, но я не знаю, как изменить расположение кнопки RowAdd по умолчанию (обычно сразу после поля поиска). В моем примере я бы хотел видеть эту кнопку внутри строки, предназначенной для полей фильтрации (строка, добавленная options.filtering.true). Является ли это возможным? Как мне изменить расположение этой кнопки по умолчанию? Исходный код моего компонента:

import React from 'react';
import MaterialTable from 'material-table';

export default function MyTable2() {
  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: 'İstanbul', 63: 'Şanlıurfa' },
      },
    ],
    data: [
      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
      {
        name: 'Zerya Betül',
        surname: 'Baran',
        birthYear: 2017,
        birthCity: 34,
      },
    ],
  });

  return (
    <MaterialTable
      title="Editable Example"
      columns={state.columns}
      data={state.data}
      options={{
        filtering:true
      }}
      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);
          })
      }}
    />
  );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...