nat.js | docs

What does it do?

You're given a desktop design that includes a table and now need to make that display nicely on a screen that's 600px wide. "Ergh, not another...". You get the idea.

nat.js allows you to write code in semantic markup, converting it to a based responsive version.

Utilising the attribute, the tables remain suitable for those using screen readers as their counterparts, as well as looking great on mobile.

Installation Methods

There are a few different ways to install depending on the usage.

nat.js was designed to work both in the browser and in Node.js.

1. Download

2. CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/nat.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/nat-theme.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/nat-min.js"><script>

3. NPM

4. Pre-compiled HTML

To save on overhead, you can pre-compile your using the Online Convertor, and then just include the CSS stylesheet in your projects.

Usage

Simply add as an attribute to any element.

It's important to create your markup in the correct structure, including , , and as used in the options.

Node.js

var nat = require('notanothertable');
nat.init();

Or in ES6 syntax

import nat from 'notanothertable';
nat.init();

Browser

<head>
    <link rel="stylesheet" href="nat.css"/>
</head>
<script src="nat.js"></script>
<script>
    nat.init();
</script>

Methods

init

Find every table on the page with a attribute, and convert it.

nat.init();

convert

Use this method to return an object containing the nat.js markup as a string.

Options

There are 3 configuration options depending on whether you have headers on the x and y axis of the table: default, nat-column, and nat-row.

default

By default, nat.js is set up to expect x and y axis headers.

  • Column header 1
    Column header 2
    Row header 1
    Column header 1: Cell 1
    Column header 2: Cell 2
    Row header 2
    Column header 1: Cell 3
    Column header 2: Cell 4

nat-column

Add if you just have headers on the x-axis.

  • Column header 1
    Column header 2
    Column header 1
    Cell 1
    Cell 2
    Column header 2
    Cell 3
    Cell 4
    Cell 1
    Cell 3
    Cell 2
    Cell 4

nat-row

Add if you just have headers on the y-axis.

  • Row header 1
    Cell 1
    Cell 2
    Cell 3
    Row header 2
    Cell 4
    Cell 5
    Cell 6

Online Convertor

Use this generator to pre-compile your nat.js table to reduce overhead on page load.

Just copy and paste the output into your application and you're good to go.

Remember to include the nat.css file!

Input

Output

Preview

Your new nat.js table will preview here.

Browser Compatibility

Tested and working on:

  • IE7+
  • Firefox
  • Safari
  • Chrome

License

Distributed under the MIT License. Have at it.

Contact

Made by Patrick Hurley