Skip to content

Commit 70c30fb

Browse files
ConradSollittConradSollitt
committed
✨ Add Sticky Header and First Column on Demo
1 parent 80ac01f commit 70c30fb

File tree

8 files changed

+248
-223
lines changed

8 files changed

+248
-223
lines changed

‎docs/to-do-list.txt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@ TODO List
2222
|
2323
--------------------------------------------------------------------------
2424

25+
**) Finish testing sticky table header and first column for the places demo
26+
- Demo that is updated:
27+
https://www.dataformsjs.com/examples/places-demo-web.htm#/en/
28+
- Other versions (React, Vue, JS, Handlebars, etc) are not yet updated
29+
https://www.dataformsjs.com/examples/places-demo-react.htm#/en/
30+
- A variety of devices and browsers needs additional testing
31+
- Added 2021-02-16, testing will be complete soon
32+
2533
**) Combine Main Server and AI/ML Server into one.
2634
- Servers:
2735
https://www.dataformsjs.com/

‎examples/countries-no-spa-web.htm‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -37,49 +37,47 @@ <h1>Countries</h1>
3737

3838
<p>Click on a column to sort rows based on column values.</p>
3939

40-
<div class="responsive-table">
41-
<!--
42-
Either <template> or <script type="text/x-template"> can be used.
43-
<template> will work with all modern browsers
44-
<script type="text/x-template"> is required if supporting IE with [polyfill.js]
45-
-->
46-
<data-table
47-
data-bind="countries"
48-
highlight-class="highlight"
49-
labels="Code, Name, Size (KM), Population, Continent"
50-
col-class="Size (KM)=align-right, Population=align-right"
51-
table-attr="is=sortable-table,
52-
data-sort-class-odd=row-odd,
53-
data-sort-class-even=row-even">
54-
<script type="text/x-template">
55-
<tr>
56-
<td>${iso}</td>
57-
<td>
58-
<i class="${iso.toLowerCase()} flag"></i>
59-
${country}
60-
</td>
61-
<td class="align-right" data-value="${area_km}">${format.number(area_km)}</td>
62-
<td class="align-right" data-value="${population}">${format.number(population)}</td>
63-
<td>${continent}</td>
64-
</tr>
65-
</script>
66-
</data-table>
40+
<!--
41+
Either <template> or <script type="text/x-template"> can be used.
42+
<template> will work with all modern browsers
43+
<script type="text/x-template"> is required if supporting IE with [polyfill.js]
44+
-->
45+
<data-table
46+
data-bind="countries"
47+
highlight-class="highlight"
48+
labels="Code, Name, Size (KM), Population, Continent"
49+
col-class="Size (KM)=align-right, Population=align-right"
50+
table-attr="is=sortable-table,
51+
data-sort-class-odd=row-odd,
52+
data-sort-class-even=row-even">
53+
<script type="text/x-template">
54+
<tr>
55+
<td>
56+
<i class="${iso.toLowerCase()} flag"></i>
57+
${iso}
58+
</td>
59+
<td>${country}</td>
60+
<td class="align-right" data-value="${area_km}">${format.number(area_km)}</td>
61+
<td class="align-right" data-value="${population}">${format.number(population)}</td>
62+
<td>${continent}</td>
63+
</tr>
64+
</script>
65+
</data-table>
6766

68-
<!--
69-
For a basic table a <template> is not required. This version shows
70-
the data but does not include flag icons or number formatting.
71-
-->
72-
<!--
73-
<data-table
74-
data-bind="countries"
75-
highlight-class="highlight"
76-
labels="Code, Name, Size (KM), Population, Continent"
77-
table-attr="is=sortable-table,
78-
data-sort-class-odd=row-odd,
79-
data-sort-class-even=row-even">
80-
</data-table>
81-
-->
82-
</div>
67+
<!--
68+
For a basic table a <template> is not required. This version shows
69+
the data but does not include flag icons or number formatting.
70+
-->
71+
<!--
72+
<data-table
73+
data-bind="countries"
74+
highlight-class="highlight"
75+
labels="Code, Name, Size (KM), Population, Continent"
76+
table-attr="is=sortable-table,
77+
data-sort-class-odd=row-odd,
78+
data-sort-class-even=row-even">
79+
</data-table>
80+
-->
8381
</is-loaded>
8482
</json-data>
8583
</div>

‎examples/css/countries.css‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,18 @@ form.search {
9292
margin: 20px;
9393
}
9494
}
95+
/*
96+
When the following is used:
97+
<div class="responsive-table"><table>...
98+
The `position: sticky` code for headers and first column will
99+
not work because of the overflow being defined.
100+
101+
[responsive-table] provides a nice visual layout because it allows the
102+
table to fully fit with-in the page. The user can easily swipe to view
103+
the table on mobile using [responsive-table], however the header and
104+
first column do not stay fixed so the new `position: sticky` can provide
105+
a better user experience (UX) while using a standard <table> element.
106+
*/
95107
.responsive-table {
96108
overflow-x: auto;
97109
max-width: calc(100vw - 40px);
@@ -115,15 +127,36 @@ table {
115127
border-collapse: collapse;
116128
white-space: nowrap;
117129
}
118-
thead {
119-
background-color: hsla(210, 29%, 93%, 1);
120-
}
121130
th, td {
122131
padding: 8px 16px;
123132
border: 1px solid #dfe2e5;
124133
}
125-
.align-right { text-align:right; }
126134

135+
table tbody tr:nth-child(odd) { background-color: white; }
136+
table tbody tr:nth-child(even) { background-color: #f6f8fa; }
137+
table tbody tr.row-odd { background-color: white; }
138+
table tbody tr.row-even { background-color: #f6f8fa; }
139+
table tbody tr.highlight { background-color: yellow; }
140+
141+
/* Table Sticky Header and First Column */
142+
table { position: relative; }
143+
th { position: sticky; top:0; background-color: hsla(210, 29%, 93%, 1); z-index:2; }
144+
table tbody tr td:first-child { position: sticky; left:0; z-index:1; }
145+
table tbody tr:nth-child(odd) td:first-child { background-color: white; }
146+
table tbody tr:nth-child(even) td:first-child { background-color: #f6f8fa; }
147+
table tbody tr.highlight td:first-child {background-color: yellow; }
148+
149+
/*
150+
In Firefox the sticky cells function but do not look good so
151+
sticky first column is turned off. For options to work-around
152+
this issue see:
153+
https://stackoverflow.com/questions/57166162/table-headers-positionsticky-and-border-issue/57170489
154+
*/
155+
@-moz-document url-prefix() {
156+
table tbody tr td:first-child { position: initial; }
157+
}
158+
159+
.align-right { text-align:right; }
127160
.error { padding:1em; background-color:red; color:white; }
128161

129162
.place-screen {
@@ -210,12 +243,6 @@ h2.links {
210243
padding-top: 16px;
211244
}
212245

213-
table tbody tr:nth-child(odd) { background-color: white; }
214-
table tbody tr:nth-child(even) { background-color: #f6f8fa; }
215-
table tbody tr.row-odd { background-color: white; }
216-
table tbody tr.row-even { background-color: #f6f8fa; }
217-
table tbody tr.highlight { background-color: yellow; }
218-
219246
.pointer { cursor: pointer; }
220247

221248
/* Adjust for jQuery Chosen box-sizing */

‎examples/html/cities-web.htm‎

Lines changed: 39 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -15,47 +15,45 @@ <h1><span data-i18n="Largest Cities in"></span> <span url-param="country"></span
1515
placeholder="Enter filter"
1616
data-i18n-attr="placeholder">
1717

18-
<div class="responsive-table">
19-
<!--
20-
Two version of the <data-table> are shown below. The one used for this
21-
app includes a template for displaying flag icons and formatting values.
18+
<!--
19+
Two version of the <data-table> are shown below. The one used for this
20+
app includes a template for displaying flag icons and formatting values.
2221
23-
Another commented version below uses [col-link-template] and [columns]
24-
to specify which data to show and the link.
25-
-->
26-
<data-table
27-
data-bind="cities"
28-
highlight-class="highlight"
29-
labels="Name, Population, Elevation, Timezone, Date Last Modified"
30-
data-i18n-attr="labels"
31-
table-attr="is=sortable-table,
32-
data-sort-class-odd=row-odd,
33-
data-sort-class-even=row-even">
34-
<script type="text/x-template">
35-
<tr>
36-
<td>
37-
<i class="${country_code.toLowerCase()} flag"></i>
38-
<a href="#/${i18n_Locale}/city/${geonames_id}">${name}</a></a>
39-
</td>
40-
<td class="align-right" data-value="${population}">${format.number(population)}</td>
41-
<td class="align-right" data-value="${elevation}">${formatElevation(elevation)}</td>
42-
<td>${timezone}</td>
43-
<td class="align-right">${format.date(modification_date)}</td>
44-
</tr>
45-
</script>
46-
</data-table>
47-
<!--
48-
<data-table
49-
data-bind="cities"
50-
highlight-class="highlight"
51-
col-link-template="#/city/:geonames_id"
52-
columns="name, population, elevation, timezone, modification_date"
53-
labels="Name, Population, Elevation, Timezone, Date Last Modified"
54-
table-attr="is=sortable-table,
55-
data-sort-class-odd=row-odd,
56-
data-sort-class-even=row-even">
57-
</data-table>
58-
-->
59-
</div>
22+
Another commented version below uses [col-link-template] and [columns]
23+
to specify which data to show and the link.
24+
-->
25+
<data-table
26+
data-bind="cities"
27+
highlight-class="highlight"
28+
labels="Name, Population, Elevation, Timezone, Date Last Modified"
29+
data-i18n-attr="labels"
30+
table-attr="is=sortable-table,
31+
data-sort-class-odd=row-odd,
32+
data-sort-class-even=row-even">
33+
<script type="text/x-template">
34+
<tr>
35+
<td>
36+
<i class="${country_code.toLowerCase()} flag"></i>
37+
<a href="#/${i18n_Locale}/city/${geonames_id}">${name}</a></a>
38+
</td>
39+
<td class="align-right" data-value="${population}">${format.number(population)}</td>
40+
<td class="align-right" data-value="${elevation}">${formatElevation(elevation)}</td>
41+
<td>${timezone}</td>
42+
<td class="align-right">${format.date(modification_date)}</td>
43+
</tr>
44+
</script>
45+
</data-table>
46+
<!--
47+
<data-table
48+
data-bind="cities"
49+
highlight-class="highlight"
50+
col-link-template="#/city/:geonames_id"
51+
columns="name, population, elevation, timezone, modification_date"
52+
labels="Name, Population, Elevation, Timezone, Date Last Modified"
53+
table-attr="is=sortable-table,
54+
data-sort-class-odd=row-odd,
55+
data-sort-class-even=row-even">
56+
</data-table>
57+
-->
6058
</is-loaded>
6159
</json-data>

‎examples/html/places-info-web.htm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@ <h2 class="source-code">
2929
</ul>
3030

3131
<h2 class="links" data-i18n="Links"></h2>
32-
<ul class="info" data-template-url="html/places-info-links.htm"></ul>
32+
<ul class="info" data-template-url="html/places-info-links.htm"></ul>
3333
</section>

‎examples/html/regions-web.htm‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -24,53 +24,51 @@ <h1><span>Regions for Country Code</span> <span url-param="country"></span></h1>
2424
placeholder="Enter filter"
2525
data-i18n-attr="placeholder, filter-results-text-all, filter-results-text-filtered">
2626

27-
<div class="responsive-table">
28-
<!--
29-
Two version of the <data-table> are shown below. The one used for this
30-
app includes a template for displaying flag icons and formatting values.
27+
<!--
28+
Two version of the <data-table> are shown below. The one used for this
29+
app includes a template for displaying flag icons and formatting values.
3130
32-
Another commented version below uses [col-link-template] and [columns]
33-
to specify which data to show and the link.
31+
Another commented version below uses [col-link-template] and [columns]
32+
to specify which data to show and the link.
3433
35-
[row-item-name] is option and can be used to name the row object
36-
for the template. When not included all fields are available at the
37-
root template scope (used in other demos for this app).
38-
-->
39-
<data-table
40-
data-bind="regions"
41-
highlight-class="highlight"
42-
labels="Code, Name, Population, Timezone, Date Last Modified"
43-
data-i18n-attr="labels"
44-
row-item-name="country"
45-
table-attr="is=sortable-table,
46-
data-sort-class-odd=row-odd,
47-
data-sort-class-even=row-even">
48-
<script type="text/x-template">
49-
<tr>
50-
<td><a href="#/${i18n_Locale}/cities/${country.country_code}/${country.admin1_code}">${country.admin1_code}</a></td>
51-
<td>
52-
<i class="${country.country_code.toLowerCase()} flag"></i>
53-
${name}
54-
</td>
55-
<td class="align-right" data-value="${country.population}">${format.number(country.population)}</td>
56-
<td>${country.timezone}</td>
57-
<td class="align-right">${format.date(country.modification_date)}</td>
58-
</tr>
59-
</script>
60-
</data-table>
34+
[row-item-name] is option and can be used to name the row object
35+
for the template. When not included all fields are available at the
36+
root template scope (used in other demos for this app).
37+
-->
38+
<data-table
39+
data-bind="regions"
40+
highlight-class="highlight"
41+
labels="Code, Name, Population, Timezone, Date Last Modified"
42+
data-i18n-attr="labels"
43+
row-item-name="country"
44+
table-attr="is=sortable-table,
45+
data-sort-class-odd=row-odd,
46+
data-sort-class-even=row-even">
47+
<script type="text/x-template">
48+
<tr>
49+
<td>
50+
<i class="${country.country_code.toLowerCase()} flag"></i>
51+
<a href="#/${i18n_Locale}/cities/${country.country_code}/${country.admin1_code}">${country.admin1_code}</a>
52+
</td>
53+
<td>${name}</td>
54+
<td class="align-right" data-value="${country.population}">${format.number(country.population)}</td>
55+
<td>${country.timezone}</td>
56+
<td class="align-right">${format.date(country.modification_date)}</td>
57+
</tr>
58+
</script>
59+
</data-table>
6160

62-
<!--
63-
<data-table
64-
data-bind="regions"
65-
highlight-class="highlight"
66-
col-link-template="#/cities/:country_code/:admin1_code"
67-
columns="admin1_code, name, population, timezone, modification_date"
68-
labels="Code, Name, Population, Timezone, Date Last Modified"
69-
table-attr="is=sortable-table,
70-
data-sort-class-odd=row-odd,
71-
data-sort-class-even=row-even">
72-
</data-table>
73-
-->
74-
</div>
61+
<!--
62+
<data-table
63+
data-bind="regions"
64+
highlight-class="highlight"
65+
col-link-template="#/cities/:country_code/:admin1_code"
66+
columns="admin1_code, name, population, timezone, modification_date"
67+
labels="Code, Name, Population, Timezone, Date Last Modified"
68+
table-attr="is=sortable-table,
69+
data-sort-class-odd=row-odd,
70+
data-sort-class-even=row-even">
71+
</data-table>
72+
-->
7573
</is-loaded>
7674
</json-data>

0 commit comments

Comments
 (0)