Custom row actions with an editable row

[mmeadwell22]

I have a table that has some custom row actions like Delete. I want to make the row editable with a custom edit button next to the delete button. I followed the code snippet below but when the row switches into editing mode the row action column does not change to display the "Cancel" or "Save" buttons. I began trying to implement a custom "Save" button but I could not figure out a way to save the changes to the row. Am I missing something simple? Any help would be appreciated!

Just to note when I don't have a custom action column everything seems to work and the "Cancel" and "Save" buttons appear as they should.

<MaterialReactTable
  data={data}
  columns={columns}
  displayColumnDefOptions={{
    'mrt-row-actions': {
      header: 'Edit', //change "Actions" to "Edit"
      //use a text button instead of a icon button
      Cell: ({ row, table }) => (
        <Button onClick={() => table.setEditingRow(row)}>Edit Customer</Button>
      ),
    },
  }}
/>

Below is the implementation on the table

<MaterialReactTable
  displayColumnDefOptions={{
    "mrt-row-actions": {
      header: "",
      muiTableHeadCellProps: {
        align: "center",
      },
      size: 20,
      Cell: ({ row, table }) => (
        <Box
          sx={{
            display: "flex",
            gap: "1rem",
            justifyContent: "center",
          }}
        >
          <Tooltip arrow placement="left" title="Delete">
            <IconButton onClick={() => handleRowDelete(row)}>
              <Delete />
            </IconButton>
          </Tooltip>
          <Button onClick={() => table.setEditingRow(row)}>click me to edit</Button>
        </Box>
      ),
    },
  }}
  editingMode="row"
  enableEditing
  enableRowActions={true}
  onEditingRowSave={() => console.log("saved")}
  columns={columns}
  data={companyWithUsers?.data.Users ?? []}
  initialState={{
    showGlobalFilter: true,
  }}
  renderTopToolbarCustomActions={() => (
    <Box sx={{ display: "flex", gap: "1rem" }}>
      <Tooltip arrow title="Refresh Data">
        <IconButton onClick={refetchCompanyWithUsers}>
          <Refresh />
        </IconButton>
      </Tooltip>
      <AccessGate
        permissions={["update:users"]}
        errorProps={{ sx: { display: "none" } }}
      >
        <Button
          color="secondary"
          onClick={() => {
            refetchUsersWithoutCompany();
            handleToggle();
          }}
        >
          Add User
        </Button>
      </AccessGate>
    </Box>
  )}
  muiTableBodyProps={{
    sx: {
      "& tr:nth-of-type(odd)": {
        backgroundColor: theme.palette.background.paper,
      },
    },
  }}
  state={{
    showProgressBars: isFetching,
  }}
></MaterialReactTable>;

[githorse]

@mmeadwell22 I'm not sure if it will help but I'm using the table's renderRowActions prop to try to do something vaguely like this. (I haven't gotten it fully working but it does show the correct buttons.) I'm not sure what the difference is between that and displayColumnDefOptions.