Reactjs 反应物料UI物料表-排序自定义操作

我有以下代码：

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

let materialTableRef=React.createRef（）；
{
设置页面（新页面+1）；
}}
onChangeRowsPerPage={（页面大小：数字）=>{
setRowsPerPage（页面大小）；
}}
page={page-1}
totalCount={paging.TotalRecordCount}
initialFormData={initialFormData}
tableRef={materialTableRef}
行动={[
{
图标：“tune”，
是的，
工具提示：“切换列筛选器”，
onClick：（事件）=>setShowFilter（！showFilter），
},   
{
图标：“库添加”，
工具提示：“复制行”，
onClick：（事件，行数据）=>{
const materialTable:any=materialTableRef.current；
setInitialFormData({
…行数据，
名称：空，
});
materialTable.dataManager.changeRowEditing（）；
materialTable.setState({
…materialTable.dataManager.getRenderState（），
showAddRow：是的，
});
},
},
]}
可编辑={{
onRowAdd:newData=>
新承诺（异步（解析、拒绝）=>{
//做点什么
}),
onRowUpdate：（新数据、旧数据）=>
新承诺（异步（解析、拒绝）=>{
//做点什么
}
),
onRowDelete:data=>
新承诺（异步（解析、拒绝）=>{
//做点什么
})
}}
/>

因此，每行在左侧有3个操作：复制、编辑和删除

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

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

---

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

这看起来像是被标记为

wontfix

：

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

display:flex

因此，我的建议是让您的“复制”动作灵活项具有更高的

顺序

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

请阅读此处：
看起来它被标记为
wontfix
：

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


因此，我的建议是让您的“复制”动作灵活项具有更高的
顺序

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

阅读此处：
此解决方案有效。。。我添加了一个自定义操作组件：

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

let materialTableRef=React.createRef（）；
{
if（props.action的类型==“函数”）{
var元素=道具动作（道具数据）；
返回(
{
onClick（事件、道具、数据）；
}}  >
);
}
if（typeof props.action.icon==“object”| | props.action.isFreeAction）{
返回
}
否则{
返回(
props.action.onClick（事件，props.data）}>
{props.action.icon}
);
}
}
}}
columns={getTableDataColumns（）}
数据={getTableDataValues（）}
样式={{宽度：“100%”，背景色：“透明”}
onChangePage={（newPage:number）=>{
设置页面（新页面+1）；
}}
onChangeRowsPerPage={（页面大小：数字）=>{
setRowsPerPage（页面大小）；
}}
page={page-1}
totalCount={paging.TotalRecordCount}
initialFormData={initialFormData}
tableRef={materialTableRef}
行动={[
{
图标：“tune”，
是的，
工具提示：“切换列筛选器”，
onClick：（事件）=>setShowFilter（！showFilter），
},   
{
图标：“库添加”，
工具提示：“复制行”，
onClick：（事件，行数据）=>{
const materialTable:any=materialTableRef.current；
setInitialFormData({