DEV Community

John Ding
John Ding

Posted on

PrimeReact DataTable custom Action Column

` rowEditor
header={t('common:actions')}
body={(rowData: any, options: ColumnBodyOptions) => (
<>
{options.rowEditor?.editing ? (
<>
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" }}
/>
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"
/>
</>
) : (
<>
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"
/>
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),
})
}
/>
</>
)}
</>
)}

`

Top comments (0)