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”.
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”.
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”.
7. Enter in some default values. For this tutorial, I entered in the following.
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”.
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.
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.
Hi Ivan,
is it possible to add multiple images to the table? To be precise I want to create product table with images…
It doesn’t support images out-of-the-box. Look at this issue http://drupal.org/node/1173420.
Hi,
Thanks for this beautiful information, I want to ask how to prevent users from adding cols/rows?
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.
Thank for this very useful tutorial.
I have question: is there a way to save this table on the database?
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.
Thanks for your reply.
Is it possible to lock the header and footer of the table field and can only add the number of rows in between them ?
The module doesn’t support that out of the box. You’ll have to make changes to the code.
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!
Yes, you can use this module with nodeimport but you’ll have to integrate the two together.
After a quick search in the Nodeimport issue queue, I found this issue:
https://drupal.org/node/1214586
Have a look and see if it helps.
thank you very much for your answer and time.
Can table field be queried in views and apply filters for the row and column?
The module does not create a MySQL table in the database, it just displays field values in a HTML table.
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.
Sorry, I don’t understand your question. 🙁
With a bit of custom code or Views, you can display the table wherever you want.
Is it possible to display multiple lines on the same cell, perhaps using HTML?
Have you tried adding HTML into the cells? Just make sure you set the “Table cell processing” option on the field to filter text.
Is it possible to format the text in the cells? Like make them bold or italic?
Have you tried wrapping text with the STRONG or EM tag?
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.
No, I have never imported a CSV into a tablefield. That being said, I would first look at using the Feeds module.
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
I would look at using Webform (https://drupal.org/project/webform) for collecting data. Then, define the table columns as fields.
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?
I’m not sure what you’re trying to achieve, but use Webform as a start. Another module to look at is Entityforms. (https://drupal.org/project/entityform)
Install each module and play around with them and see what you can build.
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”;}}
Unfortunately, I don’t know the exact steps but look in the tablefield_field_formatter_view() function.
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
Hi Deepti,
Why are you manually adding it to the template file? Just configure the formatter in the “Manage display” section.
Cheers,
Ivan
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,
How I remove Row?
You can adjust the total number of rows. I don’t know if you can remove a specific row.