Get paid to write Drupal tutorials on WebWash

Using DataTables In Drupal 7

The DataTables plugin for jQuery offers enhanced interaction for standard HTML tables. Developers are able to create highly interactive tables with dynamic sorting, filtering and pagination without having to write custom server side code. As always with jQuery plugins, there is a module that integrates the plugin with Drupal. The DataTables Drupal module integrates the plugin with Views. The Views integration allows developers to create “DataTables” tables with just Views and no custom code. The module also offers a theme function called theme_datatable($variables) for rendering tables programmatically.

In this tutorial, we’ll create an interactive table using the Views and DataTables module.

Getting Started

Download and install DataTables and Views module.

Download the DataTables plugin from their download page (1.9+). Extract the file directly into the DataTables module. The path to the plugin should be sites/all/modules/datatables/DataTables.

Fig 1.0

Views Integration

Now that we have everything setup, let’s go into Views and create a table.


1. Go to Structure -> Views (admin/structure/views) and click on the “Add new view” link.

2. Fill in the “Add new view” form with the value defined in Table 1.0.

Table 1-0. Create a new view

Option Value
View name DataTable
Machine name datatable
Show Content (default)
Of Type All (default)
Create a page Checked
Page title DataTable
Path datatable
Display format DataTables

Fig 1.1

Once you have filled in the form click on the “Continue & edit” button at the bottom of the page.

2. Add a few fields to the table. For this tutorial, I’ll add the Node Id, Title and Type field.

Fig 1.2

3. Click on the Full link in the Pager section and change the paper to “Display all items”. We need to turn off the Views pager because DataTables implements its own pager.

Save the view by clicking the Save button in the top right corner.

4. Go to /datatable to test out the view. If everything is working, you should see a table with pagination and a search filter.

Fig 1.3

5. Return back to the edit page for the view and click on the Settings link next to DataTables in the Format area.

Fig 1.4

6. Check the Sortable checkboxes for all the columns so you can sort each column.

Fig 1.5

7. Once you have finished configuring the table, scroll to the bottom and click on the “Apply (all displays)” button, and then save the view.

8. Refresh the views page, and now you should be able to sort by each column.

Fig 1.6

This is a simple use case if you want to learn more, go to the settings section and play around with some of the other options.

Programmatically Render Tables

In the last section, you saw how easy it was to create a table using Views. Now we’ll look at rendering a table programmatically. Rendering a table is pretty easy, the module offers a theme function called theme_datatable($variables). All we need to do is define an array in $variables, and that’s it.

In the example below, you can output the table in two ways. Using Drupal’s Render API or using the theme('datatable', $variables); theme function.

// Table settings.
$attributes['datatable_options'] = array(
  'bFilter'   => TRUE,
  'bInfo'     => TRUE,
// Define table columns
$header = array(
    'data' => t('Column 1'),
    'datatable_options' => array(
      'bSortable' => TRUE,
      'bSearchable' => TRUE,
    'data' => t('Column 2'),
    'datatable_options' => array(
      'bSortable' => TRUE,
      'bSearchable' => TRUE,
// Table data.
$rows = array(
  array('test1', 'test2'),
  array('test2', 'test3'),
  // ...

// Render using Drupal's render API.
$build['datatable'] = array(
  '#theme' => 'datatable',
  '#header' => $header,
  '#rows' => $rows,
  '#attributes' => $attributes,

// Or, render using a theme function.
$variables = array(
  'attributes' => $attributes,
  'header' => $header,
  'rows' => $rows,
$output = theme('datatable', $variables);

If you have any questions, please leave a comment.

About the Author

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Leave a Reply 39 comments

Tushar Bodake - January 30, 2013 Reply

Really nice and easy for programatically implementation of table view.

Cas - February 1, 2013 Reply

Hi , great tutorial, and really nice plugin.
It took a while to get it to work in D7alpha due to confused casing of the install paths (dataTables vs DataTables ). I changed install file that caused the errors so it to worked pretty much as described in this tutorial . Thanks for the tips!

MrPete - April 14, 2013 Reply

Simple datatables is nice. But the real power of the DataTables jQuery module comes into play when working with larger datasets that would be painful to download in one gulp.

I would LOVE to gain access to those kinds of DT features from within Drupal. Any idea how to get there?


    Ivan Zugec - April 15, 2013 Reply

    Unfortunately I don’t think you can do that with the module. You’ll have to implement DataTables yourself with custom JavaScript code.

Ben Chesters - May 12, 2013 Reply

This combined with editable views would be amazing!

Ben Chesters - May 12, 2013 Reply

I found the editable views to be far superior to that to be honest. I just need a version that combines with datatables and VBO so I get full functionality. I am looking to emulate a spreadsheet as much as possible. Thanks for the comment.

    Ivan Zugec - May 12, 2013 Reply

    Thanks for the information that’s good to know.

Jesse - May 31, 2013 Reply

Thanks, ivan, that’s very useful. I found the insert_view module to be a nice combination. Create your datatable view as above, then insert that table right in your content wherever you need it.

    Ivan Zugec - May 31, 2013 Reply

    Thanks for the tip. 🙂

giri - June 2, 2013 Reply

Hi friends,I want to implement individual column search to my datatable. i have been trying,but iam unable to get it.please help me how to implement individual column search for the column names are eno,ename,subject.these data should come from database.

Emmanuel Rivera - July 10, 2013 Reply

Hello Ivan, nice read. I’m in the process of deciding what CMS I should use for a client. A factor that’s playing a strong hand in the decision is the integration of a third party database called DaCdb, and I was wondering if “Data Tables” has the same functions as the WordPress plugin called Table Press?

    Ivan Zugec - July 10, 2013 Reply

    I have never used TablePress before so I can’t give you my opinion about it. The best way to research both solutions is to install Drupal and WordPress, and see which table plugin is better.

Hassan - July 24, 2013 Reply

Thanks Ivan, that was a great tutorial.
I’m fairly new to Drupal. After creating the basic website, my simple requirements are as follows:

– Create a table with multiple columns, to hold data
– Users would be able to view this Table, according to their permissions, be able to Add/Edit their OWN data (It’s added as a new row to the table)
– Users should not be able to view any other user’s data (or Row of data in the Table)

However simple this requirement looks, I wasn’t able to find any straightforward tutorial or solution for implementing this. Or maybe I was overwhelmed by the available options of modules.

Would really appreciate guidance on this!


    Ivan Zugec - July 24, 2013 Reply

    This can be achieved in a few ways. Here’s how I would tackle each point.

    *Create a table with multiple columns, to hold data*

    Create a custom content type and attach some fields to it. Think of a “table” as a content type and “columns” as the fields.

    *Users would be able to view this Table, according to their permissions, be able to Add/Edit their OWN data (It’s added as a new row to the table)*

    Once you have defined a content type and its fields, then use Views ( to display the data as a table.

    You can control who has access to create and edit content by going to the “Permissions” page. Drupal supports “Edit own content” out of the box.

    *Users should not be able to view any other user’s data (or Row of data in the Table)*

    This can be handled in Views by using a contextual filter. You can create a view that’ll only display data that is been authored by the current logged in user.

    This means a user will only ever see their content if you add “Content: Author uid” as a contextual filter.

    There’s one thing you need to be careful of. By default, Drupal allows anonymous access to published content (permission: View published content).

    If you only want the author to access this data, then make sure users can’t access to data by going to ‘node/1’ for example.

    Look at the following two modules if you have custom permission requirements:

    – <>
    – <>

    Hope this helps.

Simone - August 30, 2013 Reply

Nice blog!
I have seen on datatables web site that I can make the columns editable.
How can I have this feauture using Drupal?
How can I have this feauture using the above example?

    Ivan Zugec - August 30, 2013 Reply

    The Drupal module for “DataTables” doesn’t support editable columns. If you want editable columns, you’ll have to implement using custom code.

      Renee - February 20, 2014 Reply

      Just a note, this is no longer true. They seem quite well-supported now 🙂

John - September 6, 2013 Reply

My compliments to the website and the practical tutorials 🙂

How can I implement calculations in the footer of the tables? Like sum, average, max, min etc.?
I’ve implemented the table and it’s very nice even when working with groups.

Thanks in advance!

    Ivan Zugec - September 6, 2013 Reply

    Thanks, I’m glad you enjoy this website.

    If you want to implement some type of calculation within a table, then look at the Views Calc ( module.

      John - September 6, 2013 Reply

      What a quick reaction!
      I’ve tried that already but It’s no working for me. Seems to be broken in D7.3. Ik get only 0 for all calculations.

      The looks of datatables is very nice, would like to have it in that. I just hoped it was possible.

      Thanks 🙂

        Ivan Zugec - September 7, 2013 Reply

        It’s a shame that Views Calc doesn’t work. Must be some compatibility issue with Datatables.

        Thanks for letting us know.

esiaz - September 20, 2013 Reply

Thanks for the tutorial on ‘Programmatically Render Tables’!

Gary Fu - May 14, 2014 Reply

I tried to follow the steps in the examples under drupal 7. Everything seems to work, except the columns do not show the sort mark and cannot be sorted, even they are all enabled (SORTABLE checked). Any help ?

I also tried with Programmatically Render example, with 25 rows and attributes :
‘bScrollY’ => TRUE, ‘sScrollY’ => ‘200px’, ‘bPaginate’ => FALSE, but I don’t see a scroll window. Any help also ?

    Ivan Zugec - May 14, 2014 Reply

    I don’t know what the problem could be. You should ask in the project’s issue queue.

drupaluser - July 18, 2015 Reply

Is there a way to change default sort from ascending to descending

    Ivan Zugec - July 19, 2015 Reply

    Look at changing the sort to descending in Views.

Safar Evi - May 22, 2016 Reply


how can i fix the header of table?

Omar Alawna - May 24, 2016 Reply

Hi Ivan. Thanks for the informative article. I replicated what you have done above. Just wanted to ask about how we can put an “add” “delete” and “update” buttons to the view.
I know about the New Content Type method but I have like 40 fields . Could be done in practice but does not seem to be the best way.

    Ivan Zugec - May 25, 2016 Reply

    Hi Omar,

    Have you tried adding the “Content: Edit link”? This field should give you the edit link.


Jerome - February 8, 2017 Reply

Hi Ivan,

Thanks for your blog, excellent quality.

When I apply point 3:

“3. Click on the Full link in the Pager section and change the paper to “Display all items”. We need to turn off the Views pager because DataTables implements its own pager.”

I get a timeout when I display the view. The view returns 6000 lines, without pagination, can not be displayed.

I see this option on the site “datatable” -> Deferred rendering for speed.

But I was not born or inserted this code, do you have an idea?

Thank you

Thank you

Wisal - February 8, 2017 Reply

Hey, really clean and helpful tutorial.

I have a question if you can help me.

I installed datatables module on my drupal 7 website, but i have a custom html table that is generated onClick event from highcharts graph when user click on “View Data table” option, Please guide me how can i call datatable() function on this table so that my table is displayed nicely with all datatables options like search, sorting, pagination etc. ?

Please note that this is not view or something in theme, this table is generated on jQuery onClick event, but i have full access to jQuery code that is creating this table.

Please help….


    Ivan Zugec - February 9, 2017 Reply

    Hi Wisal,

    I’d highly recommend you look at the DataTables examples page,

    Just view the source and you’ll see how the JavaScript is implemented.


vishwanath nimbala - February 10, 2017 Reply

how can we do column grouping using datatables?

Leave a Reply: