如何在 material-table 的右上角添加 "plus-button" 以进行反应并在反应中调用我的特定函数

Question

这是我的代码：

import React, { useState, useEffect } from 'react';
import { Fade } from "@material-ui/core";
import MaterialTable from 'material-table';
import { makeStyles } from '@material-ui/core/styles';

import './styles.css';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        width: '70%',
        margin: 'auto',
        marginTop: 20,
        boxShadow: '0px 0px 8px 0px rgba(0,0,0,0.4)'
    }
}));

function User(props) {
    const classes = useStyles();
    const [checked, setChecked] = React.useState(false);

    useEffect(() => {
        setChecked(prev => !prev);
    }, [])

    const [state, setState] = React.useState({
        columns: [
            { title: 'name', field: 'name' },
            { title: 'Setor', field: 'sector' }
        ],
        data: [
            { name: 'Tom Brady', setor: 'Quarterback'},
            { name: 'Aaron Rodgers', setor: 'Quarterback'},
            { name: 'Ryan Tannehill', setor: 'Quarterback'},
            { name: 'Julian Edelman', setor: 'Wide Receiver'},
            { name: 'Julio Jones', setor: 'Wide Receiver'},
            { name: 'Marcus Mariota', setor: 'Quarterback'},
            { name: 'Patrick Mahomes', setor: 'Quarterback'},
            { name: 'Antonio Brown', setor: 'Wide Receiver'},
            { name: 'Eli Manning', setor: 'Quarterback'},
            { name: 'Antonio Brown', setor: 'Wide Receiver'},
            { name: 'Mike Evans', setor: 'Wide Receiver'},
            { name: 'Russel Wilson', setor: 'Quarterback'},
            { name: 'Drew Brees', setor: 'Quarterback'},
            { name: 'Cam Newton', setor: 'Quarterback'}
        ],
        actions: [
            { icon: 'create', tooltip: 'Edit', onClick: (event, rowData) => alert('Edit ' + rowData.name + '?')},
            { icon: 'lock', tooltip: 'Block', onClick: (event, rowData) => alert('Block ' + rowData.name + '?')},
            { icon: 'delete', tooltip: 'Delete', onClick: (event, rowData) => alert('Delete ' + rowData.name + '?')}
        ],
        options: {
            headerStyle: { color: 'rgba(0, 0, 0, 0.54)' },
            actionsColumnIndex: -1,
            exportButton: true,
            paging: true,
            pageSize: 10,
            pageSizeOptions: [],
            paginationType: 'normal'
        }
    });


    return (
        <>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

            <Fade in={checked} style={{ transitionDelay: checked ? '300ms' : '0ms' }}>
                <div className={classes.root}>
                    <MaterialTable options={state.options} title="Users" columns={state.columns} data={state.data} actions={state.actions}></MaterialTable>
                </div>
            </Fade>
        </>
    );
}

export default User;

我想添加这个按钮：

如果我遵循此处 https://material-ui.com/pt/components/tables/ 的默认代码，我必须添加此代码：

 editable={{
        onRowAdd: newData =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              setState(prevState => {
                const data = [...prevState.data];
                data.push(newData);
                return { ...prevState, data };
              });
            }, 600);
          }),

但是这段代码调用了material-table的特定函数，我想调用自己的函数，如何添加上一个按钮并调用自己的函数？我自己的函数将打开一个带有一些输入的模式，比我在 table.

上显示的输入更多

Answer 1

您可以创建自定义 actions

<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={state.data}
  actions={[
    {
      icon: "add_box",
      tooltip: "my tooltip",
      position: "toolbar",
      onClick: () => {
        console.log("clicked");
      }
    }
  ]}
/>

工作演示：https://codesandbox.io/s/material-demo-mgh26

Answer 2

您可以使用位置或 isFreeAction 属性在那里显示操作。

<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={state.data}
  actions={[
    {
      icon: "add_box",
      tooltip: "my tooltip",
      isFreeAction: true,
      onClick: () => {
        console.log("clicked");
      }
    }
  ]}
/>

position 参数更加灵活，可以为按钮提供不同的位置。

另一方面，

isFreeAction 只接受一个 boolean 作为动作类型。

从 Mosh Feu 克隆的沙盒 https://codesandbox.io/s/material-demo-m8eug

Answer 3

您可以覆盖工具栏，添加您的自定义按钮（或其他一些内容！），如中所述：

        <MaterialTable
            components={{
                Toolbar: (props) => (
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "flex-end",
                            alignItems: "center"
                        }}
                    >
                        <div style={{ width: "13rem" }}>
                            <MTableToolbar {...props} />
                        </div>
                        <Tooltip title="Add">
                            <IconButton>
                                <AddBox />
                            </IconButton>
                        </Tooltip>
                    </div>
                ),
            }}
        />

如何在 material-table 的右上角添加 "plus-button" 以进行反应并在反应中调用我的特定函数

How to add "plus-button" on top right in material-table for react and call my specific function in react

reactjs

material-table