Skip to content

Instantly share code, notes, and snippets.

@bstro
Last active January 27, 2018 00:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bstro/0786d7560131feff9bebbe4356f41129 to your computer and use it in GitHub Desktop.
Save bstro/0786d7560131feff9bebbe4356f41129 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'table component',
});
* {
overflow-x: scroll;
}
body {
font-family: sans-serif;
}
.wrapper { width: 700px; }
.container {
background-color: white;
width: 1024px;
margin: 0 auto;
height: 100vh;
display: grid;
grid-template-columns: 1fr 2fr 2fr 2fr;
grid-template-rows: 100px 100px 100px 100px;
overflow-x: scroll;
overflow-y: scroll;
position: relative;
}
.column {
overflow: visible;
}
.column.frozen {
background-color: yellow;
grid-column: 1/1;
}
.cell {
background-color: aqua;
padding: 10px
}
<div class="wrapper">
<div class="container">
<div class="column frozen" data-column="1">
<div class="cell" data-row="1">foo</div>
<div class="cell" data-row="2">bar</div>
<div class="cell" data-row="3">bill</div>
<div class="cell" data-row="4">baz</div>
</div>
<div class="column" data-column="2">
<div class="cell" data-row="1">2,1</div>
<div class="cell" data-row="2">2,2</div>
<div class="cell" data-row="3">2,3</div>
<div class="cell" data-row="4">2,4</div>
</div>
<div class="column" data-column="3">
<div class="cell" data-row="1">3,1</div>
<div class="cell" data-row="2">3,2</div>
<div class="cell" data-row="3">3,3</div>
<div class="cell" data-row="4">3,4</div>
</div>
<div class="column" data-column="4">
<div class="cell" data-row="1">4,1</div>
<div class="cell" data-row="2">4,2</div>
<div class="cell" data-row="3">4,3</div>
<div class="cell" data-row="4">4,4</div>
</div>
</div>
</div>
{
"version": "0.13.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.16.2",
"ember-template-compiler": "2.16.2",
"ember-testing": "2.16.2"
},
"addons": {
"ember-data": "2.11.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment