Data Table

Presenting Data in Tables

Summary

A Data Table allows mobile friendly data to be displayed in a sortable and searchable table, and can be downloaded by site visitors.

Audience

Web Managers.

Example Data Table

Data Table example.

Working Example

To see a working example of a Data Table on the Digital Commons website, navigate to:

Drupal Help > Drupal Help Topics

How To

  • 1

    Create Data Table

    Navigate to Content > Add Content > Data Table.

    • Click Add Content.

    Add Content menu.

    • Click Data Table.

    Data Table Link

  • 2

    Title

    Fields marked with an asterisk (*) are required.

    • Title (*) — Enter a Title for the Data Table. For optimal length, keep the title less than 60 characters, including spaces.

    Title field.

  • 3

    Body

    • Body — Descriptive text entered in the Body field (Text Editor) appears above the Data Table.

    Body field.

  • 4

    Table CSV File

    Data Tables are generated with comma-separated values (CSV) files, a simple text format for spreadsheets.

    Header

    • The first row of the CSV file serves as the sortable table header.

    Table Header row.

    Links

    To place a hyperlink on a value in a table cell, the link must be entered as HTML code. If cutting-and-pasting, use the Paste as Values option in Excel.

    Add a New File

    Upload a CSV file groomed in Microsoft Excel to be rendered as a responsive HTML table.

    • Click Choose File.

    Choose File button.

    • Select the appropriate CSV file. (In this example, Data-Table-Example.csv).

    Select CSV file.

    • Click Open.

    Open button.

    • The CSV file uploads automatically.

    Uploaded CSV file.

    • To remove the Data Table, click Remove.

    Remove button.

  • 5

    Table Width

    Use the dropdown menu to set Table Width options:

    • None
    • Full Width
    • Normal
    • Narrow
    Table Width menu.

     

    Table Width options menu.

     

  • 6

    Results Per Page

    Results Per Page (*) — Choose the number of results to display per page. The default value is 100.

    Results Per Page dropdown menu.

    Multiple Pages

    If the Data Table spans multiple pages, use the Previous and Next buttons to navigate between pages.

    Multiple Page entries.

    Previous and Next buttons.

  • 7

    Sorting

    • Check the Sort Alphabetically option to display table entries alphabetically.
    • Check the Display Date of Last Update option to show the modification date below the Data Table.
    Sort and Display options.
    Last modified date.
  • 8

    Save

    • Click Save, at the bottom of the Edit page, to save the page and view results.

    Save button.

  • 9

    Export Data Table

    To update or edit the Data Table:

    • Click the Export Table Data link below the table entries.

    Export Table Data link.

    • The CSV file downloads automatically.
    • Update or edit the CSV file as desired, and then re-upload it as described in Step 4 above.
    • Save the page and view results.