Data display

The data display component allows users to locate relevant information through searching and filtering through many rows of data. Users can search the entire data set with the search bar feature, or use the preset dropdown options to filter by a certain criteria.

Component data

Component resources:
SCSS files l coc.table.js

Functional grouping: Text and data


Configure: select the dropdowns below to display the variety of options that a data display supports.

Data display title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.




Responsive preview

Usage best practices

Consider using data display when:

  • the displayed information is expected to be complex and long that cannot be effectively displayed on one page
  • users may not know the exact words they are looking for

Usage examples:

  • address list lookup
  • land development zoning
  • traffic signal warrant studies

Related components:


Do not set more than one filtering option in the dropdown list. When unsure of filtering criteria enable the search bar instead.