hide-it

A vanilla javascript implementation of DataTables Responsive extension.
Report Bug · Request Feature

About The Project

This project provides an alternative to DataTables's responsive plugin. JQuery is still an dependency of DataTables and you may not want to include JQuery into your project. hide-it is completely written vanilla Javascript without any dependency to make your table's columns collapse when needed.

hide-it is "listener safe". When a column are "collapsed" and if the cell content is an HTML node (e.g. button), the content will be MOVED into a collapsible menu (not clone or copy) so that the listener binded on the DOM node will in theory be retained.

Althought this implementation is not efficient, it maximise the chance of retain the functionality and behaviour of third party reactive library like Alpine.js or HTMX, or custom event listener.

(back to top)

Getting Started

Include the source

You can go to the Releases page the download the source and include the source file to your project.

<link href=".../hide-it.css" rel="stylesheet">
<script src=".../hide-it.js">

CDN

<link href="https://cdn.jsdelivr.net/gh/markmybytes/hide-it@<version>/dist/hide-it.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/markmybytes/hide-it@<version>/dist/hide-it.min.js"></script>

Example

<!-- Specific Version -->
<link href="https://cdn.jsdelivr.net/gh/markmybytes/hide-it@0.0.1/dist/hide-it.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/markmybytes/hide-it@0.0.1/dist/hide-it.min.js"></script>

<!-- Latest -->
<link href="https://cdn.jsdelivr.net/gh/markmybytes/hide-it@main/dist/hide-it.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/markmybytes/hide-it@main/dist/hide-it.min.js"></script>

(back to top)

Usage

Initialisation

To make a table "responsive", you should create an instance of HideIt with the CSS selector to the target table.

const rpc = new HideIt("table");

Then, add the responsive class name to table headers. See Options for the default class names.

<thead>
    <tr>
        <th>ID</th>
        <th>User Name</th>
        <th class="collapse-md">Email</th>
        <th class="collapse-lg">Action</th>
    </tr>
</thead>

Methods

1. process()

   Reparse the table. hide-it will gather the necessary information and manipulate the table to make the responsive functionality wokring. If new rows are added to the table, invoke this method.

2. render()

   Show/hide columns based on the viewport width and responsive setting to columns

3. hiddenClasses()

   Returns the hidden class names based on the current window width and breakpoints.

(back to top)

Options

hide-it allows you to customise the behaviour by supplying an setting object to HideIt.

  const rpc = new HideIt("table", {});

1. breakpoints

   Type	Object<string, number>
   Description	Class names and its breakpoints (in pixel)
   Default	{ "collapse-xs": 576, "collapse-sm": 768, "collapse-md": 992, "collapse-lg": 1200, "collapse": Number.MAX_SAFE_INTEGER, }

2. resizeTimeout

   Type	number
   Description	Delay (in milliseconds) to rerender the table after a window resize event.
   Default	150