Added functionality to customize the appearance of the edit button by overriding the template

crispy_formset_modal/configs.py

@@ -0,0 +1,8 @@
+DEFAULT_CONFIG = {
+    "edit_button_template_name": {
+        "bootstrap4": "crispy_formset_modal/bootstrap4/edit_button.html",
+        "bootstrap5": "crispy_formset_modal/bootstrap5/edit_button.html",
+        "bulma": "crispy_formset_modal/bulma/edit_button.html",
+        "tailwind": "crispy_formset_modal/tailwind/edit_button.html",
+    },
+}

crispy_formset_modal/layout.py

@@ -1,6 +1,5 @@
-from crispy_forms.layout import Div, Field
+from crispy_forms.layout import Div, Field, LayoutObject
 from crispy_forms.layout import Layout as CrispyLayout
-from crispy_forms.layout import LayoutObject
 from django import forms
 from django.conf import settings
 from django.forms.formsets import DELETION_FIELD_NAME
@@ -9,13 +8,17 @@
 
 from crispy_formset_modal import ModalPlacement, ModalSize
 
+from .configs import DEFAULT_CONFIG
+
 HIDDEN_CLASSES = {
     "tailwind": "hidden",
     "bootstrap4": "d-none",
     "bootstrap5": "d-none",
     "bulma": "is-hidden",
 }
 
+USER_CONFIG = getattr(settings, "CRISPY_FORMSET_MODAL", DEFAULT_CONFIG)
+
 
 class ModalEditLayout(CrispyLayout):
     def __init__(self, *fields):
@@ -126,6 +129,9 @@ def render(self, *args, **kwargs):
                 "template_pack": template_pack,
                 "modal_size": self.modal_size,
                 "modal_placement": self.modal_placement,
+                "edit_button_template_name": USER_CONFIG["edit_button_template_name"][
+                    template_pack
+                ],
             }
         )
 

crispy_formset_modal/templates/crispy_formset_modal/bootstrap4/edit_button.html

@@ -0,0 +1,9 @@
+{% load i18n %}
+
+<button type="button"
+		title="{% trans 'Edit' %}" 
+		class="btn-open-row btn btn-sm btn-primary">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
+        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+    </svg>
+</button>

crispy_formset_modal/templates/crispy_formset_modal/bootstrap4/table.html

@@ -10,6 +10,9 @@
      data-modal-placement="{{ modal_placement }}"
 >
     {{ formset.management_form }}
+    <template>
+    {% include edit_button_template_name %}
+    </template>
     <div data-formset-body class="formset-row">
         {% for form in formset.forms %}
         {% uuid4 dialog_id %}

crispy_formset_modal/templates/crispy_formset_modal/bootstrap5/edit_button.html

@@ -0,0 +1,9 @@
+{% load i18n %}
+
+<button type="button"
+		title="{% trans 'Edit' %}" 
+		class="btn-open-row btn btn-sm btn-primary">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
+        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+    </svg>
+</button>

crispy_formset_modal/templates/crispy_formset_modal/bootstrap5/table.html

@@ -10,6 +10,9 @@
      data-modal-placement="{{ modal_placement }}"
 >
     {{ formset.management_form }}
+    <template>
+    {% include edit_button_template_name %}
+    </template>
     <div data-formset-body class="formset-row">
         {% for form in formset.forms %}
         {% uuid4 dialog_id %}

crispy_formset_modal/templates/crispy_formset_modal/bulma/edit_button.html

@@ -0,0 +1,9 @@
+{% load i18n %}
+
+<button type="button"
+		title="{% trans 'Edit' %}" 
+		class="btn-open-row button is-primary is-small">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+    </svg>
+</button>

crispy_formset_modal/templates/crispy_formset_modal/bulma/table.html

@@ -10,6 +10,9 @@
      data-modal-placement="{{ modal_placement }}"
 >
     {{ formset.management_form }}
+    <template>
+    {% include edit_button_template_name %}
+    </template>
     <div data-formset-body class="formset-row">
         {% for form in formset.forms %}
         {% uuid4 dialog_id %}

crispy_formset_modal/templates/crispy_formset_modal/tailwind/edit_button.html

@@ -0,0 +1,9 @@
+{% load i18n %}
+
+<button type="button"
+		title="{% trans 'Edit' %}" 
+		class="btn-open-row mx-auto p-1 border border-transparent rounded-full shadow-sm text-gray-500 bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+    </svg>
+</button>

crispy_formset_modal/templates/crispy_formset_modal/tailwind/table.html

@@ -10,6 +10,9 @@
      data-modal-placement="{{ modal_placement }}"
 >
     {{ formset.management_form }}
+    <template>
+    {% include edit_button_template_name %}
+    </template>
     <div data-formset-body class="formset-row">
         {% for form in formset.forms %}
         {% uuid4 dialog_id %}

docs/customizing.md

@@ -68,8 +68,9 @@ Django Crispy Formset Modal uses several templates to render formsets and modals
 * `form.html`: This template is used to render the form within the modal.
 * `modal.html`: This template is used to render the modal dialog for adding/editing formset instances.
 * `table.html`: This template is used to render the HTML table that displays the formset data.
+* `edit_button.html`: This template is used to render the record edit button in the formset table.
 
-To override these templates, create a directory named `crispy_formset_modal` and a subdirectory named as per the template pack you're using (for instance, `bootstrap4`) in your project's templates directory. Then create your custom versions of `form.html`, `modal.html`, and/or `table.html` in this directory.
+To override these templates, create a directory named `crispy_formset_modal` and a subdirectory named as per the template pack you're using (for instance, `bootstrap4`) in your project's templates directory. Then create your custom versions of `form.html`, `modal.html`, `edit_button.html`, and/or `table.html` in this directory.
 
 With these customization options, you can modify Django Crispy Formset Modal to better suit the needs of your project. In the next section, we'll discuss how to troubleshoot common issues and where to seek further assistance.
 

js/src/formset-modal.js

@@ -4,7 +4,6 @@ import {
   executeAllCalculatedFields,
   getNumberValue,
   getTextValue,
-  gettext,
   hookCalculatedFields,
   removeChildren,
   templatePacks,
@@ -17,19 +16,12 @@ const variant = {
   modal: "modal",
 };
 
-const formsetOptions = {
-  editText: gettext("Edit"),
-};
-
 class FormsetModal {
   constructor(elementId) {
     this._id = elementId;
     this.targetEl = document.getElementById(this._id);
     this.variant = variant.tabular;
     this.$formset = null;
-    this._options = {
-      ...formsetOptions,
-    };
     this._modalForms = [];
     this._deleteBt = null;
     this._table = null;
@@ -70,8 +62,17 @@ class FormsetModal {
   _getClasses(name) {
     return templatePacks[this.templatePack].classes[name].split(" ");
   }
-  _getPencilIcon(){
-    return templatePacks[this.templatePack].pencilIcon;
+  _getEditButton(modalId) {
+    const templateEl = this.targetEl.querySelector("template");
+    const template = templateEl.content.cloneNode(true);
+    const editButton = template.querySelector("button");
+
+    if (!editButton.classList.contains("btn-open-row")) {
+      editButton.classList.add("btn-open-row");
+    }
+
+    editButton.setAttribute("data-formset-modal-toggle", modalId);
+    return editButton;
   }
   _getModalSize() {
     return this.targetEl.getAttribute("data-modal-size");
@@ -265,7 +266,9 @@ class FormsetModal {
   }
   _checker(tr, td, formsetFormEl, checkbox) {
     // remove previous divSel if exists.
-    let prevDivSel = td.querySelector(".cfm-selection-border, .selection-border");
+    let prevDivSel = td.querySelector(
+      ".cfm-selection-border, .selection-border"
+    );
     if (prevDivSel) {
       prevDivSel.remove();
     }
@@ -349,7 +352,7 @@ class FormsetModal {
       selCheckbox.classList.add(...that._getClasses("checkbox"));
       selCheckbox.classList.add("select-row");
       tdSel.appendChild(selCheckbox);
-      tdSel.classList.add(...that._getClasses("td"))
+      tdSel.classList.add(...that._getClasses("td"));
       selCheckbox.addEventListener("change", function (e) {
         that._checker(tr, tdSel, row.modalForm.targetEl, e.target);
       });
@@ -400,13 +403,7 @@ class FormsetModal {
       tdEdit.classList.add(...that._getClasses("textCenter"));
       tdEdit.classList.add(...that._getClasses("p0"));
       tdEdit.classList.add(...that._getClasses("alignMiddle"));
-      tdEdit.innerHTML = `
-                <button type="button"
-                        title="${that._options.editText}" 
-                        class="${that._getClasses("editBtn").join(" ")}"
-                        data-formset-modal-toggle="${row.modalForm.modalId}">
-                        ${that._getPencilIcon()}
-                </button>`;
+      tdEdit.appendChild(that._getEditButton(row.modalForm.modalId));
       let button = tdEdit.querySelector(".btn-open-row");
 
       button.addEventListener("click", function (e) {

js/src/utils.js

@@ -1,5 +1,3 @@
-import { bootstrapPencilIcon, tailwindPencilIcon } from "./icons";
-
 let gettext = window.gettext;
 const _has = Object.prototype.hasOwnProperty;
 /**
@@ -169,7 +167,6 @@ const bootstrap4Classes = {
   textCenter: "text-center",
   alignMiddle: "align-middle",
   pointer: "cfm-cursor-pointer",
-  editBtn: "btn-open-row btn btn-sm btn-primary",
   checkbox: "checkbox",
   td: "cfm-td",
   tr: "cfm-tr",
@@ -200,8 +197,6 @@ const tailwindClasses = {
   textCenter: "text-center",
   alignMiddle: "align-middle",
   pointer: "cursor-pointer",
-  editBtn:
-    "btn-open-row mx-auto p-1 border border-transparent rounded-full shadow-sm text-gray-500 bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500",
   checkbox:
     "w-4 rounded border-gray-300 focus:ring-indigo-500 text-indigo-600 h-4",
   td: "whitespace-nowrap px-3 py-3 text-sm text-gray-500",
@@ -230,7 +225,6 @@ const bulmaClasses = {
   textCenter: "has-text-center",
   alignMiddle: "is-vcentered",
   pointer: "cfm-cursor-pointer",
-  editBtn: "btn-open-row button is-primary is-small",
   checkbox: "checkbox",
   td: "cfm-td",
   tr: "cfm-tr",
@@ -274,22 +268,18 @@ const templatePacks = {
   bootstrap4: {
     classes: bootstrap4Classes,
     sizes: bootstrap4SizeClasses,
-    pencilIcon: bootstrapPencilIcon,
   },
   bootstrap5: {
     classes: bootstrap5Classes,
     sizes: bootstrap5SizeClasses,
-    pencilIcon: bootstrapPencilIcon,
   },
   tailwind: {
     classes: tailwindClasses,
     sizes: tailwindSizeClasses,
-    pencilIcon: tailwindPencilIcon,
   },
   bulma: {
     classes: bulmaClasses,
     sizes: bulmaSizeClasses,
-    pencilIcon: bootstrapPencilIcon,
   },
 };