Sunday, February 17, 2013

Simple employee table with OpenStack Horizon DataTable module

I was working on OpenStack dashboard (aka Horizon) few past few months and I will share a simple way to build your data tables based on Horizon.
To give a brief introduction of Horizon, it is the official dashboard project of OpenStack, the cloud operating system. Horizon is a python Django application. It provides pre-defined modules for common web application requirements like tabs, workflow, table etc. From Grizzly release onward Horizon modules are separated from OpenStack specific code. It allows one to use Horizon modules independently.

To build a data table in Horizon you need to simply create a model class for your data. The important thing to remember here is that the class must have an "id" attribute. Horizon will build rows based on this id. It can be alpha numeric also. Though it is not mandatory to display the id column in the table, you can still have it. Below is the data model for my Employee table -

class Employee:
    Employee class represents the employee data

    def __init__(self, emp_id, name, addr, salary): = emp_id = name
        self.addr = addr
        self.salary = salary
The employee class has 4 attributes - id, name, address and the salary. Each of these attributes can be displayed in a column of our Horizon DataTable. I use below code in my

from horizon import tables
from .tables import TabledisplayTable

class IndexView(tables.DataTableView):
    table_class = TabledisplayTable
    template_name = 'project/tabledisplay/index.html'

    def get_data(self):
        strobj = '[{"id": 111, "name": "emp1", "salary": 1000, "addr": "kolkata"}, {"id": 222, "name": "emp2", "salary": 5000, "addr": "bangalore"}]'
        instances = json.loads(strobj)
        ret = []
        for inst in instances:
            ret.append(Employee(inst['id'], inst['name'], inst['addr'], inst['salary']))
        return ret

We need to create a with TabledisplayTable class which allows us to map the columns to model attributes. Like this -

from horizon import tables
from django.utils.translation import ugettext_lazy as _

class TabledisplayTable(tables.DataTable):
    name = tables.Column("name",
                         verbose_name=_("Employee Name"))
    salary = tables.Column("salary", verbose_name=_("Salary in Rs"))
    addr = tables.Column("addr",

    class Meta:
        name = "emptable"
        verbose_name = _("Employee Table")

Finally we need a Django template to render this table. I have used the following code -
{% extends 'base.html' %}
{% load i18n %}
{% block title %}{% trans "Table Display" %}{% endblock %}

{% block page_header %}
  {% include "horizon/common/_page_header.html" with title=_("Employee Table Display") %}
{% endblock page_header %}

{% block main %}
  {{ table.render }}
{% endblock %}

This should create the Employee table with 2 rows using Horizon DataTable module. Try it out.


  1. This comment has been removed by the author.

  2. I have followed your this tutorials and it helps me a lot.

    I would like to ask some help, I am a newbie developer using django-framework, its been several months since i started to learning it.

    My boss ask me to develop some custom modules for openstack horizon and this tutorial makes me understand it a little.

    I am having a problem passing a data to a horizon datatable. Can you please have me some example fetching a data from openstack_dashboard.api.nova and pass it to a table.
    I have tried to do this but it always gives me an error telling the object is not itterable, i am using

    usage = api.nova.usage_get(self.request, self.tenant_id, start, end)

    1. For making the DataTable, you need a list (iterable) object. NovaUsage object is not a list. You need to extract the fields from the usage object and make a list before you return from get_data() method.

  3. hii.. such a nice tutorial .. really helpful for me. actually i'm customizing horizon, i've created on tab with datatable and i have to fill that table from rest api which give json format in response. i used same code which you've written but i m getting one error "string indices must be integers, not str". please help me if you know how to fix it. here is my code for view

    1. I think you missed to convert the swobj variable, which is a string, to a python object. Try to use
      x = json.loads(swobj)
      then use the x variable in your for loop.

    2. yes yes, that's my mistake. now i have table with data and table action. when i click on button it show ajax-model but in my case instead of drawing form inside ajax-model i have to create table which full fill by ajax-call response and need to draw html inputs like text and radio button. travel lots of horizon tutorial but didn't get any clue. . hope you understand my point. hoping some helpful suggestion from you.

      Thanks a lot :)

    3. I am not in touch with Horizon for almost a year now. Can't be of much help to you.