Pattern Library (ver. 1.9)

Data display widget

The Data display widget allows users to search and filter through displayed information.

There are two types of responsive views available for the data tables. Resize your window to view.

Data display widget

Demo

Community Events

Search for community events in Calgary by event name, date or location

August 2019

Central Memorial Park:

  • Memorial Park Pride
    Saturday, August 24, 2019, 11 a.m. – 5 p.m.
  • Pride Block Party
    Tuesday, August 27, 2019, 5 – 10 p.m.
  • Movie Night in the Park
    Friday, August 30, 2019, 9:45 – 11:15 p.m.

Olympic Plaza:

  • Muslim Heritage Day
    Saturday, August 24, 2019, 11 a.m. – 6 p.m.

Stephen Avenue Walk:

  • Salsa On The Street
    Friday, August 23, 2019, 6 – 9 p.m.
  • Memorial Park Pride
    Sunday, August 25, 2019, 11 a.m. – 5 p.m.
Event Name Date and Time Location
Salsa On The Street Friday, August 23, 2019, 6 – 9 p.m. Stephen Avenue Walk
Memorial Park Pride Saturday, August 24, 2019, 11 a.m. – 5 p.m. Central Memorial Park
Muslim Heritage Day Saturday, August 24, 2019, 11 a.m. – 6 p.m. Olympic Plaza
Memorial Park Pride Sunday, August 25, 2019, 11 a.m. – 5 p.m. Stephen Avenue Walk
Pride Block Party Tuesday, August 27, 2019, 5 – 10 p.m. Central Memorial Park
Movie Night in the Park Friday, August 30, 2019, 9:45 – 11:15 p.m. Central Memorial Park

Code


		<div class="cui content-lookup bg-medium mb-lg ">
			<div class="row">
				<div class="cui col-md-6">
					<h2> {{ Content Title }}</h2>
					<label for="sub-search">Search</label>
					
					<!-- Search bar option for content lookup-->
					<div class="cui input-group">
						<input name="sub-search" type="search" class="form-control">
						<button class="cui btn-lg primary">Submit<span class="cicon-angle-right right" aria-hidden="true"></span></button>
					</div>	

					<!-- Dropdown option for content lookup -->
					<div class="cui input-group">
						<select class="form-control">
							<!-- repeat options as necessay -->
							<!-- Option value should start at 0 and count up for each option -->
							<option value="{{0}}">{{ Option One }} </option>
						</select>
					
						<button class="cui btn-md primary">
							<span class="btn-wrapper">
								<span class="btn-text">
								Submit
								</span>
								<span class="cicon-angle-right right" aria-hidden="true"></span>
							</span>
						</button>
					</div>	
				</div>
			</div>	

			<div class="row content-lookup-results">
				<div class="col-md-10">
					<p class="details">{{ Content Search Instruction }}</p>
					
					<!-- List results option code -->
					<div class="subtitle-block cui">
						<h2> {{ Main Category Title }} </h2>
						<hr aria-hidden="true">
					</div>
					<div class="p-xxs">
						<h3> {{ Sub Category Title }} </h3>
						<ul>
							<!-- repeat list as necessary -->
							<li class="mb-xs ml-xs">
								<div> {{ Listing Title }} </div>
								<div class="ml-xs"> {{ Listing Paragraph }} </div>
							</li>
					</div>	

					<!-- Table results option code -->		
					<div class=" {{ table-responsive-md }} ">
						<!-- 'normal-view' class is to be added for the normal table view -->
						<table class="cui {{ normal-view }} bordered striped dark-header">
							<thead>
								<tr>
									<!-- repeat heading as necessary -->
									<th>{{ Heading }}</th>									
								</tr>
							</thead>
							<tbody>
								<tr>
									<!-- repeat table cell as necessary -->
									<td>{{ Content }}</td>
								</tr>
							</tbody>
						</table>
					</div>	
				</div>	

				<div class="cui col-md-10">
					<!-- Optional Load more code -->
					<button class="cui btn-md utility-btn mt-sm mb-md">Load More<span class="cicon-angle-right right" aria-hidden="true"></span></button>

					<!-- Optional Pagination Code -->
					<!-- Add a descriptive label for screen readers. -->
					<nav aria-label="label for Assistive Technology users">
					<!-- The `justify-content-center` class can be used to center the pagination. -->
						<ul class="pagination justify-content-center ">
							<!-- Previous page link -->
							<li class="page-item prev d-none">
								<a class="page-link" href="#">
									<span class="cui cicon-angle-left left" aria-hidden="true"></span>
									<span class="text">Prev</span>
								</a>
							</li>
		
							<!-- Numerical page items -->
							<!-- Mark the current page with the `active` class -->
							<!-- Mark the other numerical items with the `inactive` class -->
							<li class="page-item active">
								<a class="page-link" href="#">1</a>
							</li>
							<!-- repeat pages as necessary -->
							<li class="page-item inactive">
								<a class="page-link" href="#">{{ Page Number }}</a>
							</li>
		
							<!-- Next page link -->
							<li class="page-item next">
								<a class="page-link" href="#">
									<span class="text">Next</span>
									<span class="cui cicon-angle-right right" aria-hidden="true"></span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>

Usage

General guidelines

This widget is designed for small data lists. There are no filter options currently on this widget, so it is important to keep in mind how much data will be displayed. The user will become frustrated if they need to navigate through many pages of data.