Skip to Content Skip to Navigation
NY.gov Portal State Agency Listing

New York State Department of Labor User Experience (UX) Guide

username@domain.com | logout

Client-side DataTables

Overview

DataTables is a jQuery plugin for use with displaying tabular data that has been included as a global library for the User Experience Framework. There are many useful features for display purposes, such as paging, scrolling, column sorting, column sizing, filtering, and more... all achieved via client-side scripting. The styling DataTables uses jQuery-UI's Themeroller, which is in included along with jQuery-UI as a standard part of the framework.

A DataTable begins as a normal table - if javascript is disabled, only the normal table is shown, however, if javascript is enabled, the DataTable is built client-side. Building functionality progressively allows for graceful degradation rather than application failure as a user agent's capabilities decrease.

See unobtrusive javascript and progresive enhancement.

Refer to the implementation and examples below on usage and guidelines as well as the DataTables documentation to explore further features and capabilities.

Availability:v.0.2.0

Implementation

As of v.0.3.1 the DataTables Library is included as part of the User Experience Framework's standard library. There are no scripts to import, as User Experience already includes the library.

Using the predefined function hook, give the target table a class of jQDataTables, to provide the proper CSS class hooks to the predefined DataTables script.

<table id="mySampleTableID" class="data-table jQDataTables" >			
	<caption>My Sample Data Table</caption>
	... table elements ...
<table>

Please see the data table layout documentation on adjusting column widths.

Table Structure

In order for the DataTables Plugin to work correctly, the HTML Table should be constructed properly, making use of <thead> and <th> for column headers, and <tbody> to designate table's content area.

<table id="mySampleTableID" 
	class="data-table jQDataTables" >			
	<caption>My Sample Data Table</caption>
	<thead>
		<tr>
			<th>Version</th>
			<th>Name</th>
			<th>Release Date</th>
			<th>Note</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>v.0.1.0</td>
			<td>-</td>
			<td>?</td>
			<td></td>
		</tr>
		...
	</tbody>
</table>				

JSF Compatibility

Client-side DataTables plugin is compatible with JSF. To use the plugin with JSF data tables, give the JSF data table the CSS class hook.

	<hx:dataTableEx id="myTableID" ...
		styleClass="data-table jQDataTables" ... >
		... my data ...
	</hx:dataTableEx>

When using Client-side DataTables plugin with JSF data tables, it is recommended to apply sorting either by only using the JSF's implementation or only using the plugin's sorting function.

Alternating row colors (row-striping) will be done via the plugin, there's no need to define rowClasses attribute when using an hx:dataTable with Client-side Data Tables plugin.

My Sample Data Table
Version Release Date Name Note
v.0.1.0 ? -
v.0.1.1 ? -
v.0.1.2 ? -
v.0.1.3 ? -
v.0.1.4 2010/12/06 Ouroboros Documentation Project using UX
v.0.1.5 2010/12/24 Sasquatch Christmas Eve release
v.0.1.6 2011/01/07 Cerberus Support for three development teams
v.0.2.0 2011/01/26 Gremlin Support for Widgets
v.0.2.1 2011/03/08 Sphinx 960 Grid System
v.0.3.0 2011/03/24 Gorgon Dev Beta
v.0.3.1 2011/04/25 Centaur Tooltips and Form Layout
v.0.3.2 2011/05/31 Werewolf Flex Grid Layout, Site Search, Out-bound Navigation Warning
v.0.3.3 2011/07/25 ManBearPig DOL Internet Redesign
v.0.3.4 2011/08/31 Phoenix A-Z Indexing, Notifications, Link Icons
v.0.3.5 2011/10/19 Goblin CSS Optimizations
v.0.3.6 ? ? ?
v.0.4.0 ? ? ?
v.1.0.0 TBD Kraken Open Beta!!
v.1.0.1 ? ? ?
v.1.0.2 ? ? ?
v.1.0.3 ? ? ?

Default Usage

Assuming that the DataTable is constructed with semantic HTML, and properly formatted, and the class is correctly applied for the JavaScripts to hook onto, the Table will function as the example listed above; with the Search function enabled, and paging and sorting implemented.

Pre-sorting

The default implementation provided by the User Experience Framework does not pre-sort any of the columns. A developer can specify sorting that happens at page load with the follow JavaScript that taps into the DataTables functions. JavaScripts should go into the scripts section within the template near the bottom of the page.

<script>	
$(document).ready(function() { // jQuery
...
	var oTable = $('#My-Table-ID').dataTable( { 
		"bRetrieve" : true
	});	
	oTable.fnSort([ [0,'asc'], [1,'desc'] ] );
...
});
</script>

In the above script, calling function .dataTable({}) with parameter "bRetrieve" : true will retrieve the DataTables Object, in this case it is set it to the variable oTable. This will allow the DataTables function .fnSort() to be called from the DataTables variable.

The function .fnSort() accepts an input of an array. In the above script, we are sorting by the first column (column 0), in asc (Ascending) order; then then second column (column 1), in desc(Descending) order.

Please refer to the DataTables Documentation for further details on how to specify the sorting parameter.
http://datatables.net

Expandable Row Data

Sometimes there are not enough page real-estate available to display all the data in a table. The User Experience Framework has implemented the expandable row functions based on the examples given on the Data Tables Website. This function has been simplified for ease of implementation. It can be achieved by following the below examples.

For the target data to be hidden in an expandable row, structure the HTML like the following for the target <td>.

Use an un-ordered list (<ul>), and the correct classes to the respective elements:

  • ux-jQDT-row-expandable on the list-item (<li>),
  • ux-jQDT-row-expand-trigger on the anchor (<a>), and
  • ux-jQDT-row-expand-content on the div that contains the content to be expanded.
<td>
	<ul>
		<li class="ux-jQDT-row-expandable">
			<a href="#" class="ux-jQDT-row-expand-trigger">Click me Text</a>
			<div class="ux-jQDT-row-expand-content">
				This stuff here is hidden until expanded.	
			</div>
		</li>
	</ul>
</td>

See live example at CSS Utility Classes page.

If the html is structured correctly, the predefined scripts will insert the expandable icon and hide the div immediately following the anchor trigger class when the page is loaded. The expanded row will remain open when the table is sorted by the Client-side Data Tables sort functions. The above code is required for each table cell that contains an expandable.

It is recommended that the expandable content is used only once per table cell. If there are multiple columns of data to expand, consider grouping them together in a logical matter or create new columns.

If JavaScript is not enabled, the expandable will not hide the data or render any of it's functions, since the Client-side Data Tables functions cannot be executed in the first place.

Customizing

Going Beyond the Defaults

There might be a time when the predefined default declaration of DataTables provide too much, or too little function than the application's requirements are needed/requested. In such a case, a developer can declare their own DataTables implementation to suit their application's needs. The corresponding JavaScripts should go into the scripts section.

DataTables has a great deal of customization available. Please refer to the DataTables Documentation for the full feature details.
http://datatables.net

If declaring a customized DataTable hook, please do remember to use the parameter "bJQueryUI": true, so that the custom declared DataTable will hook onto the predefined ThemeRoller CSS, provided by the User Experience Framework.

<table class="data-table myExampleTableClass" ... >
	... my data goes here ...
</table>
<script>
$(document).ready(function() {
...
	$('.myExampleTableClass').dataTable( {
		... custom paramters ...
		"bJQueryUI": true
	} );
...
});
</script>
My Custom Data Table
Column 1 Column 2 Column random
0 abc0defg 5df8b2d3-596d-45c6-97aa-45c97e051215
1 abc1defg 9b8c350a-e6df-4772-af26-2f5e12f70b8a
2 abc2defg 8826c759-fa96-4bf9-ba67-b9dfe631b232
3 abc3defg 87c93a71-5ad7-44bb-9579-2dc5310b1a16
4 abc4defg 6427812e-173d-4f42-ac05-ca5d2a8c59fc
5 abc5defg 82c62385-6340-4b1a-8696-ab22fe8cfbbe
6 abc6defg 3a294305-9edc-4802-bb9a-39ff43c210e2
7 abc7defg 026db641-4451-4796-a1dd-09a362f99046
8 abc8defg c2494e7a-c850-4ce2-b039-47a4de0ae3b8
9 abc9defg dcdb59a3-fbc2-4d12-9b06-04753dd9dcff
10 abc10defg 0425528e-1b4d-4bd8-b837-b156d0b759b3
11 abc11defg 2367af03-280d-4933-b71a-e60d8ec82abc
12 abc12defg 9c5c496a-5221-414c-b35a-bc64b19a77ca
13 abc13defg d3843436-0d61-4c6e-ba97-b9ea9a041a83
14 abc14defg 85b9d694-f906-47cf-9c26-0e01efc481ac
15 abc15defg 0b380e8e-fabc-4a23-b994-9efa02459cf4
16 abc16defg eac4bcb9-555d-4cde-8652-6ac6a5ed87fe
17 abc17defg e3d4700b-69bc-4a5c-9f66-54ef7f5cba4c
18 abc18defg 948ae7ac-be74-4d7e-8713-fefbdcd8e5e7
19 abc19defg d73ac584-0469-4d1a-bd9e-36f44af0735e
20 abc20defg de728370-d6c5-4075-b2e7-90a154263232
21 abc21defg 19e195a6-5e42-496d-a296-44dfeac07895
22 abc22defg 3c3b61b4-a8e4-4264-8f5c-acb3bbecf600
23 abc23defg 5c93e44a-9a62-4c7d-91c2-ca094d709449
24 abc24defg e13dfa51-1ace-4f11-a091-1d35ce085137
25 abc25defg 11e88dd0-46d7-4c6d-960b-1787a4ee142c
26 abc26defg 19e48ded-453f-4bec-ae9a-c609d198b31c
27 abc27defg 4547eaaf-2359-4576-a8a7-66718e7f96d0
28 abc28defg fcf1ed74-1613-478e-92c7-1503045f5c99
29 abc29defg 89ae8c49-c11b-499a-bbfe-f21fc818d500
30 abc30defg 4a0141b2-d482-4976-9dcc-c937044ef7de
31 abc31defg 5d1cbd85-50b1-4735-ba26-7c8e0121ae85
32 abc32defg 3704ce5f-eb58-488c-b845-b1fc40122479
33 abc33defg 1d924e46-f352-420c-b2f0-ba5a3a0c8dc5
34 abc34defg 3a9397f4-d10c-490e-b18d-046122cced41
35 abc35defg 469643fa-2268-4982-a95e-900dfa8e8ed4
36 abc36defg 451bb769-7507-4b02-8d7f-8ebdc5e4b0e7
37 abc37defg eab070dd-961c-4456-a398-37f724377374
38 abc38defg d64cea26-51aa-4979-a00d-ab10a91628a0
39 abc39defg 3000426c-2e03-410c-bcad-f60d3c4fa22f
40 abc40defg 11995b23-1cac-46aa-97a3-4c5c7371fa01
41 abc41defg 9abf0779-2f91-444f-8092-c6148dc62e77
42 abc42defg 94ff0c45-a0a6-42ff-989e-b543dfe09f1b
43 abc43defg 65255821-5f64-4518-ac13-8e970e24d2ab
44 abc44defg be5fcf20-f7b1-4cbc-8507-7ecab446e532
45 abc45defg cd1e0dc1-555b-450f-af49-188bd60944c9
46 abc46defg 2bf6dcc6-0990-4ae1-9ebd-b4b514263035
47 abc47defg 4ab77778-7556-4d6f-90ee-f22aeb357441
48 abc48defg 2645b971-74b4-475c-987f-41ced3b08731
49 abc49defg 38ae7b8f-db0f-411d-a88d-849ded57547d
50 abc50defg b25b5b5b-04a1-4863-b24d-7599e1c50f8f
51 abc51defg fe5a4dd9-609d-4978-a57d-de388cb7a889
52 abc52defg 1d56130f-4464-4ad0-b6ca-d50032fb8c0f
53 abc53defg 96eb53b2-9733-4d77-8545-0503b1007a8f
54 abc54defg 50d49641-9b48-44ba-ab00-1fcbe5d516a7
55 abc55defg 1e8c362a-010d-43e1-9c6b-86e2d4dd8701
56 abc56defg ed8a8a9e-795c-4bee-a7fc-d488ea3d389a
57 abc57defg f6845c2d-c6b8-49db-a0d8-3837d4e9209a
58 abc58defg 68ca4dab-b34f-4676-99a6-6fe8af8e546d
59 abc59defg c4fd4e5a-3fa6-463a-ab47-b693fca3a05a
60 abc60defg 16e144a2-2b72-41c7-95c3-66e70ea2792e
61 abc61defg b9b63ddd-3814-405b-a91c-4e80eafc4f30
62 abc62defg b00c498f-5b82-479b-9ae2-e87f6431d5de
63 abc63defg 9b94d178-501c-4961-be08-e6b39f7e4ea0
64 abc64defg 5fce3832-c940-4a5b-8751-8c66e787d559
65 abc65defg 1c6e3dff-02e6-4cc0-ba6d-428d72e6f0aa
66 abc66defg fe22ed12-64cf-43f6-8406-70fba3c251e9
67 abc67defg aa0394c3-ad33-46ba-a227-82c973f13077
68 abc68defg d7b22df7-f3d9-449e-b718-670254a99283
69 abc69defg 91c62157-5b95-46ce-a2d0-50be47086793
70 abc70defg 4c8f166c-7dc1-4ede-8a75-0e04d39b1eee
71 abc71defg e9b2833b-4a3f-4071-8f57-becb8eb1bc8a
72 abc72defg 304e2942-d634-456c-8b13-e0f5dc13badb
73 abc73defg 0ee9cd11-2c10-4e65-88f3-08f18e19fd4e
74 abc74defg d95e90b1-2b82-46e3-a914-fee52afe24a2
75 abc75defg 23e8ad85-5538-4d81-b8aa-8444c364a511
76 abc76defg 1b635696-1536-4239-b496-5bdf6e50688c
77 abc77defg 5e22f573-7dc2-4344-8b41-774608244ab2
78 abc78defg c43e91d1-d90a-412a-bcf3-df17a15293f2
79 abc79defg f95ed555-f8d4-46f4-9a69-883d4761b60d
80 abc80defg 8e1f3edc-3e72-482e-bd99-b50b5e1e9d95
81 abc81defg acda8db9-d1bb-4885-a5f0-dda7b8dc5ead
82 abc82defg b417ce2b-67d4-43c2-891b-7fedce221779
83 abc83defg 979f5931-7561-43f3-8724-9ceb7dd29500
84 abc84defg 4dcdf919-387a-4f7c-ab05-fcf7c0536c97
85 abc85defg 3a4a5076-120a-4398-9849-6bce0c9d12fd
86 abc86defg 94c052cc-c3bf-489c-9868-47b734724451
87 abc87defg fc85fcd8-d57c-44c6-8ef9-70c4368e0bf0
88 abc88defg 66d910ad-5f05-4dda-bfb9-449c96303c83
89 abc89defg 772c41d2-9afa-44ed-9bcf-642ce2df7916
90 abc90defg f9b728c8-fd8c-4ac7-ae94-227d51b32bc9
91 abc91defg 97f9cf2e-c009-4ec8-83cf-cebcd494e88a
92 abc92defg 08f36247-ecb5-4828-8b86-1841d93db8de
93 abc93defg 38f777da-cf99-46f2-8e6a-0b04858dff19
94 abc94defg 51ef82c1-3a5f-4ac9-8939-b95471f73656
95 abc95defg b54940e7-06b5-46ce-8b88-36de22e41c66
96 abc96defg 32bd5466-f8b8-4496-869b-c891b5b4d887
97 abc97defg b02434a5-bf37-4efa-a553-2fbe6acbd305
98 abc98defg 4cd4c5c0-c588-4a71-bb1f-a2677ea30b15
99 abc99defg eda99b3d-48f0-457c-ad05-ef4eed4be267
100 abc100defg a3b36e05-8bd7-4f23-ac21-1e8b31c1f02d
101 abc101defg ef14f269-13d4-4ad7-8fc0-69f9d85f48c9
102 abc102defg 8d42defb-c6c0-423a-b3ab-db758222a2e0
103 abc103defg ba2ad72c-0105-4a57-aef2-6eff6f480ccf
104 abc104defg 2e4720b2-dc21-4c38-9e3b-d3db36730dfc
105 abc105defg 3d07e31f-119d-46f7-a0d6-423126705ef7
106 abc106defg ebc64be1-ee96-4453-8fc1-7a7c7a1875e2
107 abc107defg 92701772-9c72-40df-9cde-0188b619bd9f
108 abc108defg 7b621fae-ba6e-491e-a4b1-cf5fdcb1707e
109 abc109defg f79d4c94-6588-43e3-a114-cbd660dc8d45
110 abc110defg 59f1493a-b49c-4299-8614-b73cde369517
111 abc111defg 693d0d4a-b767-4e5c-979e-e860f9466264
112 abc112defg 3bce49c7-e3e5-4a8c-9787-ab0ab56197fc
113 abc113defg 19cc6153-7b81-44c3-9c8e-85b50216fe88
114 abc114defg ce987810-f4b4-43cc-9e62-78125ac42967
115 abc115defg 1bee5e29-7ea1-4ba8-9f72-15f4a0dc60f1
116 abc116defg f3ff9c83-7a6e-4032-b376-e42269da9173
117 abc117defg d39da9bc-eadf-40af-b73f-e060c0fb8e25
118 abc118defg b455a3a8-8961-4a47-8e88-f6ae260ec22e
119 abc119defg 6cd8006d-33d2-4668-b91d-af240fcfafd5
120 abc120defg 91b65dfb-46b2-4268-8440-22f663c25f0c
121 abc121defg 10395a36-9a48-45fc-96b8-2e8b416ec73c
122 abc122defg a77761c5-a98b-46fe-b1d6-1257f7ddc654
123 abc123defg ffac35fd-cbfe-4cc8-9387-7d24acb98541
124 abc124defg 31bdadb6-bcc7-4ded-9643-1db88c31292e
125 abc125defg bad1166c-956b-45f2-9b20-ae2cad631edd
126 abc126defg 6fab5c97-8dc5-48dc-9434-55a39a12db70
127 abc127defg cfd0204f-22a7-4cbb-969c-cb3abad521c1
128 abc128defg b086a89b-8052-4e95-a127-ac2b000165db
129 abc129defg f189ce77-105d-4c88-afcf-362eea0019d5
130 abc130defg 4862e026-c1ae-4756-90a9-6d183784fb65
131 abc131defg 4433de4d-e488-4351-b5af-17d554611dc6
132 abc132defg 9723deb2-aabf-4311-b5b0-531448e78876
133 abc133defg 03c191ee-3e8f-42dc-941f-2d1dadbbef8b
134 abc134defg a39762d5-5b82-4964-ba9d-78d825d42033
135 abc135defg c520bef2-f03f-4b97-986d-8276e3d88304
136 abc136defg f968aee4-52be-443c-aa12-c19670a70b09
137 abc137defg c643455f-5114-4afb-bc74-97fb3790453a
138 abc138defg 5e66b96b-a026-43bd-a736-86e5c923a83d
139 abc139defg b558797b-1e70-4cbc-96e9-997b731d9d0c
140 abc140defg e87f6c67-7b53-4a31-8dc3-bc94ac79661f
141 abc141defg 71f7ac76-46bf-4a7b-97e8-acdf64ed6866
142 abc142defg 9a87cefa-1b96-4e5e-986b-70cd6873bf8f
143 abc143defg d9c94b09-df7f-471c-b3b4-e065635ca566
144 abc144defg 0a52bcbf-8d00-4260-b006-3766791b4658
145 abc145defg b1f6ffb5-4733-4ebf-a53c-5dbe62b0db24
146 abc146defg 776be5bf-274b-43a5-94b8-b876605ec30a
147 abc147defg 0191a77b-55a6-4ff7-88ec-2726b53c3edd
148 abc148defg 23ee2bb9-0bc9-40fd-8277-c21569489b46
149 abc149defg d7ec7f93-65cc-4345-9bc6-2f56bf75e9f3
150 abc150defg e7c69db5-9894-4d08-a692-19c7661721c3
151 abc151defg 693f3584-b2d8-4e49-9eaa-4126ec7f1b2b
152 abc152defg d4b012cf-6039-4d21-8acc-899d9b3460bb
153 abc153defg 775b7092-b164-4d42-8f99-6c530c6d3c2a
154 abc154defg 90efa3b0-4fb6-40d1-a5c9-8b24b422a9d4
155 abc155defg 2bd2c831-bd6d-4a32-8d4a-84c30a34a123
156 abc156defg d83800d0-72e0-47c6-885c-2322349ac02a
157 abc157defg 1b0f82f3-b5dc-458b-9d2d-1ccaebd9a4a7
158 abc158defg f6d04f48-6401-427e-aec1-57a5a1ae8bfe
159 abc159defg d24e78dd-b722-4e40-8cbd-1efa803fcc6a
160 abc160defg c1ef9223-aa13-42ac-89cb-ce8a91002a45
161 abc161defg d7e49812-7f40-4dfb-b9ce-f4cdbf84b5df
162 abc162defg bad6a4ef-6c37-4f65-8264-1d3a248a500c
163 abc163defg 66d2a357-95e7-4b93-8584-ac2a6ba50465
164 abc164defg 4b3ca05f-bb99-4ce1-943c-c01c7a5e294d
165 abc165defg 5d53a6b4-8719-420b-af7e-87989ea7b41d
166 abc166defg ecdeac1e-b037-40e2-92ef-ad0bd0075fd0
167 abc167defg 6083c5df-1640-4f1d-87da-a4282e4c2bc0
168 abc168defg 7d71ea80-3820-4ca2-bbff-cc1ca5e51a40
169 abc169defg bede2970-544d-485c-9849-881427fed63c
170 abc170defg db4c36c4-5a64-4ebd-9d4e-4b792f2cb830
171 abc171defg b1e52150-971c-4494-8e53-aac1dfea5bca
172 abc172defg 7ac26aaa-332c-4b39-86d8-0edd5d48fb0f
173 abc173defg 51340051-7dc5-4cb7-b001-27ef935fdf80
174 abc174defg 49201fe5-fde3-45dd-95cd-598c62132ab9
175 abc175defg f5536a80-e20f-4d78-8e15-374692274642
176 abc176defg e242aef8-7962-4a74-a16d-7fe5505b47e2
177 abc177defg 789d6b03-7ae5-4cb0-b908-d274ff4402b0
178 abc178defg 18897d39-bf24-418f-ad43-05ea1f37da9c
179 abc179defg 962db353-95d6-4ec9-8b9f-a21eb5c9ba86
180 abc180defg 1fb31556-6344-4404-b36f-3ba7ee39190f
181 abc181defg 5137a3a0-4980-431d-bce2-1e142b4bcb2a
182 abc182defg 100c6759-d614-4bc1-97e4-15b7f11d9e4b
183 abc183defg e58b2b4c-e72d-420b-a82c-124807cc8ea2
184 abc184defg cb89204d-b2ae-4a5a-8332-9b477b5180e9
185 abc185defg 403226e4-4715-4e00-8911-c73547ec3274
186 abc186defg 7c95e916-e672-4423-b2ea-b1705a08a909
187 abc187defg 03fcfaf7-52b4-45cb-a42d-bdfe65a144cd
188 abc188defg 4d895250-b39a-4d2f-ad3f-639ca58f5233
189 abc189defg 8783bf81-2eee-43ca-baf8-4c2b3696c533
190 abc190defg 12e34abb-9695-4b63-82c4-afddbfde28f2
191 abc191defg d24f469b-1bd2-4aec-8699-8609a7cee785
192 abc192defg 4892ca2c-683b-4191-8b38-10088ff17b3e
193 abc193defg 4140ac71-22a9-4ff6-98b2-2a86861bfd8c
194 abc194defg be0f21c8-aa36-4722-9f13-26bafabf42bb
195 abc195defg ee800866-1855-4db7-859d-17e88bfeb748
196 abc196defg b1e23d11-d8dc-443a-943b-07367785dae7
197 abc197defg 7d7e1064-5deb-401b-a5b7-0c9c67b84947
198 abc198defg 7371a901-773b-4025-ac6a-a8d324df414c
199 abc199defg 64a137e4-6ae5-49aa-8553-4d1fa51271a6
200 abc200defg 09a81abd-a685-46b8-b298-083ed11eca6a
201 abc201defg ca2f3cc7-1a50-4765-93de-373855c17165
202 abc202defg 98d7eb66-5c5f-45cf-bd1f-291567dfeef3
203 abc203defg 5c643837-4164-42e7-9255-a467dfa995ed
204 abc204defg 96f5cb2d-3628-4c57-9b4a-d440af5d524c
205 abc205defg e4306425-1f78-461d-9f4c-a04e013fcdbf
206 abc206defg 680670c1-6ef7-4519-be5f-cffe0578ff34
207 abc207defg 184b8b7a-f298-4137-8e6b-0e1db0ea2038
208 abc208defg 2f5e159f-dbe0-4b9b-bfb1-58e3a3c96cd2
209 abc209defg 7cb077c6-1256-4e17-a9bc-c987d28b9a11
210 abc210defg 95ed3a95-2620-4c9d-a7dd-9729569557d7
211 abc211defg f1b0baf5-933f-471f-bd48-89e6427dbc9c
212 abc212defg 1e1a9e28-3058-427f-acb2-b6eff5ebbd3d
213 abc213defg ff2f17b1-6f13-4364-adde-522ff74acb38
214 abc214defg 5b3b3488-8fd4-47c5-8e3e-503fdfb929e7
215 abc215defg 4ef6ffdd-f90c-4f17-81bf-60bc508bb9b3
216 abc216defg 24638206-1e49-4793-a373-11387bf5a077
217 abc217defg 7a51c874-dddc-47f9-8ccd-b5ad4fb0bf9a
218 abc218defg 4ce22077-6741-4a5c-9052-ee5d165a8eab
219 abc219defg 4792e0fc-538a-47e8-b62c-1e65ae8be6b4
220 abc220defg b9e4c3c4-611d-40ef-84f5-4c44016631c8
221 abc221defg f376d710-fed1-4d79-9f7a-48c415d2a715
222 abc222defg 5619fa09-e817-483b-b44b-339f3d0ab131
223 abc223defg e7fb3d52-c669-40d1-8b58-711862af663a
224 abc224defg cb65c27b-47fe-45e6-99f8-fe2bea597389
225 abc225defg d46e6520-ba53-4b95-ae50-898c8d4f0b9b
226 abc226defg 304d6359-76e8-44fe-aa68-1c9e2af25388
227 abc227defg dd045b94-ae84-4266-a829-3fc35590c1ab
228 abc228defg d0bc79bf-6cba-49ca-bcfc-6ca5ea4dffde
229 abc229defg 4c74fd1b-9ab3-4b37-8651-701f829fba3d
230 abc230defg 8c844152-4e39-415d-af19-f1574db86c03
231 abc231defg 0e343470-c0fa-4960-91fe-61342aaac6d8
232 abc232defg 6145f445-0e29-4848-8862-a70ce120ab15
233 abc233defg 82b865ba-a3cd-4fd3-aee3-9d8b85d688c1
234 abc234defg 9d05bbc8-bb1a-496b-87aa-36dd8a7d5a53
235 abc235defg 8f1b0604-e7b0-4198-ad5c-81948e3df727
236 abc236defg 293060ab-a861-49c1-b939-e3c1ea574133
237 abc237defg d74d61a0-ec68-45b5-82b7-99bf9062225a
238 abc238defg 70e9284a-bc74-4f51-8526-75a34c4ddb31
239 abc239defg e0e12115-c210-48d1-b9eb-bbe60569f3c7
240 abc240defg 43e2f940-c81a-4e3d-806c-2b1840b7694d
241 abc241defg 1902c00e-6520-4f60-bdcd-58126ad54e85
242 abc242defg feb392ec-3e9b-4136-8a71-cc5166022589
243 abc243defg aa259136-4c57-4dae-82e8-938564191977
244 abc244defg f8351afb-a765-416c-a1bc-2c451eedba53
245 abc245defg cce6f1cc-8770-49a4-b4cb-4216d0bee95b
246 abc246defg 9beb9d3d-57e6-4de2-98ff-ac5012d986aa
247 abc247defg 74caed61-d228-4ee1-bb04-166238937336
248 abc248defg 180b4005-bc23-4043-832a-ecc8b88ed810
249 abc249defg 3c22e5be-9118-4eda-9e06-a93a2f84ae13