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

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files l coc.table.js

Functional grouping: Text and data

Demo

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.

Code


				
			

		
		
			
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:




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


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