The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

Last update: Oct 20, 2022

Overview

JSTable

The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive.

The plugin is similar to the jQuery datatables but without the jQuery dependencies.

The implementation is inspired by Vanilla-DataTables. Unlike Vanilla-Datatables this implementation is using the in ES6 introduced classes.
Additionally JSTable includes the possibility for server side rendering, which is inspired by jQuery datatables.

You can get more information about the usage on https://jstable.github.io/.

Install

Clone the github repository
Include the stylesheet and JavaScript files from the dist folder:

If the target browser does not support not all ES2015+ features you need to include the es5 version:

If the target browser does not support fetch you need to include the following polyfills:

Initialize

The HTML table needs a thead and tbody section.

Example table

Name Country Date Number Norman Small Tokelau 2020-02-01 07:22:40 8243 ... ">


            ...
    
    
        
            Name
            Country
            Date
            Number
        
    
    
        
            Norman Small
            Tokelau
            2020-02-01 07:22:40
            8243

Name	Country	Date	Number
Norman Small	Tokelau	2020-02-01 07:22:40	8243

JavaScript

The JSTable can be initialized by passing a reference or a CSS3 selector as string:

let myTable = new JSTable("#basic");

let table = document.getElementById('basic');
let myTable = new JSTable(table);

Options can be passed as second argument:

let myTable = new JSTable("#basic", {
    sortable: true,
    searchable: false,
    ...
});

Comments

Server Response Auto load
Hy,

After loading the page, my spreadsheet is empty, but when I perform an operation (scrolling, searching) I get a server response. How can I make the server response run automatically after the page loads? Maybe an idea? Or a sample code?

My source code and structure:

datalist.php =>Data from the database

"deferLoading" Is this parameter required?

index.php

<table id="recordlist" width="100%"> <thead> <tr> <th>Name</th> <th>Status</th> <th style="width:10%;">Modify</th> <th style="width:10%;">Delete</th> </tr> </thead> <tbody></tbody> </table> let table = new JSTable("#recordlist", { serverSide : true, addQueryParams: false, deferLoading: 5, ajax : "datalist.php" });
opened by Fzoltan87 14
API question

Hi Trekky In JSTable, is there a hook I can use to default load the table at a page that is not the first page? I was hoping to find something like the page(n) function in dataTables (https://datatables.net/reference/api/page()).

opened by Junglefish 12
feat: :sparkles: add custom http method request

add an feature of custom http method request (by default use GET). this will solve issue at #25.

And this already run gulp task for create dist files for prod ready.

And please add hacktoberfest label. Thank you
hacktoberfest-accepted

opened by bungambohlah 5
how to build the css and js dist

any info how to build the production minified js and css final files?

can be used firectly the js in the src directory?

the css can be build/make separately from the js?

opened by mckaygerhard 5
Alternative way to import the library

Hi, great library, would like to know if it's possible to npm install the library and import from node modules (e.g. import { JSTable } from 'jstable-psl') instead of using the cdn or cloning the library.

As through npm install it is easier to update the library version from time to time.

Thanks!

opened by nathanielongyiitak 3

Sort Breaks with mixed data

Hi,

i really appreciate your javascript.

i have a table with a column which has numbers and - the String "N/A" if i got no data. The sorting seems to "break":

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="./dist/jstable.css">
    <script type="text/javascript" src="./dist/jstable.min.js"></script>
    <script type="text/javascript" src="./dist/jstable.es5.min.js"></script>
    <script type="text/javascript" src="./dist/polyfill-fetch.min.js"></script>
</head>

<body>
    <table id="myTable">
        <thead>
            <tr class="header">
                <th>Test</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>0</td>
            </tr>
            <tr>
                <td>15</td>
            </tr>
            <tr>
                <td>N/A</td>
            </tr>
            <tr>
                <td>0</td>
            </tr>
            <tr>
                <td>7</td>
            </tr>
            <tr>
                <td>33</td>
            </tr>
            <tr>
                <td>N/A</td>
            </tr>
            <tr>
                <td>2</td>
            </tr>
            <tr>
                <td>0</td>
            </tr>
        </tbody>
    </table>
    <script>
        let myTable = new JSTable("#myTable");
    </script>
</body>

</html>

so it starts sorting, until it seems to hit a "N/A" and then start again sorting.

can this be fixed (or have i used this js wrong?)

Thanks

Best regards

opened by ebini 3

Problem with ServerSide Response (data-attributes)
I did not figure out, how jsTable works with attributes in ServerSide Data Response. Without attributes the Table works flawless. But when i add attributes, the table doesnt work. Any hints?

JS Code

let table = new JSTable('#js-table', { serverSide: true, ajax: "{% url 'tasks:json' %}", deferLoading: '{{stats.active}}', perPage: 25, ajaxParams: {}, perPageSelect: [25, 50, 100], });

Serverside Response

Dev Console
opened by mschiegg 3
change values in ajaxParams when calling update()

When I create the table using ajaxParams everything works great.

The problem is, I want to change the ajaxParams and update the table. The initial values never change.

Is there a way to do this without having to tear down and rebuild the table?

opened by yabdab 2

Select All Checkbox

Hy.

How can the selection of checkboxes for all rows be solved if the data comes from the server side?

HTML code (Select All Chekcbox):

<label class="toggle-switchy" for="allRowsSelect" data-size="lg" data-color="green">
<input id="allRowsSelect" class="selectAll" type="checkbox">
<span class="toggle"><span class="switch"></span></span>
</label>

Checkbox returned from the Server side (These values would be needed)

<label class="toggle-switchy" for="fdc4" data-size="lg" data-color="green"
<input type="checkbox" id="fdc4" value="4" class="form-del-chx" name="ch[]">
<span class="toggle"><span class="switch"></span></span>
</label>

JS code:

let table = new JSTable("#record", {
	serverSide : true,
	addQueryParams: false,
	ajax : "datalist.php"
});

let checkBoxes = document.querySelectorAll('.form-del-chx');

let selectAll = document.querySelector('.selectAll');

selectAll.addEventListener('click', SelectAllCHX);

function SelectAllCHX() {
	checkBoxes.forEach(item => {
		if(item.checked == false) {
			item.checked = true;
		} else {
			item.checked = false;
		}
	})
}

opened by Fzoltan87 2

Fix search timeout replacing input value

I originally added support for search timeout in my previous pull request. Later, I discovered that when the timeout finishes, the value of the search input gets replaced with the value as it was when the timeout started. This change fixes the problem.

opened by Sorc96 1
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.

Release notes

Sourced from decode-uri-component's releases.

v0.2.2

Prevent overwriting previously decoded tokens 980e0bf

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1

Switch to GitHub workflows 76abc93

Fix issue where decode throws - fixes #6 746ca5d

Update license (#1) 486d7e2

Tidelift tasks a650457

Meta tweaks 66e1c28

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

Commits

a0eea46 0.2.2

980e0bf Prevent overwriting previously decoded tokens

3c8a373 0.2.1

76abc93 Switch to GitHub workflows

746ca5d Fix issue where decode throws - fixes #6

486d7e2 Update license (#1)

a650457 Tidelift tasks

66e1c28 Meta tweaks

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
How to fetch data from json local file

Please guide me how to use this framework and add a function where instead of using server processing, source data as json local file instead using fetch method without the server processing. thanks

opened by Skyrione 0
dt-info not updating

Hello, I am saw this tutorial which uses JSTable https://www.youtube.com/watch?v=IUTxTiIUm68&t=423s&ab_channel=Webslesson. The problem is that whenever I add a data the "Showing {start} to {end} of {rows} entries" does not update unless the website is reloaded.

opened by alphanumericIsNotAvailable 1
Sort values descending, nulls last

Hi there!

At the moment the default of this script is sort the values in ascending order with nulls last. But when I try to sort the values in descending order, the nulls values appear on the top. Is there a way to move the null values to the bottom (and also keeping nulls last when sorting in ascending order)?

It should be around lines 492-518 in jstable.js, but it's hard to understand what's happening there exactly.

Thanks!
enhancement help wanted good first issue

opened by hv92 1

Releases(v1.6.5)

v1.6.5(Jan 4, 2023)
What's Changed

Fix search timeout replacing input value by @Sorc96 in https://github.com/jstable/JSTable/pull/39

Extend url query params with perPage and sorting by @jan-vitek in https://github.com/jstable/JSTable/pull/40

New Contributors

@jan-vitek made their first contribution in https://github.com/jstable/JSTable/pull/40

Full Changelog: https://github.com/jstable/JSTable/compare/v1.6.3...v1.6.5
Source code(tar.gz)
Source code(zip)
v1.6.3(Oct 15, 2022)
Fix sorting (v1.6.2)

Custom http method thanks to @bungambohlah with PR #31

Source code(tar.gz)
Source code(zip)
v1.6.1(Sep 2, 2022)

This release adds the possibility to add a search delay, thanks to @Sorc96 with PR #28, closes #27
Source code(tar.gz)
Source code(zip)
v1.6.0(Jun 25, 2022)

Add possibility to load initial page from server when using server side
Source code(tar.gz)
Source code(zip)
v1.5.1(Feb 9, 2022)

Fix sorting of mixed data (#17)
Source code(tar.gz)
Source code(zip)
v1.5(Jan 16, 2022)

Add possibility to define table row data with server side rendering.
Source code(tar.gz)
Source code(zip)
v1.4(Jan 9, 2022)
This release adds improvements on table row and cell attributes

parse table row attributes

add callback (rowAttributesCreator) to set table attributes based on cells

add possibility to set table cell attributes from server side rendering

Source code(tar.gz)
Source code(zip)
v1.3(Dec 5, 2021)
Project is moved to a organization and a github page is used for the documentation.

What's Changed

Some improvements with overriding configuration fields

Add url parameters on paginate and search

Parse url parameters for pagination and search

Improve browser compatibility

When a missing column is defined in the config no error is thrown and the column is ignored

Source code(tar.gz)
Source code(zip)
v1.2(May 15, 2021)

Update dependencies and change how table cells are rendered
Source code(tar.gz)
Source code(zip)
v1.1(Jun 9, 2020)

The JSTable should now be compatible with nearly all browsers.
Source code(tar.gz)
Source code(zip)
v1.0(Apr 22, 2019)

This is the initial release of the JavaScript Table Wrapper "JSTable"
Source code(tar.gz)
Source code(zip)

The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

Related tags

Overview

JSTable

Install

Initialize

Example table

JavaScript

Comments

index.php

v0.2.2

v0.2.1

Releases(v1.6.5)

v1.6.5(Jan 4, 2023)

What's Changed

New Contributors

v1.6.3(Oct 15, 2022)

v1.6.1(Sep 2, 2022)

v1.6.0(Jun 25, 2022)

v1.5.1(Feb 9, 2022)

v1.5(Jan 16, 2022)

v1.4(Jan 9, 2022)

v1.3(Dec 5, 2021)

What's Changed

v1.2(May 15, 2021)

v1.1(Jun 9, 2020)

v1.0(Apr 22, 2019)

Owner

✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

Another table select prompt plugin of inquirer.js, with powerful table render and filters.

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

DateTimePickerComponent is a very lightweight and dependency-free web component written in pure JavaScript

This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different currencies and formattings.

EggyJS is a Javascript micro Library for simple, lightweight toast popups focused on being dependency-less, lightweight, quick and efficient.

Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card.

A JavaScript module that shortens your code, makes life easier, and makes development faster!

Yunisdev-table2csv - Lightweight library to convert HTML table to CSV file

A Virtual Interactive Keyboard which replicates every key you press and a Text-Area in which everything is written and can be copied to the clipboard with a click of a button.

A Browser extension that not only makes your browsing experience safe but makes it optimized

curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

A dependency-free JavaScript library for creating discreet pop-up notifications.

Jaxit is an easy-to-use library that makes an interactive terminal for your programs.

Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.

DOM ViewModel - A thin, fast, dependency-free vdom view layer

Small, typed, dependency free tool to round corners of 2d-polygon provided by an array of { x, y } points.

A low-feature, dependency-free and performant test runner inspired by Rust and Deno