https://github.com/markmybytes/hide-it
A vanilla javascript implementation of DataTables Responsive extension.
https://github.com/markmybytes/hide-it
Last synced: about 1 year ago
JSON representation
A vanilla javascript implementation of DataTables Responsive extension.
- Host: GitHub
- URL: https://github.com/markmybytes/hide-it
- Owner: markmybytes
- License: gpl-2.0
- Created: 2025-04-28T03:01:45.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-28T03:15:13.000Z (about 1 year ago)
- Last Synced: 2025-04-28T04:22:08.598Z (about 1 year ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Tag][tag-shield]][tag-url]
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
hide-it
A vanilla javascript implementation of DataTables Responsive extension.
Report Bug
·
Request Feature
Table of Contents
## 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.
## Getting Started
### Include the source
You can go to the [Releases](https://github.com/markmybytes/hide-it/releases) page the download the source and include
the source file to your project.
```html
```
### CDN
```html
<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">
```
Example
```html
```
## Usage
### Initialisation
To make a table "responsive", you should create an instance of `HideIt` with the CSS selector to the target table.
```javascript
const rpc = new HideIt("table");
```
Then, add the responsive class name to table headers. See [Options](#options) for the default class names.
```html
ID
User Name
Email
Action
```
### 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.
### Options
_hide-it_ allows you to customise the behaviour by supplying an setting object to `HideIt`.
```javascript
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,
}
3. resizeTimeout
Type
number
Description
Delay (in milliseconds) to rerender the table after a window resize event.
Default
150
[tag-url]: https://github.com/markmybytes/hide-it/releases
[tag-shield]: https://img.shields.io/github/v/tag/markmybytes/hide-it?style=for-the-badge&label=LATEST&color=%23B1B1B1
[contributors-shield]: https://img.shields.io/github/contributors/markmybytes/hide-it.svg?style=for-the-badge
[contributors-url]: https://github.com/markmybytes/hide-it/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/markmybytes/hide-it.svg?style=for-the-badge
[forks-url]: https://github.com/markmybytes/hide-it/network/members
[stars-shield]: https://img.shields.io/github/stars/markmybytes/hide-it.svg?style=for-the-badge
[stars-url]: https://github.com/markmybytes/hide-it/stargazers
[issues-shield]: https://img.shields.io/github/issues/markmybytes/hide-it.svg?style=for-the-badge
[issues-url]: https://github.com/markmybytes/hide-it/issues
[license-shield]: https://img.shields.io/github/license/markmybytes/hide-it.svg?style=for-the-badge
[license-url]: https://github.com/markmybytes/hide-it/blob/master/LICENSE.txt