sticky tables

.gitignore

node_modules

README.md

Sticky table headers

Sticky tables in chrome were in incredible pain in the ass until recently they were made much easier.

https://bugs.chromium.org/p/chromium/issues/detail?id=702927

https://www.youtube.com/watch?v=OM3t4SyxcAE&feature=youtu.be

https://twitter.com/hyperampapp/status/907760599983022080

index.js

var html = require('choo/html')
var choo = require('choo')

var css = require('csjs-inject')

var app = choo()
app.use(titleStore)
app.route('/', mainView)
var container = document.createElement('div')
container.id = 'app'
document.body.appendChild(container)
app.mount('#app')

var styles = css`
  .sticky th {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    background-color: white;
  }

  .stickyRow th,td {
    position: sticky;
    position: -webkit-sticky;
    top: 35px;
    background-color: white;
  }

  .tableSize {
    width: 1000px;
  }

  .scroll {
    overflow: overlay;
    height: 200px;
    width: 300px;
  }
`

function mainView (state, emit) {
  return html`
    <div id="app">
      <h1>Title: ${state.title}</h1>
      <input type="text" value="${state.title}" oninput=${update} />
      <div class="${styles.scroll}">
        <table class="${styles.tableSize}" summary="The most famous UK punk bands">
          <caption>A summary of the UK's most famous punk bands</caption>
          <thead>
            <tr class="${styles.sticky}">
              <th scope="col">Band</th>
              <th scope="col">Year formed</th>
              <th scope="col">No. of Albums</th>
              <th scope="col">Most famous song</th>
            </tr>
          </thead>
          <tbody class=${styles.stickyRow}>
            <tr>
              <th scope="row">Buzzcocks</th>
              <td>1976</td>
              <td>9</td>
              <td>Evers</td>
            </tr>
            <tr>
              <th scope="row">The Clash</th>
              <td>1976</td>
              <td>6</td>
              <td>London Calling</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
            <tr>
              <th scope="row">The Stranglers</th>
              <td>1974</td>
              <td>17</td>
              <td>No More Heroes</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th scope="row" colspan="2">Total albums</th>
              <td colspan="2">77</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  `

  function update (e) {
    emit('update', e.target.value)
  }
}

function titleStore (state, emitter) {
  state.title = 'Not quite set yet'
  emitter.on('DOMContentLoaded', function () {
    emitter.on('update', function (newTitle) {
      state.title = newTitle
      emitter.emit('render')
    })
  })
}

package.json

{
  "name": "sticky-table",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "budo index.js --live --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "budo": "^10.0.4",
    "standard": "^10.0.3"
  },
  "dependencies": {
    "csjs-inject": "^1.0.1",
    "choo": "^6.0.1"
  }
}