Improve rowEditor buttons on DataTable with editMode="row"

[RaquelAlgoNew]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[ ] bug report
[ x ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Current behavior
Now you can add a bodyAction and modify the buttons as you want, but if you want do the same with the buttons provided from rowEdit function, you can't

Expected behavior
Add a property to change buttons format, add tooltip and this stuff

[mertsincan]

Now users can create special button elements according to their needs with the parameters given in the body function. Exp;

rowEditorTemplate(rowData, props) {
        const rowEditor = props.rowEditor;
        if (rowEditor.editing) {
            return rowEditor.element; // default element
        }
        else {
           // custom init element
            return (
                <button type="button" onClick={rowEditor.onInitClick} className={rowEditor.initClassName}>
                    <span className='p-row-editor-init-icon pi pi-fw pi-home p-clickable'></span>
                </button>
            )
        }
    }

<Column rowEditor body={this.rowEditorTemplate} ...></Column>

/*
 * rowEditorTemplate(rowData, props) {
 *    For save and cancel buttons, props.rowEditor: {
 *                 editing: true,
 *                 onSaveClick: function,
 *                 saveClassName: string,
 *                 saveIconClassName: string
 *                 onCancelClick: function,
 *                 cancelClassName: string,
 *                 cancelIconClassName: string
 *    } ;
 *
 *    For init button, props.rowEditor: {
 *                 editing: false,
 *                 onInitClick: function,
 *                 initClassName: string,
 *                 initIconClassName: string
 *    };
 * }
 */

Best Regards,

[RaquelAlgoNew]

thanks a lot!

[shiddugmail]

I am getting rowEditor null, can someone help me please.

[mertsincan]

Hi @shiddugmail,

I couldn't replicate it. Could you please create a new issue about it? And could you please attach a sample codesandbox for us to replicate?

[shiddugmail]

Hello @mertsincan
thank you for the response. I thought there might be update to primereact and did npm i primereact@latest.
I had "primereact": "7.0.1", and I got "primereact": "^7.2.1",

And it worked.
Regards,
Shiddu

[mertsincan]

Glad to hear, thanks a lot for your update!

Best Regards,

[maitrungduc1410]

for someone this may help, this is how I render custom UI for row editor:

<Column
  rowEditor
  header={t('common:actions')}
  body={(rowData: any, options: ColumnBodyOptions) => (
    <>
      {options.rowEditor?.editing ? (
        <>
          <Button
            icon="pi pi-save"
            className="p-button-rounded mr-2 p-button-outlined"
            onClick={(e) =>
              options.rowEditor?.onSaveClick &&
              options.rowEditor?.onSaveClick(e)
            }
            tooltip={t("common:save")}
            tooltipOptions={{ position: "top" }}
          />
          <Button
            icon="pi pi-times"
            className="p-button-rounded p-button-outlined"
            onClick={(e) =>
              options.rowEditor?.onCancelClick &&
              options.rowEditor?.onCancelClick(e)
            }
            tooltip={t("common:cancel")}
            tooltipOptions={{ position: "top" }}
            severity="warning"
          />
        </>
      ) : (
        <>
          <Button
            icon="pi pi-pencil"
            className="p-button-rounded mr-2 p-button-outlined"
            onClick={(e) =>
              options.rowEditor?.onInitClick &&
              options.rowEditor?.onInitClick(e)
            }
            tooltip={t("common:edit")}
            tooltipOptions={{ position: "top" }}
            severity="success"
          />
          <Button
            icon="pi pi-trash"
            className="p-button-rounded p-button-outlined"
            tooltip={t("common:delete")}
            tooltipOptions={{ position: "top" }}
            severity="danger"
            onClick={() =>
              confirmDialog({
                message: "Are you sure you want to delete?",
                header: "Confirmation",
                icon: "pi pi-exclamation-triangle",
                accept: () => handleDelete(rowData.id),
              })
            }
          />
        </>
      )}
    </>
  )}
></Column>