melvinidema / clicktable

A super lightweight package to make your table rows clickable like an anchor link

Clicktable (/klɪktəbl/ like clickable) is a lightweight module to help you easily make your table rows act like anchor links.

Installation

First update NPM and install clicktable in your dependencies:

npm i -g npm
npm i --save clicktable

Then require and initialize Clicktable:

const Clicktable = require("clicktable");
const clickMe = new Clicktable();

Now all you need to do is add the data-href attribute to your table rows:

<table>
  <tr>
    <th>Package</th>
    <th>Version</th>
    <th>Language</th>
  </tr>
  <tr data-href="https://www.npmjs.com/package/clicktable">
    <td>Clicktable</td>
    <td>1.1.0</td>
    <td>Javascript</td>
  </tr>
</table>

Done! Your table rows now act like a normal anchor link:

Options

Since V1.1.0 Clicktable automatically inserts a default styling. This styling is the same as the user-agent styling of most modern browsers for anchor links and is easily overwritten in your CSS style. If you want to manually shut off the default styling just pass "style": "none" as option.

const clickMe = new Clicktable({
  style: "none"
});

clicktable's Issues

Create NPM independent JS file

Create a downloadable JS file to include Clicktable into vanilla webprojects.

Use outside package for handling CSS insertion

Clicktable has its own function to insert CSS right now. Considering using "insert-css" NPM package for handling the CSS.

Pro's:

• Better browser support
• Less bloated code

Con's:

• More dependencies, bigger project.