Permalink
Browse files

feat(table): js for responsive table headers

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Jan 25, 2017
1 parent e46bf8a commit b0d8908c5e6e6e37069ed16d0fb237467efcd47d
Showing with 52 additions and 66 deletions.
  1. +1 −0 src/main.js
  2. +0 −38 src/table/samples/01-responsive-sample.html
  3. +24 −0 src/table/table.js
  4. +27 −28 src/table/table.scss
View
@@ -4,3 +4,4 @@ require('./js-common-components/closest');
require('./expandable/expandable');
require('./tabs/tabs');
require('./slider/slider');
require('./table/table');
@@ -1,38 +0,0 @@
<table class="table">
<thead>
<tr>
<th>deployment size</th>
<th>timeseries id</th>
<th>name</th>
<th>unit</th>
<th>aggregations</th>
<th>filters</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="deployment size">Small</td>
<td data-th="timeseries id">com.ruxit.builtin:host.cpu.idle</td>
<td data-th="name">CPU idle</td>
<td data-th="unit">%</td>
<td data-th="aggregations">min, max, sum, avg</td>
<td data-th="filters">osType</td>
</tr>
<tr>
<td data-th="deployment size">Medium</td>
<td data-th="timeseries id">com.ruxit.builtin:host.cpu.system</td>
<td data-th="name">CPU system</td>
<td data-th="unit">%</td>
<td data-th="name">min, max, sum, avg</td>
<td data-th="filters">osType</td>
</tr>
<tr>
<td data-th="deployment size">Large</td>
<td data-th="timeseries id">com.ruxit.builtin:host.cpu.load</td>
<td data-th="name">CPU load</td>
<td data-th="unit">%</td>
<td data-th="name">min, max, sum, avg</td>
<td data-th="filters">osType</td>
</tr>
</tbody>
</table>
View
@@ -0,0 +1,24 @@
import $ from '../js-common-components/dollar';
const init = () => {
const i = ($('th').length);
const header = [];
$('th').forEach(el => {
header.push(el.textContent);
if (!el.getAttribute('data-initialized')) {
el.setAttribute('data-initialized', true);
}
});
let j = i - 1;
$('td').forEach(cell => {
cell.setAttribute('data-th', header[i - 1 - j]);
if (j > 0) {
j--;
} else {
console.log(j);
j = i - 1;
}
});
};
init();
View
@@ -27,36 +27,35 @@ $includedTable: false !default;
@media (max-width: 920px) {
.table td {
display: block;
border: none;
border-top: 1px solid #eee;
position: relative;
padding-left: 50%;
width: auto;
padding-top: 11px;
white-space: normal;
.table td {
display: block;
border-top: 1px solid $gray-200;
position: relative;
padding-left: 50%;
width: auto;
padding-top: 11px;
white-space: normal;
}
.table td:before {
content: attr(data-th) " ";
text-align: left;
font-weight: normal;
font-size: 12px;
position: absolute;
border-right: 1px solid $gray-200;
height: 100%;
top: inherit;
left: 12px;
width: 46%;
white-space: inherit;
}
.table thead {
display: none;
}
}
.table td:before {
content: attr(data-th) " ";
text-align: left;
font-weight: normal;
font-size: 12px;
position: absolute;
border-right: 1px solid #eee;
height: 100%;
top: inherit;
left: 12px;
width: 46%;
white-space: inherit;
}
.table thead {
display: none;
}
}
.table thead th {
text-align: left;
font-weight: normal;

0 comments on commit b0d8908

Please sign in to comment.