reactjs - 更改 React 材料表中的 addNewRow 图标位置

Question

我将 onRowAdd 处理程序放在材料表组件的可编辑选项中，以获得添加新行的能力。一切正常，但我不知道如何更改 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);
          })
      }}
    />
  );
}

标签： reactjsmaterial-uimaterial-table