Table

A table shows information in columns and rows. Sower offers three variations of a table.

This component is based on USWDS.

Table (Standard - Responsive)

On mobile-sized screens, this table will display vertically.

How to author:

• In the DA menu, go to Library > Blocks > Table and select Table (Standard - Responsive).

  

Table (Scrollable)

On mobile-sized screens, this table will remain horizontal and be scrollable.

How to author:

• In the DA menu, go to Library > Blocks > Table and select Table (Scrollable).

  

Table (Scrollable - Column Heading)

On mobile-sized screens, this table will remain horizontal and be scrollable. All rows in the first column will be styled as headers.

How to author:

• In the DA menu, go to Library > Blocks > Table and select Table (Scrollable).

  

Table (Sortable)

This table allows users to reorder rows in ascending or descending order by clicking column headers. You can sort columns by date, month, position(1st, 2nd, etc.), numeric value, or alphabetical order.

How to author:

• In the DA menu, go to Library > Blocks > Table and select Table (Sortable).

  OR

• Select any tables in the DA menu, then add sortable to parentheses, and separate classes with a comma

Table (Searchable)

The Searchable Table is a useful block that allows users to search data within the table by typing in a value into a search field at the top of the table.

How to author:

To create a Sortable Table while editing a webpage, click on the DA menu and navigate to Library > Blocks > Table. From the dropdown, select “Table (Searchable).” This will add the table to your webpage.

Additionally, you can select any table from the DA menu, and then add “searchable” in parentheses to the “table” class, separating it from the “table” class with a comma (e.g.: “table (scrollable, searchable)”)

Table (Dynamic)

The Dynamic Table is unlike the above tables. While the others require manual data entry, the Dynamic Table can pull information from a targeted JSON (JavaScript Object Notation) file.

How to author:

1. In the DA menu, go to Library > Blocks > Table and select Table (Dynamic).

OR

1. Select any tables in the DA menu, then add dynamic to the parentheses, and separate classes with a comma (e.g.: “table (scrollable, dynamic)”).

2. Within the first row, add a link to the source JSON file.

3. In the table header, type in the text that you would like to be displayed as the table header.

4. Within the table row, type in JSON file properties that you want to be associated with the corresponding header.
   (Optional) You can create a link for the table fields to one of the JSON properties by clicking on the DA toolbar > edit link > manually type the property name from the JSON file in the URL field > OK.

5. (Optional) Add filters to the data by inserting rows with three columns. The first column specifies the JSON property to filter on, the second column indicates the filter operator from the list below, and the third column provides the criteria value for filtering. Multiple filters can be used. The available operators are:

   1. = (Equal to)
   2. > (More than)
   3. < (Less than)
   4. != (Not Equal to)
   5. >= (More than or Equal to)
   6. <= (Less than or Equal to)
   7. contains (Includes a specified text)
   8. before (Before a specified date)
   9. after (After a specified date)
   10. current (Now or after)
   11. past (Before the current date)