initial commit

.gitignore

@@ -0,0 +1 @@
+node_modules/

.npmignore

@@ -0,0 +1,9 @@
+.git
+.github
+node_modules
+
+.gitignore
+.npmignore
+.sass-lint.yml
+index.html
+screenshot.png

.sass-lint.yml

@@ -0,0 +1,29 @@
+rules:
+  class-name-format:
+    - 0
+  empty-line-between-blocks:
+    - 0
+  final-newline:
+    - 0
+  force-attribute-nesting:
+    - 0
+  force-element-nesting:
+    - 0
+  hex-length:
+    - 0
+  indentation:
+    - 0
+  leading-zero:
+    - 0
+  no-color-literals:
+    - 1
+  no-css-comments:
+    - 0
+  no-ids:
+    - 0
+  no-trailing-whitespace:
+    - 0
+  property-sort-order:
+    - 1
+    -
+      order: 'recess'

README.md

@@ -1,2 +1,48 @@
 # bulma-sticky-table
-A Bulma-friendly way to stick a table header.
+
+![Screenshot](screenshot.png)
+
+A Bulma-friendly way to stick a table header, the first table column, or both.
+
+**[See It In Action](https://cityssm.github.io/bulma-sticky-table)**
+
+## Installation
+
+Download a release, or grab the code from npm.
+
+`npm install @cityssm/bulma-sticky-table`
+
+When building your stylesheet, import `_sticky-table.scss` AFTER you import Bulma.
+This will ensure your colour customizations are used.
+
+```scss
+@import 'bulma/bulma';
+@import '@cityssm/sticky-table/sticky-table';
+```
+
+Alternatively, if you are using Bulma without any customizations,
+you can replace your Bulma stylesheet with `bulma-with-sticky-tables.min.css`.
+
+```html
+<link rel="stylesheet" href="path/to/cityssm/bulma-sticky-table/bulma-with-sticky-table.min.css">
+```
+
+## Usage
+
+Build your Bulma table as per usual, using the [Bulma Table Documentation](https://bulma.io/documentation/elements/table/) as your guide.
+
+Then, add either or both of the following classes to your `<table>` tag.
+
+Use `.has-sticky-header` to stick the header.
+
+-  Note that the header should be inside of a `<thead>` tag, and each cell should use a `<th>` tag.
+
+Use `.has-sticky-column` to stick the first column.
+
+-  Note that the first cells in each table row should use the `<th>` tag.
+
+## Thanks
+
+[![Made with Bulma](https://bulma.io/images/made-with-bulma.png)](https://bulma.io)
+
+Heavily inspired by [code found on CSS-Tricks](https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/).

_sticky-table.scss

@@ -0,0 +1,91 @@
+.table.has-sticky-header {
+  thead th {
+    @if $table-head-background-color == 'transparent' or $table-head-background-color == rgba(0, 0, 0, 0) {
+      background-color: $table-background-color;
+    }
+
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  &.is-bordered {
+    border-collapse: separate;
+
+    th,
+    td {
+      border-bottom-width: 0;
+
+      &:not(:last-child) {
+        border-right-width: 0;
+      }
+
+      tbody tr:first-child & {
+        border-top-width: 0;
+      }
+    }
+  }
+}
+
+.table.has-sticky-column {
+
+  border-collapse: separate;
+
+  th,
+  td {
+    border-bottom-width: 0;
+
+    &:not(:last-child) {
+      border-right-width: 0;
+    }
+
+    tbody tr:first-child & {
+      border-top-width: 0;
+    }
+  }
+
+  thead th:first-child {
+    @if $table-head-background-color == 'transparent' or $table-head-background-color == rgba(0, 0, 0, 0) {
+      background-color: $table-background-color;
+    }
+
+    position: sticky;
+    left: 0;
+    z-index: 2;
+  }
+
+  tbody th:first-child {
+    @if $table-body-background-color == 'transparent' or $table-body-background-color == rgba(0, 0, 0, 0) {
+      background-color: $table-background-color;
+    }
+
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  &.is-bordered {
+    thead th:first-child,
+    tbody th:first-child {
+      border-right: 1px solid $border;
+    }
+  }
+
+  &.is-hoverable {
+    tbody tr:not(.is-selected):hover th:first-child {
+      background-color: $table-row-hover-background-color;
+    }
+  }
+
+  &.is-striped {
+    tbody tr:not(.is-selected):nth-child(even) th:first-child {
+      background-color: $table-striped-row-even-background-color;
+    }
+  }
+
+  &.is-striped.is-hoverable {
+    tbody tr:not(.is-selected):nth-child(even):hover th:first-child {
+      background-color: $table-striped-row-even-hover-background-color;
+    }
+  }
+}

bulma-with-sticky-table.scss

@@ -0,0 +1,2 @@
+@import 'bulma/bulma';
+@import 'sticky-table';