在 React Material UI Table 中创建动态操作列

Posted 2023-02-22

【中文标题】在 React Material UI Table 中创建动态操作列

【英文标题】：Create dynamic action column in React Material UI Table

【发布时间】：2020-06-01 08:19:12

【问题描述】：

我有一个包含 Material React Table 的 DataTable 组件。我将列和行数据作为道具传递给 DataTable 组件。我现在想添加一个具有编辑和删除等选项的操作列。我被困在这里。我在下面提供我的代码，请提供解决方案

<DataTable
                    columns=COLUMN_DATA
                    columnsUniqueKey='colId'
                    rowsUniqueKey='rowId'
                    rows=ROW_DATA
                    pagination=false
 /> 

import React from 'react';
import moment from "moment";
import StatusLabel from "../../../../components/StatusLabel/StatusLabel";
import  Button  from '@material-ui/core';


export const COLUMN_DATA = [
    
        id: "key",
        label: "Key",
    ,
    
        id: "value",
        label: "Value",
    ,
    
        id: "createdAt",
        label: "Create At",
    ,
    
        id: "updatedAt",
        label: "Updated At",
    ,
    
        id: "actions",
        label: "Actions",
    
]


const createData = (key, value, createdAt, updatedAt, actions) => 
    return 
        key,
        value,
        createdAt,
        updatedAt,
        actions
    ;



export const ROW_DATA = [
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(1, 'day').format('LLL'),
        moment().subtract(1, 'day').format('LLL'),
        <>
            <Button  variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(2, 'day').format('LLL'),
        moment().subtract(2, 'day').format('LLL'),
        <>
            <Button  variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(3, 'day').format('LLL'),
        moment().subtract(3, 'day').format('LLL'),
        <>
            <Button  variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(4, 'day').format('LLL'),
        moment().subtract(4, 'day').format('LLL'),
        <>
            <Button  variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(5, 'day').format('LLL'),
        moment().subtract(5, 'day').format('LLL'),
        <>
            <Button variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
];

还有我的DataTable组件文件

import React from 'react';
// styles
import useStyles from "./styles";
import 
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TablePagination,
    TableRow,
    TableSortLabel
 from '@material-ui/core';
import  DATA_TABLE_ROWS_PER_PAGE_OPTIONS  from './constants';



const DataTable = ( columns, rows, enableActions, pagination, ...props ) => 


  const classes = useStyles();
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const handleChangePage = (event, newPage) => 
    setPage(newPage);
  ;

  const handleChangeRowsPerPage = event => 
    setRowsPerPage(+event.target.value);
    setPage(0);
  ;


  //Row Click Event
  const onRowClicked = row => (event) => 
    // props.rowClicked(row)
  



  return (
      <>
        <TableContainer className=classes.container>
            <Table stickyHeader>
            <TableHead>
                <TableRow>
                columns.map((sortable, ...column) => (
                    <TableCell
                    key=column[props.columnsUniqueKey]
                    align=column.align>
                         sortable ? <TableSortLabel>
                                        column.label
                                     </TableSortLabel> : column.label 
                    </TableCell>
                ))

                /*  enableActions && <TableCell>
                    Actions
                </TableCell>  */


                </TableRow>
            </TableHead>
            <TableBody>
                 ( pagination ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : rows).map(row => 
                return (
                    <TableRow onClick=onRowClicked(row) hover role="checkbox" tabIndex=-1 key=row[props.rowsUniqueKey]>
                         columns.map( column => 
                            const value = row[column.id];
                            return (
                                <>
                                    <TableCell key=column[props.columnsUniqueKey] align=column.align>
                                         column.format && typeof value === 'number' ? column.format(value) : value 
                                    </TableCell>
                                </>
                            );
                        ) 
                        /*  enableActions && <TableCell> Actions </TableCell>  */
                    </TableRow>
                );
                )
            </TableBody>
            </Table>
        </TableContainer>
        pagination && <TablePagination
            rowsPerPageOptions=DATA_TABLE_ROWS_PER_PAGE_OPTIONS
            component="div"
            count=rows.length
            rowsPerPage=rowsPerPage
            page=page
            onChangePage=handleChangePage
            onChangeRowsPerPage=handleChangeRowsPerPage
        />
      </>
  );


export default DataTable;

如何添加处理程序以编辑按钮并传递列数据，以便我可以处理父组件的事件

【参考方案1】：

您无需在每次创建数据时都添加编辑按钮。您也应该在获取数据时调用一次创建数据。 Row 数据不需要每次都调用它。

这是带有工作演示的codesandbox 链接。 在 react here 中尝试更多关于表格和材质 ui 的演示。