Skip to content

Commit e91179f

Browse files
michaelNetCompanymichaelNetCompany
committed
Adding table sorting examples
1 parent e5b97a8 commit e91179f

File tree

5 files changed

+743
-14
lines changed

5 files changed

+743
-14
lines changed

‎app/views/reg-portal/reg-table-v2-yes-no-sorted-reverse.html‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
{% extends 'reg-portal/layout.html' %}
2+
3+
{% block pageTitle %}
4+
6 new registrations - GP registrations portal - NHS
5+
{% endblock %}
6+
7+
{% block content %}
8+
9+
<div class="nhsuk-grid-row">
10+
<div class="nhsuk-grid-column-full">
11+
12+
{{ backLink({
13+
text: "Return to dashboard",
14+
href: "dashboard"
15+
}) }}
16+
17+
18+
<h1 class="nhsuk-heading-xl">View patient details</h1>
19+
<p>View details of patient registration requests from the last 90 days.</p>
20+
21+
22+
<table role="table" class="nhsuk-table-responsive">
23+
<thead class="nhsuk-table__head">
24+
<tr role="row">
25+
26+
<th role="columnheader" scope="col" class="govuk-table__header" aria-sort="descending">
27+
<a href="reg-table-v2-yes-no-sorted">
28+
<button type="button" data-index="0">Name<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
29+
<path d="M15.4375 7L11 15.8687L6.5625 7L15.4375 7Z" fill="currentColor"></path>
30+
</svg>
31+
</button>
32+
</a>
33+
</th>
34+
35+
<th role="columnheader" scope="col" class="govuk-table__header" aria-sort="none">
36+
<button type="button" data-index="1">Matched<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
37+
<path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"></path>
38+
<path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"></path>
39+
</svg>
40+
</button>
41+
</th>
42+
43+
<th role="columnheader" scope="col" class="govuk-table__header" aria-sort="none">
44+
<button type="button" data-index="2">Age<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
45+
<path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"></path>
46+
<path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"></path>
47+
</svg>
48+
</button>
49+
</th>
50+
51+
<th role="columnheader" scope="col" class="govuk-table__header govuk-table__header--numeric" aria-sort="none">
52+
<button type="button" data-index="3">Catchment<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
53+
<path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"></path>
54+
<path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"></path>
55+
</svg>
56+
</button>
57+
</th>
58+
59+
<th role="columnheader" class="" scope="col"></th>
60+
61+
</tr>
62+
</thead>
63+
64+
<style>
65+
.govuk-table__header {
66+
padding: 10px 20px 10px 0;
67+
text-align: left;
68+
vertical-align: top;
69+
}
70+
71+
[aria-sort] button, [aria-sort] button:hover {
72+
align-items: center;
73+
background-color: initial;
74+
border-width: 0;
75+
box-shadow: 0 0 0 0;
76+
color: #005ea5;
77+
cursor: pointer;
78+
display: inline-flex;
79+
font-family: inherit;
80+
font-size: inherit;
81+
font-size: 1em;
82+
font-weight: inherit;
83+
margin: 0;
84+
padding: 0;
85+
position: relative;
86+
text-align: inherit;
87+
}
88+
</style>
89+
90+
<tbody class="nhsuk-table__body">
91+
92+
<tr role="row" class="nhsuk-table__row">
93+
<td role="cell" class="nhsuk-table__cell">
94+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Name</span>Philip Wilson
95+
</td>
96+
<td role="cell" class="nhsuk-table__cell">
97+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Matched</span>Yes
98+
</td>
99+
<td role="cell" class="nhsuk-table__cell">
100+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Age</span>69
101+
</td>
102+
<td role="cell" class="nhsuk-table__cell">
103+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">In catchment</span>Yes
104+
</td>
105+
<td role="cell" class="nhsuk-table__cell">
106+
<a href="#">View details</a>
107+
</td>
108+
</tr>
109+
110+
<tr role="row" class="nhsuk-table__row">
111+
<td role="cell" class="nhsuk-table__cell">
112+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Name</span>Sam Smith
113+
</td>
114+
<td role="cell" class="nhsuk-table__cell">
115+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Matched</span>Yes
116+
</td>
117+
<td role="cell" class="nhsuk-table__cell">
118+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Age</span>35
119+
</td>
120+
<td role="cell" class="nhsuk-table__cell">
121+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">In catchment</span>Yes
122+
</td>
123+
<td role="cell" class="nhsuk-table__cell">
124+
<a href="reg-detail-multi-detail">View details</a>
125+
</td>
126+
</tr>
127+
128+
<tr role="row" class="nhsuk-table__row">
129+
<td role="cell" class="nhsuk-table__cell">
130+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Name</span>Victoria Shirt
131+
</td>
132+
<td role="cell" class="nhsuk-table__cell">
133+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Matched</span>Yes
134+
</td>
135+
<td role="cell" class="nhsuk-table__cell">
136+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Age</span>21
137+
</td>
138+
<td role="cell" class="nhsuk-table__cell">
139+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">In catchment</span>Yes
140+
</td>
141+
<td role="cell" class="nhsuk-table__cell">
142+
<a href="#">View details</a>
143+
</td>
144+
</tr>
145+
146+
<tr role="row" class="nhsuk-table__row">
147+
<td role="cell" class="nhsuk-table__cell">
148+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Name</span>Philip Muggeridge
149+
</td>
150+
<td role="cell" class="nhsuk-table__cell">
151+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Matched</span>Not matched
152+
</td>
153+
<td role="cell" class="nhsuk-table__cell">
154+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Age</span>19
155+
</td>
156+
<td role="cell" class="nhsuk-table__cell">
157+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">In catchment</span>Yes
158+
</td>
159+
<td role="cell" class="nhsuk-table__cell">
160+
<a href="#">View details</a>
161+
</td>
162+
</tr>
163+
164+
<tr role="row" class="nhsuk-table__row">
165+
<td role="cell" class="nhsuk-table__cell">
166+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Name</span>Jane Jones
167+
</td>
168+
<td role="cell" class="nhsuk-table__cell">
169+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Matched</span>Not matched
170+
</td>
171+
<td role="cell" class="nhsuk-table__cell">
172+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Age</span>14
173+
</td>
174+
<td role="cell" class="nhsuk-table__cell">
175+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">In catchment</span>Out of catchment
176+
</td>
177+
<td role="cell" class="nhsuk-table__cell">
178+
<a href="reg-detail-multi-detail-child">View details</a>
179+
</td>
180+
</tr>
181+
182+
<tr role="row" class="nhsuk-table__row">
183+
<td role="cell" class="nhsuk-table__cell">
184+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Name</span>Justin Girdler
185+
</td>
186+
<td role="cell" class="nhsuk-table__cell">
187+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Matched</span>Yes
188+
</td>
189+
<td role="cell" class="nhsuk-table__cell">
190+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Age</span>39
191+
</td>
192+
<td role="cell" class="nhsuk-table__cell">
193+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">In catchment</span>Yes
194+
</td>
195+
<td role="cell" class="nhsuk-table__cell">
196+
<a href="#">View details</a>
197+
</td>
198+
</tr>
199+
200+
<tr role="row" class="nhsuk-table__row">
201+
<td role="cell" class="nhsuk-table__cell">
202+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Name</span>Louise Ednie
203+
</td>
204+
<td role="cell" class="nhsuk-table__cell">
205+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Matched</span>Yes
206+
</td>
207+
<td role="cell" class="nhsuk-table__cell">
208+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Age</span>31
209+
</td>
210+
<td role="cell" class="nhsuk-table__cell">
211+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">In catchment</span>Out of catchment
212+
</td>
213+
<td role="cell" class="nhsuk-table__cell">
214+
<a href="#">View details</a>
215+
</td>
216+
</tr>
217+
218+
<tr role="row" class="nhsuk-table__row">
219+
<td role="cell" class="nhsuk-table__cell">
220+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Name</span>James Briggs
221+
</td>
222+
<td role="cell" class="nhsuk-table__cell">
223+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Matched</span>Yes
224+
</td>
225+
<td role="cell" class="nhsuk-table__cell">
226+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">Age</span>89
227+
</td>
228+
<td role="cell" class="nhsuk-table__cell">
229+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">In catchment</span>Yes
230+
</td>
231+
<td role="cell" class="nhsuk-table__cell">
232+
<a href="#">View details</a>
233+
</td>
234+
</tr>
235+
236+
</tbody>
237+
</table>
238+
239+
<nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
240+
<ul class="nhsuk-list nhsuk-pagination__list">
241+
<!--<li class="gpreg-pagination-item--previous">
242+
<a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="#">
243+
<span class="nhsuk-pagination__title">Previous</span>
244+
<svg class="nhsuk-icon gpreg-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
245+
<path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z" />
246+
</svg>
247+
</a>
248+
</li>-->
249+
<li class="gpreg-pagination-item--next">
250+
<a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="reg-table-v2-yes-no-page-2">
251+
<span class="nhsuk-pagination__title">Next</span>
252+
<svg class="nhsuk-icon gpreg-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
253+
<path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z" />
254+
</svg>
255+
</a>
256+
</li>
257+
</ul>
258+
</nav>
259+
260+
<h2 class="nhsuk-heading-l nhsuk-u-padding-top-6">Support</h2>
261+
<p>For service support, <strong>email <a href="">[email protected]</a></strong> or <br><strong>call 03003035035</strong>. Support is available 24 hours a day, 7 days a week.</p>
262+
263+
</div>
264+
</div>
265+
266+
<style>
267+
.gpreg-pagination-item--previous {
268+
float: left;
269+
margin-right: 32px;
270+
padding-left: 32px;
271+
}
272+
273+
.gpreg-icon--arrow-left {
274+
position: absolute;
275+
top: -2px;
276+
left: -38px;
277+
}
278+
279+
.gpreg-pagination-item--next {
280+
float: left;
281+
}
282+
283+
.gpreg-icon--arrow-right {
284+
position: absolute;
285+
top: -2px;
286+
right: -38px;
287+
}
288+
</style>
289+
290+
291+
292+
{% endblock %}
293+
294+
{% block pageScripts %}
295+
296+
297+
{% endblock %}

0 commit comments

Comments
 (0)