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.

    • Example: <a href="https://digitalcommons.nc.gov/drupal-help/drupal-help-topics/audio-and-podcast-file-embed">Audio and Podcast File Embed</a>
    • A groomed HTML Generator spreadsheet (Excel) is available to help Web Managers work with large Data Tables.

    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

    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.

  • 6

    Sorting

    • Leave the Sorting option checked to display table entries alphabetically.

    Sorting checkbox.

  • 7

    Save

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

    Save button.

  • 8

    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.