REACT Material-UI MaterialTable - Sorting Custom Actions

Question

I have this code:

    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

So every row has 3 actions on the left: copy, edit and delete

The "copy" action is a custom action where "edit" and "delete" are included from the component. I want my custom action icon to appear at the end instead of the beginning.

how do I sort the action icons? I want the row copy icon to be the last icon.

Any help would be greatly appreciated. Thank you

Answer 1

It looks like this was labeled as wontfix: https://github.com/mbrn/material-table/issues/757

However, if you inspect the DOM they render, you will see that the container of the action items has the CSS property of display: flex

So my recommendation is to make your "Copy" Action Flex Item to have a higher order

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

Read here: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Answer 2

This solution works... I added a custom Action component:

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