How can I integrate grid.js plugin in Django templates?

I'm trying to integrate the gridjs plugin into the django templates and I would like to display html content in cells to format the status of a product. I would also like to add svg images in certain cells. Can anyone help me with an implementation? The plugin documentation refers to React, Angular, etc implementations. I use gridjs with jquery.

<script>
  $("div#pigeon-table").Grid({
    search: true,
    pagination: true,
    sort: true,
    columns: [
      {
        name: "{% translate "Gender" %}",
        formatter: "set the html formatter"
      },
      "{% translate "Ring details" %}", "{% translate "Color" %}",
      "{% translate "Section" %}", "{% translate "Strain" %}", "{% translate "Sire" %}",
      "{% translate "Dam" %}", "{% translate "Status" %}"],
    data: [
      {% for p in pigeons %}
        [
         "svg image here", "{{ p.ring_serial }}", "{% translate p.color.color %}",
         "{{ p.get_section_display }}", "{{ p.strain }}", "{{ p.sire }}", "{{ p.dam }}",
         "{{ p.status.color }}", "{% translate p.status.status %}"
        ],
      {% endfor %}
    ]
  });
</script>

Back to Top