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

如何解决REACT Material-UI MaterialTable-对自定义操作进行排序

我有此代码：

    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个操作：复制，编辑和删除

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

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

任何帮助将不胜感激。谢谢

解决方法

它看起来像被标记为wontfix：https://github.com/mbrn/material-table/issues/757

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

所以我的建议是使您的“复制”操作弹性项的order较高。

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

在这里阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/order

,

此解决方案有效...我添加了一个自定义Action组件：

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
                            })
                    }}
                />