Search code examples
djangopython-3.xhtml-tabledjango-templates

Generating a dynamic HTML table from django template language


I am trying to generate a dynamic html table using django template language and i've not been able to do it yet.

Here is some info about my Views.py and table.html

Views.py

Class table(TemplateView):
      template_name = 'table.html'

      def get(self, request):
             header = {'header':['#', 'chemblID','Preferable Name']}
             rows = {'rows':{
                            'id':[1,2,3],
                            'chemblid':[534988,31290, 98765], 
                            'prefName':['A', 'B', 'C']}}

             return render(request,self.template_name, header,rows)

(The data is hard-coded since i am still testing. However it's supposed to change according to the user input.)

table.html

<table class="table">
    <thead>
        <tr>
            {% for k in header %}
            <th>{{k}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for r in rows %}
            <tr>
                {% for e in r %}
                    <td>{{e.id}}</td>
                    <td>{{e.chemblid}}</td>
                    <td>{{e.prefName}}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>

I am trying to generate something like this:

--------------------------------------------------------------
|     #      |      chemblID      |      Preferable Name      |
--------------------------------------------------------------
|     1      |       534988       |            A              |
--------------------------------------------------------------
|     2      |       31290        |            B              |
--------------------------------------------------------------
|     3      |       98765        |            C              |
--------------------------------------------------------------
|    ...     |        ...         |           ...             |
--------------------------------------------------------------

Thank you in advance for spending your time


Solution

  • You can use the get_context_data method to send context to your template

    Class table(TemplateView):
          template_name = 'table.html'
    
          def get_context_data(self, **kwargs):
                ctx = super(table, self).get_context_data(**kwargs)
                ctx['header'] = ['#', 'chemblID','Preferable Name']
                ctx['rows'] = [{'id':1, 'chemblid':534988,'prefName':'A'},
                               {'id':2, 'chemblid':31290,'prefName':'B'},
                               {'id':3, 'chemblid':98765,'prefName':'C'}]
                return ctx
    

    And you can remove the extra loop in the html

    <table class="table">
        <thead>
            <tr>
                {% for k in header %}
                <th>{{k}}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for r in rows %}
                <tr>
                    <td>{{r.id}}</td>
                    <td>{{r.chemblid}}</td>
                    <td>{{r.prefName}}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>