title: display data in tables in django
body: <p>I have narrowed down to the following , if anyone can help me pointing out how i can convert the following into table view that would be awesome. Following html is extended from the base.html</p>
  
  <pre><code>{% block page_content %}
  
  
  &lt;h1&gt;Projects&lt;/h1&gt;
  &lt;div class="row"&gt;
  {% for project in projects %}
      &lt;div class="col-md-4"&gt;
         &lt;div class="card mb-2"&gt;
              &lt;img class="card-img-top" src="{% static project.image %}"&gt;
              &lt;div class="card-body"&gt;
                  &lt;h5 class="card-title"&gt;{{ project.title }}&lt;/h5&gt;
                  &lt;p class="card-text"&gt;{{ project.description }}&lt;/p&gt;
                  &lt;a href="{% url 'project_detail' project.pk %}"
                     class="btn btn-primary"&gt;
                      Read More
                  &lt;/a&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      {% endfor %}
  &lt;/div&gt;
  {% endblock %}
  </code></pre>
  
  <p>Need help with displaying data in gridview . I m new to all this. I m able to read and display the data on a page from mongodb but need to display in a table.</p>
  
  <p>million $ question for me now is where should i be adjusting the following snippet in my code to give me gridview</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;Field 1&lt;/th&gt;
          &lt;th&gt;Field N&lt;/th&gt;
      &lt;/tr&gt;
      {% for item in query_results %}
      &lt;tr&gt; 
          &lt;td&gt;{{ item.field1 }}&lt;/td&gt;
          ...
          &lt;td&gt;{{ item.fieldN }}&lt;/td&gt;
      &lt;/tr&gt;
      {% endfor %}
  &lt;/table&gt;
  </code></pre>
  
  <p>My urls.py</p>
  
  <pre><code>from django.urls import path
  from .import views
  
  urlpatterns = [
      path("",views.project_index, name = "project_index"),
      path ("&lt;project_detail&gt;/",views.project_detail, name = "project_detail"),
      #path("&lt;int:pk&gt;/", views.project_detail, name = "project_detail"),
  ]
  </code></pre>
  
  <p>My model.py</p>
  
  <pre><code>from django.db import models
  
  # Create your models here.
  class Project(models.Model):
      title = models.CharField(max_length=100,primary_key=True)
      desc = models.CharField(max_length=100)
      urls = models.CharField(max_length=100)
      #image = models.FilePathField(path="/img")
  
      class Meta:
          db_table = "spiderCollection1"
  </code></pre>
  
  <p>additional tables.py</p>
  
  <pre><code>import django_tables2 as tables
  from .models import Project
  import itertools
  
  class ProjectTable(tables.Table):
      class Meta:
          model = Project
          template_name = "django_tables2/bootstrap.html"
          title = tables.Column("title")
          desc = tables.Column("desc")
          urls = tables.Column("urls")
  </code></pre>
  
  <p>following is views.py</p>
  
  <pre><code>from django_tables2 import SingleTableView
  from django.shortcuts import render
  from projects.models import Project
  from projects.tables import ProjectTable
  
  # Create your views here.
  class ProjectListView(SingleTableView):
      model = Project
      table_class = ProjectTable
      template_name = '/projects.html'
  
  def project_index(request):
      projects = Project.objects.all()
      context = {
          "projects":projects
      }
      return render (request, 'project_index.html',context)
      #return render (request, 'project_index.html',locals())
  
  def project_detail(request, pk):
      #project = Project.objects.get(pk=pk)
      project = Project.objects.all()
      context = {
          "project": project
          #'personal_portfolio':project
      }
      return render(request, 'project_detail.html',context)
  </code></pre>
  
  <p>my main base.html</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
      &lt;div class="container"&gt;
          &lt;a class="navbar-brand" href="{% url 'project_index' %}"&gt;Portfolio&lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
            &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
            &lt;ul class="navbar-nav mr-auto"&gt;
  
                &lt;li class="nav-item active"&gt;
                &lt;a class="nav-link" href="{% url 'project_index' %}"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Blog&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!--&lt;style&gt;
          h1 {
              border: 5px solid red;
              }
  
          h2 {
              border: 4px dotted blue;
              }
          div {
              border: double;
              }
        &lt;/style&gt;
        --&gt;
  
  
  &lt;/nav&gt;
  
  &lt;div class="container"&gt;
      {% block page_content %}
      {% endblock %}
  &lt;/div&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  </code></pre>
  
  <p>and now project_index.html</p>
  
  <pre><code>{% extends "base.html" %}
  {%load render_table from django_tables %}
  {% load static %}
  {% block page_content %}
  
  
  &lt;h1&gt;Projects&lt;/h1&gt;
  &lt;div class="row"&gt;
  {% for project in projects %}
      &lt;div class="col-md-4"&gt;
         &lt;div class="card mb-2"&gt;
              &lt;img class="card-img-top" src="{% static project.image %}"&gt;
              &lt;div class="card-body"&gt;
                  &lt;h5 class="card-title"&gt;{{ project.title }}&lt;/h5&gt;
                  &lt;p class="card-text"&gt;{{ project.description }}&lt;/p&gt;
                  &lt;a href="{% url 'project_detail' project.pk %}"
                     class="btn btn-primary"&gt;
                      Read More
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      {% endfor %}
  &lt;/div&gt;
  {% endblock %}
  </code></pre>