gatsby-remark-sticky-table

gatsby-remark-sticky-table is a plugin that creates sticky header tables from markdown.

By taking advantage of the remark Abstract Syntax Tree (AST) this plugin grabs all references to the HTML <th> element and applies an inline css style to make it position: sticky

Motivation Tables are tricky, they’re not really mobile first and more often than not they don’t look great.

This plugin aims to wrap all <table> elements with <div> containers to help manage heights and overflows, it also modifies the default <th> as mentioned above. The rest of the styles are up to you!

If you’re using gatsby-remark-sticky-table in your project i’d love to hear from you @pauliescanlon

👁️ Preview

Live Demo

🚀 Getting started

Install

npm install @pauliescanlon/gatsby-remark-sticky-table

Setup

Add gatsby-transformer-remark to your gatsby-config.js then add @pauliescanlon/gatsby-remark-sticky-table as a plugin of that 😅

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`@pauliescanlon/gatsby-remark-sticky-table`],
      },
    },
  ],
}

Options

Option	Type	Reqiured	Default	Description
height	number	no	null	height of `remark-sticky-table`
backgroundColor	string	no	null	background color of `remark-sticky-table-th`

...
plugins: [
  {
    resolve: `@pauliescanlon/gatsby-remark-sticky-table`,
    options: {
      height: 250,
      backgroundColor: "#ffffff",
    },
  },
]

✨ Styling

This plugin ships with a minimal amount of styles that are applied inline but these are purely to position the <th> which creates the sticky header. The more visual styles are up to you.

You might not need many styles but you will no doubt at least need a height on remark-sticky-table and a background-color on remark-sticky-table-th

A quick way to achieve this is to use the plugin options but probably a better way will be to add this and other styles using your css method of choice.

For convenience each element has been given a class name these are:

Element	Class name	Description
div	`remark-sticky-table`	The outer div that wraps everything and has a `height`
div	`remark-sticky-table-wrapper`	An inner div with `overflow: auto`
table	`remark-sticky-table-table`	un-styled HTML `<table>`
thead	`remark-sticky-table-thead`	un-styled HTML `<thead>`
tr	`remark-sticky-table-tr`	un-styled HTML `<tr>`
th	`remark-sticky-table-th`	HTML `<th>` with `position: sticky` inline style
tbody	`remark-sticky-table-tbody`	un-styled HTML `<tbody>`
td	`remark-sticky-table-td`	un-styled HTML `<td>`

💅 Css

Here’s some css to get you started

.remark-sticky-table {
  border-radius: 2px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  height: 300px;
  margin: 48px 0px;
}

.remark-sticky-table-table {
  border-collapse: collapse;
  box-sizing: border-box;
  width: 100%;
}

.remark-sticky-table-th {
  background-color: #f7f7f7;
  font-weight: 600;
  text-align: left;
}

.remark-sticky-table-tbody:nth-child(odd) {
  background-color: #fafafa;
}

.remark-sticky-table-th,
.remark-sticky-table-td {
  padding: 16px;
}

📝 Markdown

And that’s it 💥 Just use markdown as you normally would to create tables and let gatsby-remark-sticky-table do the rest.

| Head one | Head two | Head three |
| -------- | ---------| ---------- |
| cell one | cell two | cell three |