Using TableField in Drupal 7

The TableField module implements a custom field that allows users to attach tabular data to any content page/entity type. Data can be entered into the table manually or imported via a CSV upload. The amount of rows and columns can be configured globally on an entity type or on a per node basis. The field can also be configured to allow users to export the tabular data as a CSV file.

In this tutorial, we’ll create a Company content type and use this module to display opening times.

Getting Started

Setting up the module is very easy as there are no dependencies. Simply download TableField and install the module.

Create Company Content Type

To demonstrate how to use this module, we’ll create a content type called Company and we’ll attach a “Table Field” to the content type that will allow site editors to add opening times.

1. Go to Structure -> Content types (admin/structure/types) and click on “Add content type”.

2. Add Company to the Name field and click on “Save and add fields”.

Fig 1.0

3. Create an “Opening times” field using the settings defined in Table 1-0.

Table 1-0. Define an “Opening times” field

Option Value
Label Opening times
Machine name field_opening_times‎
Field type Table Field
Widget Table field

4. Check both “Allow users to export table data as CSV” and “Lock table field defaults from further edits during node add/edit.” checkboxes and click on “Save field settings”.

Fig 1.1

5. Scroll down to the “Default value” field-set and click on the “Change number of rows/columns.” field-set.

6. For this tutorial, change the “How many Columns” to 3 and “How many Rows” to 8 and then click on “Rebuild Table”.

Fig 1.2

7. Enter in some default values. For this tutorial, I entered in the following.

Fig 1.3

8. Scroll to the bottom and click on “Save settings”.

TableField in Action

Now that we have configured our content type and field, let’s now see it in action.

1. Go to Content -> “Add content” and click on Company (node/add/company).

2. Enter in a title and if you scroll down you should see the “Opening times”.

Fig 1.4

If you click on the “Change number of rows/columns.” field-set, you can change the amount of columns and rows for this specific node page. From the “Import from CSV” field-set, you can upload data via a CSV file.

If you want to test out this functionality, save the CSV data below into a file and upload the file using the “File upload” field.

Days,To,From
Monday,9am,5pm
Tuesday,9am,5pm
Wednesday,9am,5pm
Thursday,9am,9pm
Friday,9am,5pm
Saturday,9am,4pm
Sunday,Closed,Closed

3. Once you have saved the node form, you should be able to see the data within a table.

Fig 1.5

If you want to allow users to export the tabular data, then you’ll have to assign the “Export Tablefield Data as CSV” permission to a role.

If you have any questions, please leave a comment.

Ivan Zugec

About Ivan Zugec

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.

31 thoughts on “Using TableField in Drupal 7”

  1. Hi Ivan,

    is it possible to add multiple images to the table? To be precise I want to create product table with images…

    1. On the field settings page there is a checkbox called “Lock table field defaults from further edits during node add/edit.”.

      This checkbox locks the table and stops users from editing it on the node add/edit page.

    1. The field data is stored in the database no matter what. But are you referring to the table structure/columns?

      You can not use this module to save a table within the database.

  2. Is it possible to lock the header and footer of the table field and can only add the number of rows in between them ?

  3. Hi. Is it possible to use tablefield with nodeimport module? I don’t see tablefield as target in node import settings althought I’ve inserted it into my content type. Thank you very much for your time!

  4. Can the HTML table be read by another module and displayed on another page? Just a thought, and I understand that it is not in the database, so this is really outside the scope of this thread perhaps.

    1. Sorry, I don’t understand your question. 🙁

      With a bit of custom code or Views, you can display the table wherever you want.

    1. Have you tried adding HTML into the cells? Just make sure you set the “Table cell processing” option on the field to filter text.

  5. I wondered if you have tried importing csv data into a tablefield?
    I’ve just migrated from 6 to 7 and have found that none of my Tablefiedl data has migrated which appears to be a known bug.
    At the moment i am thinking about migrating the data using feeds importer.
    Any recommendations? Great tutorial by the way.

  6. I need to create a table in which any user can input data could you please tell be the module of steps to do so…i am a newbie to drupal

      1. problably i missed to mentoin a few things…..
        table i will be creating will take input from user and display the same on other page is it possible using webform module?

  7. Need some assistance displaying the table field data to the front end. I have attached the two line code which describes how I retrieve the value and display.

    //EVENT CALENDER
    $event_calender = $events_content->field_event_calendar[‘und’][0][‘value’];
    $output .= $event_calender;

    I expected to see a table but it turn up showing the below.

    a:27:{s:8:”cell_0_0″;s:6:”(0, 0)”;s:8:”cell_0_1″;s:6:”(0, 1)”;s:8:”cell_0_2″;s:6:”(0, 2)”;s:8:”cell_0_3″;s:6:”(0, 3)”;s:8:”cell_0_4″;s:6:”(0, 4)”;s:8:”cell_1_0″;s:6:”(1, 0)”;s:8:”cell_1_1″;s:6:”(0, 1)”;s:8:”cell_1_2″;s:6:”(0, 0)”;s:8:”cell_1_3″;s:6:”(0, 0)”;s:8:”cell_1_4″;s:6:”(0, 0)”;s:8:”cell_2_0″;s:6:”(2, 0)”;s:8:”cell_2_1″;s:6:”(0, 0)”;s:8:”cell_2_2″;s:6:”(0, 0)”;s:8:”cell_2_3″;s:6:”(0, 0)”;s:8:”cell_2_4″;s:6:”(0, 0)”;s:8:”cell_3_0″;s:6:”(3, 0)”;s:8:”cell_3_1″;s:6:”(0, 0)”;s:8:”cell_3_2″;s:6:”(0, 0)”;s:8:”cell_3_3″;s:6:”(0, 0)”;s:8:”cell_3_4″;s:6:”(0, 0)”;s:8:”cell_4_0″;s:6:”(4, 0)”;s:8:”cell_4_1″;s:6:”(0, 0)”;s:8:”cell_4_2″;s:6:”(0, 0)”;s:8:”cell_4_3″;s:6:”(0, 0)”;s:8:”cell_4_4″;s:6:”(0, 0)”;s:7:”rebuild”;a:3:{s:10:”count_cols”;i:5;s:10:”count_rows”;i:5;s:7:”rebuild”;s:13:”Rebuild Table”;}s:6:”import”;a:2:{s:37:”tablefield_csv_field_event_calendar_0″;s:0:””;s:30:”rebuild_field_event_calendar_0″;s:10:”Upload CSV”;}}

  8. Hi,
    I would like to display table in template file.
    When I use field_get_items(‘node’, $node, ‘field_table_test’)[0][‘value’];

    I get output like below:
    a:5:{s:7:”caption”;s:25:”Website-Navigationsdaten “;s:7:”rebuild”;a:3:{s:10:”count_cols”;s:1:”3″;s:10:”count_rows”;s:2:”15″;s:7:”rebuild”;s:13:”Rebuild Table”;}s:6:”import”;a:2: {s:5:”row_0″;a:4:{s:5:”col_0″;s:15:”Art der Cookies”;s:5:”col_1″;s:12:”Beschreibung”;s:5:”col_2″;s:41:”Optionen zur Verwaltung der Einstellungen”;s:6:”weight”;s:1:”1″;}s:5:”row_1″;a:4:{s:5:”col_0″;s:22:”Erforderliche Cookies”;s:5:”col_1″;s:800:”deaktivieren..”;s:6:”weight”;s:1:”2″;}s:5:”row_2″;a:4:{s:5:”col_0″;s:0:””;s:5:”col_1″;s:0:””;s:5:”col_2″;s:0:””;s:6:”weight”;s:2:”15″;}}}
    Please help me getting it the way it perfectly displays on ontent type without calling it in template file
    Thanks a lot

  9. This tutorial is great and the one about display suite for drupal 8 is awesome.
    Now, I want to use this module for clock-in/clock-out system.
    1) i will create a tablefield inside a node with 31 rows (nbr of days per month)
    2) the table will have 3 colums (Day | Time In | Time Out)
    3) Create a node for each user.
    4) Using rules, when a user press “Clock in” or “Clock out” button, it will automatically fill in the data for the user inside the table.

    Table example:
    DAY | TIME IN | TIME OUT
    01-Jul-18 | 08:00 | 05:00
    02-Jul-18 | 08:05 | 05:10
    03-Jul-18 | 07:56 | 05:01
    04-Jul-18 | 08:01 | 04:58

    Is it possible ?

    Thank you,

Leave a Comment

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.