Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Django – Showing model data directly into table with sorting and pagination
In this article, we will see how to make a table in Django which will render model data. We are not going to use the standard <table> tag of HTML. We will use the django_tables2 library which provides features to directly show Django model data in a table with sorting and pagination.
Installing django_tables2
First, install the django_tables2 package ?
pip install django_tables2
Add it to your settings.py ?
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django_tables2',
'your_app',
]
Creating the Model
In models.py, create a simple model for testing ?
from django.db import models
class Employee(models.Model):
name = models.CharField(max_length=100)
salary = models.CharField(max_length=20)
department = models.CharField(max_length=50, default='IT')
def __str__(self):
return self.name
Don't forget to run migrations ?
python manage.py makemigrations python manage.py migrate
Creating the Table Class
In views.py, create a table class and view ?
from django.shortcuts import render
from .models import Employee
import django_tables2 as tables
class EmployeeTable(tables.Table):
class Meta:
model = Employee
template_name = "django_tables2/bootstrap.html"
fields = ("name", "salary", "department")
class TableView(tables.SingleTableView):
table_class = EmployeeTable
queryset = Employee.objects.all()
template_name = "table_example.html"
paginate_by = 10 # Show 10 records per page
URL Configuration
In your app's urls.py, add the table view ?
from django.urls import path
from . import views
urlpatterns = [
path('table/', views.TableView.as_view(), name='table')
]
Creating the Template
Create templates/table_example.html with the following content ?
<!DOCTYPE html>
<html>
<head>
<title>Employee Table</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Employee Data</h1>
{% load django_tables2 %}
{% render_table table %}
</div>
</body>
</html>
Adding Sample Data
You can add sample data through Django admin or create a management command. Here's how to add data programmatically ?
# In Django shell: python manage.py shell from your_app.models import Employee Employee.objects.create(name="John Doe", salary="50000", department="IT") Employee.objects.create(name="Jane Smith", salary="60000", department="HR") Employee.objects.create(name="Bob Johnson", salary="55000", department="Finance")
Features of django_tables2
The django_tables2 library automatically provides:
- Sorting − Click on column headers to sort data
-
Pagination − Controlled by the
paginate_byattribute - Bootstrap styling − Clean, responsive table design
- Customizable columns − Control which fields to display
Custom Table Configuration
You can customize the table further ?
class EmployeeTable(tables.Table):
name = tables.Column(verbose_name="Employee Name")
salary = tables.Column(verbose_name="Monthly Salary")
class Meta:
model = Employee
template_name = "django_tables2/bootstrap.html"
fields = ("name", "salary", "department")
attrs = {"class": "table table-striped"}
Conclusion
The django_tables2 library provides an efficient way to display Django model data with built−in sorting and pagination. It eliminates the need to manually create HTML tables and handles common table functionality automatically.
3K+ Views
