rpc-table

A vanilla javascript implementation of DataTables Responsive extension.

Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
   • Include the source
   • CDN
3. Usage

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. rpc-table is completely written vanilla Javascript without any dependency to make your table's columns collapse when needed.

rpc-table 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=".../rpc-table.css" rel="stylesheet">
<script src=".../rpc-table.js">

CDN

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

Example

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

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

(back to top)

Usage

Initialisation

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

const rpc = new RpcTable("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. rpc-table 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

rpc-table allows you to customise the behaviour by supplying an setting object to RpcTable.

  const rpc = new RpcTable("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