Skip to main content

Possible online services disruption due to Internet related outage

A worldwide technology outage is causing disruption to some State of Illinois online systems.  We are aware of this issue and are diligently working on restoration.

Data Table [Manual]

Description

Used to show large or small amounts of data, Data Table components can be built using Manual, CSV, or Asset configurations.  

The following are authoring guidelines for the Manual Data Table.  See also guides for CSV Data Tables, Content Fragment Data Tables, and Assets Data Tables.

Authoring

The Data Table component is designed to organize information in a clean and structured format in rows and columns. It has built-in search, sort, and filter functionalities. 

To use the Data Table [Manual] component, you will need to input data for every cell manually, but first, you must configure your table by indicating how many rows of information you would like, and then establishing column headers and specifications for each.

Configuring the component

  • Search Placeholder: Enter placeholder text for the search input which displays at the top of each Data Table.
  • Total number of Rows: Enter the number of rows needed for your table. Users need to increment this as new rows need added.
  • Number of rows for pagination: Configure the number of rows for pagination.
  • Click "Add" to add a Column
Configuring Component
  • Configure each column:
    • Column Heading: Type the name for the Column Heading
      • Column Details:
        • Choose component for column: Select the appropriate option from the dropdown to Indicate whether the content in your column is text, an image, tags, dates, or numbers.
        • Enable Sorting: This will allow users to click on the column heading to sort the table by this column. If enabled, you will then need to choose whether you want to default by ascending or descending order.
        • Enable filter: If selected, this will add a filter field at the top of the table, allowing users to filter by the values in this column.
      • Column Display: 
        • Hide Column from Table: Indicate if you would like to hide this column from your table.  This can be useful if you want to use a column of info for sorting or filtering purposes, but do not need that information to display to the end-user.
        • Place Column in Child Row: Choosing this option will collapse the column into the child row of the parent row. This allows long tables to display more cleanly on a page in Desktop view, as the Mobile view will automatically child any columns to make the table fit in a readable format.
        • Set Column Heading Values as Header Row: This option will take this specified column and use it's column data as group headings for sorting.
Configuring Columns
Column Display

Once columns are set up, you. will be able to choose from these settings at the bottom of the component, which applies to the full table:

  • Enable Search ?: Enables a text-search field for finding matching results.
  • Enable Filters ?: This option needs checked to enable visually showing the filtering options set in the Column Details for this table.
  • Allow Export CSV ?: Allows an "Export to CSV" button at the top of the table for downloading the table information in an easy to read format.
  • Enable Pagination ?: This option needs checked to enable functionality for creating "pages" within the table after a user-specified amount of items are listed via the "Number of rows for pagination" field.

Once you click the Checkmark at the top right of the component, you will see the table on your page populate with the settings set. Now all that is left is filling the individual cells with data.

Column Components

Based on the settings provided, the table rendered on the page will have empty cells in each column that need manually input.

Each individual table cell is now a component based on the column type: Text, Image, Tag(s), Date, and Number. These components are opened and edited the same way as any other standard component. By clicking on the individual cell, it highlights and indicates the component type at the bottom right corner of that cell. It may be opened using the Configure button and data input into each field as needed.

Author vs Publish View

The display of the Manual Data Table component in the Authoring environment differs from the other data tables in that the Manual Data Table isn't sorted or paginated in the Author environment. This creates a view disconnect that whenever a new row is added, the new row is placed at the bottom of the table. When the author adds data in this new row and opens the Published view of the page, the sorting and pagination functions work and the content is in the order expected.

Examples

Example 1: Manual Data Table with Search and CSV Export Enabled

Breed Group Activity Level Dog Size Coat Type

English Setter

Sporting

Energetic

Medium

Medium

German Short Haired Pointer

Sporting

Needs Lots of Activity

Medium

Short

Smooth Fox Terrier

Terrier

Energetic

Small

Short

Cairn Terrier

Terrier

Regular Exercise

Small

Medium

Beauceron

Herding

Needs Lots of Activity

Large

Medium

Rhodesian Ridgeback

Hound

Regular Exercise

Large

Short

Bloodhound

Hound

Regular Exercise

Large

Smooth

French Bulldog

Non-sporting

Calm

Small

Short

Portuguese Water Dog

working

Energetic

Medium

Long

Example 2: Manual Data Table with pagination and filtering enabled

Breed Group Activity Level Dog Size Coat Type

English Setter

Sporting

Energetic

Medium

Medium

German Short Haired Pointer

Sporting

Needs Lots of Activity

Medium

Short

Smooth Fox Terrier

Terrier

Energetic

Small

Short

Cairn Terrier

Terrier

Regular Exercise

Small

Medium

Beauceron

Herding

Needs Lots of Activity

Large

Medium

Rhodesian Ridgeback

Hound

Regular Exercise

Large

Short

Bloodhound

Hound

Regular Exercise

Large

Smooth

French Bulldog

Non-sporting

Calm

Small

Short

Portuguese Water Dog

working

Energetic

Medium

Long