在材质表中添加自定义添加按钮

Question

目前我有一个简单的材料表，如下所示：

<MaterialTable
    options={myOptions}
    title="MyTitle"
    columns={state.columns}
    data={state.data}
    tableRef={tableRef} // Not working
    editable={{
      onRowAdd: ...,
      onRowDelete: ...,
      onRowUpdate: ...
    }}
  />;

我正在尝试创建新的添加按钮（而不是编辑当前按钮）：栏列中的每一行都应该有一个自定义添加按钮。我查看了 MaterialTable 源代码，但无法重现用于默认添加按钮的代码：

        calculatedProps.actions.push({
          icon: calculatedProps.icons.Add,
          tooltip: localization.addTooltip,
          position: "toolbar",
          disabled: !!this.dataManager.lastEditingRow,
          onClick: () => {
            this.dataManager.changeRowEditing();
            this.setState({
              ...this.dataManager.getRenderState(),
              showAddRow: !this.state.showAddRow,
            });
          },
        });

特别是我无法访问该dataManager变量。

这就是当前表格的样子，我需要在有红色标志的地方添加添加按钮。

Answer 1

我想这就是您正在寻找的：

操作列代表默认操作集。我使用自定义列渲染添加了一个特定按钮（文档）：

//..previous columns definition
{
  title: "Custom Add",
  field: "internal_action",
  editable: false,
  render: (rowData) =>
    rowData && (
      <IconButton
        color="secondary"
        onClick={() => addActionRef.current.click()}
      >
        <AddIcon />
      </IconButton>
    )
}

*使用 rowData 作为条件，防止在填充附加行时进行渲染。

然后我触发了添加操作，如下所示：

const MyComponent() {

const addActionRef = React.useRef();

return (
    <>
        <button onClick={() => addActionRef.current.click()}>
            Add new item
        </button>

        <MaterialTable
            //...
            components={{
                Action: props => {
                    //If isn't the add action
                    if (typeof props.action === typeof Function || props.action.tooltip !== 'Add') {
                            return <MTableAction {...props} />
                    } else {
                            return <div ref={addActionRef} onClick={props.action.onClick}/>;
                    }}
                }}
            editable={{
                onRowAdd: (newData, oldData) => Promise.resolve(); //your callback here
            }}
        />
    </>
);
}

我扩展了原始片段以完成添加循环。如果您需要处理不同类型的操作，我认为官方文档中的“可编辑”部分会很方便。

希望这对你有用！完整代码和沙箱在这里：

import React, { Fragment, useState } from "react";
import MaterialTable, { MTableAction } from "material-table";
import AddIcon from "@material-ui/icons/AddAlarm";
import IconButton from "@material-ui/core/IconButton";

export default function CustomEditComponent(props) {
const tableRef = React.createRef();
const addActionRef = React.useRef();

const tableColumns = [
    { title: "Client", field: "client" },
    { title: "Name", field: "name" },
    { title: "Year", field: "year" },
    {
    title: "Custom Add",
    field: "internal_action",
    editable: false,
    render: (rowData) =>
        rowData && (
        <IconButton
            color="secondary"
            onClick={() => addActionRef.current.click()}
        >
            <AddIcon />
        </IconButton>
        )
    }
];

const [tableData, setTableData] = useState([
    {
    client: "client1",
    name: "Mary",
    year: "2019"
    },
    {
    client: "client2",
    name: "Yang",
    year: "2018"
    },
    {
    client: "client3",
    name: "Kal",
    year: "2019"
    }
]);

return (
    <Fragment>
    <MaterialTable
        tableRef={tableRef}
        columns={tableColumns}
        data={tableData}
        title="Custom Add Mode"
        options={{
        search: false
        }}
        components={{
        Action: (props) => {
            //If isn't the add action
            if (
            typeof props.action === typeof Function ||
            props.action.tooltip !== "Add"
            ) {
            return <MTableAction {...props} />;
            } else {
            return <div ref={addActionRef} onClick={props.action.onClick} />;
            }
        }
        }}
        actions={[
        {
            icon: "save",
            tooltip: "Save User",
            onClick: (event, rowData) => alert("You saved " + rowData.name)
        }
        ]}
        editable={{
        onRowAdd: (newData) =>
            Promise.resolve(setTableData([...tableData, newData]))
        }}
    />
    </Fragment>
);