Skip to content

Commit e59980a

Browse files
ConradSollittConradSollitt
committed
🚀 Update Demos for Position Sticky on Tables
1 parent f7cef0c commit e59980a

28 files changed

+665
-714
lines changed

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

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -62,37 +62,35 @@ <h1>Countries</h1>
6262

6363
<p>Click on a column to sort rows based on column values.</p>
6464

65-
<div className="responsive-table">
66-
<SortableTable
67-
data-sort-class-odd="row-odd"
68-
data-sort-class-even="row-even">
69-
<thead>
70-
<tr>
71-
<th>Code</th>
72-
<th>Name</th>
73-
<th>Size (KM)</th>
74-
<th>Population</th>
75-
<th>Continent</th>
76-
</tr>
77-
</thead>
78-
<tbody>
79-
{props.data && props.data.countries && props.data.countries.map(country => {
80-
return (
81-
<tr key={country.iso} onClick={toggleHighlight} className="pointer">
82-
<td>{country.iso}</td>
83-
<td>
84-
<i class={country.iso.toLowerCase() + ' flag'}></i>
85-
<span>{country.country}</span>
86-
</td>
87-
<td className="align-right" data-value={country.area_km}>{format.number(country.area_km)}</td>
88-
<td className="align-right" data-value={country.population}>{format.number(country.population)}</td>
89-
<td>{country.continent}</td>
90-
</tr>
91-
)
92-
})}
93-
</tbody>
94-
</SortableTable>
95-
</div>
65+
<SortableTable
66+
data-sort-class-odd="row-odd"
67+
data-sort-class-even="row-even">
68+
<thead>
69+
<tr>
70+
<th>Code</th>
71+
<th>Name</th>
72+
<th>Size (KM)</th>
73+
<th>Population</th>
74+
<th>Continent</th>
75+
</tr>
76+
</thead>
77+
<tbody>
78+
{props.data && props.data.countries && props.data.countries.map(country => {
79+
return (
80+
<tr key={country.iso} onClick={toggleHighlight} className="pointer">
81+
<td>
82+
<i class={country.iso.toLowerCase() + ' flag'}></i>
83+
<span>{country.iso}</span>
84+
</td>
85+
<td>{country.country}</td>
86+
<td className="align-right" data-value={country.area_km}>{format.number(country.area_km)}</td>
87+
<td className="align-right" data-value={country.population}>{format.number(country.population)}</td>
88+
<td>{country.continent}</td>
89+
</tr>
90+
)
91+
})}
92+
</tbody>
93+
</SortableTable>
9694
</React.Fragment>
9795
)
9896
}

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

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -32,30 +32,28 @@ <h1>Countries</h1>
3232

3333
<p>Click on a column to sort rows based on column values.</p>
3434

35-
<div class="responsive-table">
36-
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
37-
<thead>
38-
<tr>
39-
<th>Code</th>
40-
<th>Name</th>
41-
<th>Size (KM)</th>
42-
<th>Population</th>
43-
<th>Continent</th>
44-
</tr>
45-
</thead>
46-
<tbody>
47-
{{#each countries}}
48-
<tr>
49-
<td>{{iso}}</td>
50-
<td><i class="{{lowerCase iso}} flag"></i>{{country}}</td>
51-
<td class="align-right" data-value="{{area_km}}">{{formatNumber area_km}}</td>
52-
<td class="align-right" data-value="{{population}}">{{formatNumber population}}</td>
53-
<td>{{continent}}</td>
54-
</tr>
55-
{{/each}}
56-
</tbody>
57-
</table>
58-
</div>
35+
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
36+
<thead>
37+
<tr>
38+
<th>Code</th>
39+
<th>Name</th>
40+
<th>Size (KM)</th>
41+
<th>Population</th>
42+
<th>Continent</th>
43+
</tr>
44+
</thead>
45+
<tbody>
46+
{{#each countries}}
47+
<tr>
48+
<td><i class="{{lowerCase iso}} flag"></i>{{iso}}</td>
49+
<td>{{country}}</td>
50+
<td class="align-right" data-value="{{area_km}}">{{formatNumber area_km}}</td>
51+
<td class="align-right" data-value="{{population}}">{{formatNumber population}}</td>
52+
<td>{{continent}}</td>
53+
</tr>
54+
{{/each}}
55+
</tbody>
56+
</table>
5957
{{/if}}
6058
</script>
6159

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

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -31,29 +31,27 @@ <h1>Countries</h1>
3131

3232
<p>Click on a column to sort rows based on column values.</p>
3333

34-
<div class="responsive-table">
35-
<data-table
36-
data-bind="countries"
37-
data-labels="Code, Name, Size (KM), Population, Continent"
38-
data-table-attr="
39-
class=click-to-highlight,
40-
data-sort
41-
data-sort-class-odd=row-odd,
42-
data-sort-class-even=row-even">
43-
<script type="text/x-template">
44-
<tr>
45-
<td>${iso}</td>
46-
<td>
47-
<i class="${iso.toLowerCase()} flag"></i>
48-
${country}
49-
</td>
50-
<td class="align-right" data-value="${area_km}">${format.number(area_km)}</td>
51-
<td class="align-right" data-value="${population}">${format.number(population)}</td>
52-
<td>${continent}</td>
53-
</tr>
54-
</script>
55-
</data-table>
56-
</div>
34+
<data-table
35+
data-bind="countries"
36+
data-labels="Code, Name, Size (KM), Population, Continent"
37+
data-table-attr="
38+
class=click-to-highlight,
39+
data-sort
40+
data-sort-class-odd=row-odd,
41+
data-sort-class-even=row-even">
42+
<script type="text/x-template">
43+
<tr>
44+
<td>
45+
<i class="${iso.toLowerCase()} flag"></i>
46+
${iso}
47+
</td>
48+
<td>${country}</td>
49+
<td class="align-right" data-value="${area_km}">${format.number(area_km)}</td>
50+
<td class="align-right" data-value="${population}">${format.number(population)}</td>
51+
<td>${continent}</td>
52+
</tr>
53+
</script>
54+
</data-table>
5755
</div>
5856
</template>
5957

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

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -84,37 +84,35 @@ <h1>Countries</h1>
8484
</ul>
8585
</p>
8686

87-
<div className="responsive-table">
88-
<SortableTable
89-
data-sort-class-odd="row-odd"
90-
data-sort-class-even="row-even">
91-
<thead>
92-
<tr>
93-
<th>Code</th>
94-
<th>Name</th>
95-
<th>Size (KM)</th>
96-
<th>Population</th>
97-
<th>Continent</th>
98-
</tr>
99-
</thead>
100-
<tbody>
101-
{props.data && props.data.countries && props.data.countries.map(country => {
102-
return (
103-
<tr key={country.iso} onClick={toggleHighlight} className="pointer">
104-
<td>{country.iso}</td>
105-
<td>
106-
<i class={country.iso.toLowerCase() + ' flag'}></i>
107-
<span>{country.country}</span>
108-
</td>
109-
<td className="align-right" data-value={country.area_km}>{format.number(country.area_km)}</td>
110-
<td className="align-right" data-value={country.population}>{format.number(country.population)}</td>
111-
<td>{country.continent}</td>
112-
</tr>
113-
)
114-
})}
115-
</tbody>
116-
</SortableTable>
117-
</div>
87+
<SortableTable
88+
data-sort-class-odd="row-odd"
89+
data-sort-class-even="row-even">
90+
<thead>
91+
<tr>
92+
<th>Code</th>
93+
<th>Name</th>
94+
<th>Size (KM)</th>
95+
<th>Population</th>
96+
<th>Continent</th>
97+
</tr>
98+
</thead>
99+
<tbody>
100+
{props.data && props.data.countries && props.data.countries.map(country => {
101+
return (
102+
<tr key={country.iso} onClick={toggleHighlight} className="pointer">
103+
<td>
104+
<i class={country.iso.toLowerCase() + ' flag'}></i>
105+
<span>{country.iso}</span>
106+
</td>
107+
<td>{country.country}</td>
108+
<td className="align-right" data-value={country.area_km}>{format.number(country.area_km)}</td>
109+
<td className="align-right" data-value={country.population}>{format.number(country.population)}</td>
110+
<td>{country.continent}</td>
111+
</tr>
112+
)
113+
})}
114+
</tbody>
115+
</SortableTable>
118116
</React.Fragment>
119117
)
120118
}

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

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -66,37 +66,35 @@ <h1>Countries</h1>
6666

6767
<p>Click on a column to sort rows based on column values.</p>
6868

69-
<div className="responsive-table">
70-
<SortableTable
71-
data-sort-class-odd="row-odd"
72-
data-sort-class-even="row-even">
73-
<thead>
74-
<tr>
75-
<th>Code</th>
76-
<th>Name</th>
77-
<th>Size (KM)</th>
78-
<th>Population</th>
79-
<th>Continent</th>
80-
</tr>
81-
</thead>
82-
<tbody>
83-
{props.data && props.data.countries && props.data.countries.map(country => {
84-
return (
85-
<tr key={country.iso} onClick={toggleHighlight} className="pointer">
86-
<td>{country.iso}</td>
87-
<td>
88-
<i className={country.iso.toLowerCase() + ' flag'}></i>
89-
<span>{country.country}</span>
90-
</td>
91-
<td className="align-right" data-value={country.area_km}>{format.number(country.area_km)}</td>
92-
<td className="align-right" data-value={country.population}>{format.number(country.population)}</td>
93-
<td>{country.continent}</td>
94-
</tr>
95-
)
96-
})}
97-
</tbody>
98-
</SortableTable>
99-
</div>
69+
<SortableTable
70+
data-sort-class-odd="row-odd"
71+
data-sort-class-even="row-even">
72+
<thead>
73+
<tr>
74+
<th>Code</th>
75+
<th>Name</th>
76+
<th>Size (KM)</th>
77+
<th>Population</th>
78+
<th>Continent</th>
79+
</tr>
80+
</thead>
81+
<tbody>
82+
{props.data && props.data.countries && props.data.countries.map(country => {
83+
return (
84+
<tr key={country.iso} onClick={toggleHighlight} className="pointer">
85+
<td>
86+
<i class={country.iso.toLowerCase() + ' flag'}></i>
87+
<span>{country.iso}</span>
88+
</td>
89+
<td>{country.country}</td>
90+
<td className="align-right" data-value={country.area_km}>{format.number(country.area_km)}</td>
91+
<td className="align-right" data-value={country.population}>{format.number(country.population)}</td>
92+
<td>{country.continent}</td>
93+
</tr>
94+
)
95+
})}
96+
</tbody>
97+
</SortableTable>
10098
</React.Fragment>
10199
)
102100
}

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

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -46,31 +46,29 @@ <h1>Countries</h1>
4646

4747
<p>Click on a column to sort rows based on column values.</p>
4848

49-
<div class="responsive-table">
50-
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
51-
<thead>
52-
<tr>
53-
<th>Code</th>
54-
<th>Name</th>
55-
<th>Size (KM)</th>
56-
<th>Population</th>
57-
<th>Continent</th>
58-
</tr>
59-
</thead>
60-
<tbody>
61-
<tr v-for="country in countries">
62-
<td>{{ country.iso }}</td>
63-
<td>
64-
<i v-bind:class="country.iso.toLowerCase() + ' flag'"></i>
65-
<span>{{ country.country }}<span>
66-
</td>
67-
<td class="align-right" v-bind:data-value="country.area_km" v-format-number="country.area_km"></td>
68-
<td class="align-right" v-bind:data-value="country.population" v-format-number="country.population"></td>
69-
<td>{{ country.continent }}</td>
70-
</tr>
71-
</tbody>
72-
</table>
73-
</div>
49+
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
50+
<thead>
51+
<tr>
52+
<th>Code</th>
53+
<th>Name</th>
54+
<th>Size (KM)</th>
55+
<th>Population</th>
56+
<th>Continent</th>
57+
</tr>
58+
</thead>
59+
<tbody>
60+
<tr v-for="country in countries">
61+
<td>
62+
<i v-bind:class="country.iso.toLowerCase() + ' flag'"></i>
63+
<span>{{ country.iso }}</span>
64+
</td>
65+
<td>{{ country.country }}<span></td>
66+
<td class="align-right" v-bind:data-value="country.area_km" v-format-number="country.area_km"></td>
67+
<td class="align-right" v-bind:data-value="country.population" v-format-number="country.population"></td>
68+
<td>{{ country.continent }}</td>
69+
</tr>
70+
</tbody>
71+
</table>
7472
</div>
7573
</script>
7674

‎examples/css/countries.css‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,13 @@ form.search {
9393
}
9494
}
9595
/*
96-
When the following is used:
96+
Originally the the following is used in HTML:
9797
<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.
98+
Now `position: sticky` is being used for headers and first column.
99+
When sticky position is used it will not work if "responsive-table" if used
100+
because because of the overflow being defined. The "responsive-table" code is
101+
being kept for reference in case this CSS is copied and used as a starting point
102+
for one of your apps and you prefer responsive tables.
100103
101104
[responsive-table] provides a nice visual layout because it allows the
102105
table to fully fit with-in the page. The user can easily swipe to view
@@ -139,7 +142,7 @@ table tbody tr.row-even { background-color: #f6f8fa; }
139142
table tbody tr.highlight { background-color: yellow; }
140143

141144
/* Table Sticky Header and First Column */
142-
table { position: relative; }
145+
table { position: relative; margin:20px 0; }
143146
th { position: sticky; top:-1px; background-color: hsla(210, 29%, 93%, 1); z-index:2; }
144147
table thead tr th:first-child { z-index: 3; left: 0; }
145148
table tbody tr td:first-child { position: sticky; left:0; z-index:1; }
@@ -148,9 +151,8 @@ table tbody tr:nth-child(even) td:first-child { background-color: #f6f8fa; }
148151
table tbody tr.highlight td:first-child {background-color: yellow; }
149152

150153
/*
151-
In Firefox the sticky cells function but do not look good so
152-
sticky first column is turned off. For options to work-around
153-
this issue see:
154+
In Firefox the sticky cells function but do not look good so the sticky
155+
first column is turned off. For options to work-around this issue see:
154156
https://stackoverflow.com/questions/57166162/table-headers-positionsticky-and-border-issue/57170489
155157
*/
156158
@-moz-document url-prefix() {

0 commit comments

Comments
 (0)