REACT Material-UI MaterialTable - 排序自定义操作

Question

我有这个代码：

    let materialTableRef = React.createRef<MaterialTable<RowData>>();
    <MaterialTable
                    title=""
                    columns={getTableDataColumns()}
                    data={getTableDataValues()}
                    style={{ width: "100%", backgroundColor: "transparent" }}
                    onChangePage={(newPage: number) => {
                        setPage(newPage + 1);
                    }}
                    onChangeRowsPerPage={(pageSize: number) => {
                        setRowsPerPage(pageSize);
                    }}
                    page={page - 1}
                    totalCount={paging.TotalRecordCount}
                    initialFormData={initialFormData}
                    tableRef={materialTableRef}
                    actions={[
                        {
                            icon: 'tune',
                            isFreeAction: true,
                            tooltip: 'Toggle columns filter',
                            onClick: (event) => setShowFilter(!showFilter),
                        },   
                        {
                            icon: 'library_add',
                            tooltip: 'Copy row',
                            onClick: (event, rowData) => {
                                const materialTable: any = materialTableRef.current;
                    
                                setInitialFormData({
                                    ...rowData,
                                    name: null,
                                });
                    
                                materialTable.dataManager.changeRowEditing();
                                materialTable.setState({
                                    ...materialTable.dataManager.getRenderState(),
                                    showAddRow: true,
                                });
                            },
                        },
                    ]}
                    editable={{
                        onRowAdd: newData =>
                            new Promise(async (resolve, reject) => {
                                //do something
                            }),
                        onRowUpdate: (newData, oldData) =>
                            new Promise(async (resolve, reject) => {
                              //do something
                            }
                        ),
                        onRowDelete: data =>
                            new Promise(async (resolve, reject) => {
                              //do something
                            })
                    }}
                />

image of action icons

所以每一行左边都有 3 个操作：复制、编辑和删除

“复制”操作是自定义操作，其中“编辑”和“删除”包含在组件中。我希望我的自定义操作图标出现在结尾而不是开头。

如何对操作图标进行排序？我希望行复制图标是最后一个图标。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

这似乎被标记为 wontfix：https://github.com/mbrn/material-table/issues/757

但是，如果您检查它们呈现的 DOM，您会看到操作项的容器具有 CSS 属性的 display: flex

所以我的建议是让您的“复制”动作 Flex 项目具有更高的 order

.your-copy-action-item {
  order: 3;
}

阅读此处：https://developer.mozilla.org/en-US/docs/Web/CSS/order

Answer 2

此解决方案有效...我添加了自定义操作组件：

let materialTableRef = React.createRef<MaterialTable<RowData>>();
    <MaterialTable
                    title=""
                    components={{
                        Action: props => {
                            if (typeof props.action === "function") {
                                var element = props.action(props.data);
                                return (
                                    <IconButton aria-label={element.tooltip} size="small" onClick={(event) => {
                                        element.onClick(event, props.data);
                                    }}  >
                                        <element.icon />
                                    </IconButton>
                                );
                            }
                            if (typeof props.action.icon === "object" || props.action.isFreeAction) {
                                return <MTableAction {...props} />
                            }
                            else {
                                return (
                                    <IconButton aria-label="{props.action.icon}" size="small"
                                        style={props.action.icon === "library_add" ? { order: 3 } : null}
                                        onClick={(event) => props.action.onClick(event, props.data)} >
                                        <Icon>{props.action.icon}</Icon>
                                    </IconButton>
                                );
                            }
                        }
                    }}
                    columns={getTableDataColumns()}
                    data={getTableDataValues()}
                    style={{ width: "100%", backgroundColor: "transparent" }}
                    onChangePage={(newPage: number) => {
                        setPage(newPage + 1);
                    }}
                    onChangeRowsPerPage={(pageSize: number) => {
                        setRowsPerPage(pageSize);
                    }}
                    page={page - 1}
                    totalCount={paging.TotalRecordCount}
                    initialFormData={initialFormData}
                    tableRef={materialTableRef}
                    actions={[
                        {
                            icon: 'tune',
                            isFreeAction: true,
                            tooltip: 'Toggle columns filter',
                            onClick: (event) => setShowFilter(!showFilter),
                        },   
                        {
                            icon: 'library_add',
                            tooltip: 'Copy row',
                            onClick: (event, rowData) => {
                                const materialTable: any = materialTableRef.current;
                    
                                setInitialFormData({
                                    ...rowData,
                                    name: null,
                                });
                    
                                materialTable.dataManager.changeRowEditing();
                                materialTable.setState({
                                    ...materialTable.dataManager.getRenderState(),
                                    showAddRow: true,
                                });
                            },
                        },
                    ]}
                    editable={{
                        onRowAdd: newData =>
                            new Promise(async (resolve, reject) => {
                                //do something
                            }),
                        onRowUpdate: (newData, oldData) =>
                            new Promise(async (resolve, reject) => {
                              //do something
                            }
                        ),
                        onRowDelete: data =>
                            new Promise(async (resolve, reject) => {
                              //do something
                            })
                    }}
                />

REACT Material-UI MaterialTable - 排序自定义操作

REACT Material-UI MaterialTable - Sorting Custom Actions

sorting

custom-action

reactjs

material-ui

material-table