Check out my new Template which includes an HTML-table and an iframe that's rendering user-uploaded pdf's: https://i.sstatic.net/Jpg0lTm2.png

The main purpose is to enable users to link table entries with one or more pdf files. This part has been successfully accomplished.

Now, I'm seeking advice on the best approach for filtering the data in my table. Here's how the table is structured:

{% extends "website/base.html" %}
{% block content %}
{% load static %}
{% load evidence_extras %}
<script src="{% static 'evidence/matching_final.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'evidence/css/style.css' %}">
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.8/axios.js'></script>

<div class="container">
    {% csrf_token %}
    <div class="row">
        <div class="col-8">
            <div class="row">
                <div class="col-12">
                    <table class="table">
                        <thead class="table-dark">
                            <td>
                                id
                            </td>
                            .......
                        </thead>
                        <tbody>
                            {% for piece in transactions %}
                            <tr onclick="handleRowClick(this, {{piece.id}})">
                                <td>
                                    {{ piece.id }}
                                </td>
                                ......
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <button onclick="handleMatch(this)" class="btn btn-primary" style="width: 100%;">Match</button>
                </div>
            </div>
        </div>
        <div class="col-4 overflow-scroll" style="height: 60em;">
            {% for evidence in evidences %}
            <div class="row">
                <div class="col-12">
                    <div class="card" id="evidence_{{evidence.id}}">
                        <div class="card-header">{{ evidence.name}}</div>
                        <div class="card-body">
                            <iframe src="/evidence/pdf/{{evidence.id}}" id="pdf_frame" width="100%"
                                height="400"></iframe>
                            <ul>
                                <li maxlength="20"> file: {{evidence.file}} </li>
                                <li maxlength="20"> hash: {{evidence.hash}} </li>
                            </ul>
                            <div class="row">
                                <div class="col-6">
                                    <button onclick="handleMarkClick(this, {{evidence.id}})" class="btn btn-primary"
                                        style="width: 100%;">mark</button>
                                </div>
                                <div class="col-6">
                                    <button onclick="handleExpandClick(this,{{evidence.id}})" class="btn btn-primary"
                                        style="width: 100%;">show</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            {% endfor %}
        </div>
    </div>


</div>
{% endblock %}

I'm considering constructing the table entirely with JavaScript, but I'm unsure if that aligns with Django practices. Is it possible to apply a filter directly to the frontend context data, maybe using JavaScript?
I'd like to implement a filter without reloading the data every time a filter is applied, as I've already loaded the necessary data and want to prevent unnecessary database queries. Any suggestions to move forward would be appreciated.
Thank you!

Edit:
Just a heads up, I prefer not to rely on pre-built Django libraries as I am still learning and require a fair amount of customization.

Edit2: Minimal example for reference -> stack.html:

{% extends "website/base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'evidence/css/style.css' %}">
<div class="container">
    {% csrf_token %}
    <div class="row">
        <div class="col-8">
            <div class="row">
                <div class="col-12">
                    <table class="table">
                        <thead class="table-dark">
                            <tr>
                                <td>
                                    mame
                                </td>
                                <td>
                                    hash
                                </td>
                                <td>
                                    something
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in stack %}
                            <tr>
                                <td>
                                    {{ row.name }}
                                </td>
                                <td>
                                    {{ row.hash }}
                                </td>
                                <td>
                                    {{ row.something }}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

view:

def stack(request):
    context = Stack.objects.all()
    return render(request, "evidence/stack.html", {"stack": context})

URLs:

app_name = "evidence"
urlpatterns = [
 ...,
    path('stact', stack, name='stack'),
]

Model:

class Stack(models.Model):
    name = models.CharField(max_length=150)
    hash = models.CharField(max_length=150)
    something = models.CharField(max_length=150)