Vanilla-DataTables

A lightweight, dependency-free javascript HTML table plugin

Github stars Tracking Chart

Vanilla-DataTables

Build Status npm version license Average time to resolve an issue Percentage of issues still open


Due to time constraints this repo is no longer maintained. Please use the official fork over at fiduswriter/Simple-DataTables


A lightweight, extendable, dependency-free javascript HTML table plugin. Similar to jQuery DataTables, but without the dependencies.

Features

  • Sortable columns
  • Pagination
  • Searchable
  • Customisable layout
  • Customisable labels
  • Customise column rendering
  • Load data via AJAX requests
  • Export to common formats like csv, txt json, and sql
  • Import csv and json data
  • Control column visibility
  • Reorder or swap columns
  • moment.js integration for sorting columns with datetime strings
  • Extentable with custom plugins See the wiki (v1.6.0 and above)

Documentation, Latest Version


Demos


Install

Bower

bower install vanilla-datatables --save

npm

npm install vanilla-datatables --save

Browser

Grab the files from one of the CDNs and include them in your page:

<link href="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>

//or

<link href="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>

You can replace latest with the required release number.

CDNs courtesy of unpkg and jsDelivr


Quick Start

Then just initialise the plugin by either passing a reference to the table or a CSS3 selector string as the first parameter:

var myTable = document.querySelector("#myTable");
var dataTable = new DataTable(myTable);

// or

var dataTable = new DataTable("#myTable");

You can also pass the options object as the second paramater:

var dataTable = new DataTable("#myTable", {
	searchable: false,
	fixedHeight: true,
	...
});

Don't forget to check the wiki out for further help.


If this project helps you then you can grab me a coffee or beer to say thanks.

paypal


Copyright © 2017 Karl Saunders, MIT license

Main metrics

Overview
Name With OwnerMobius1/Vanilla-DataTables
Primary LanguageJavaScript
Program languageCSS (Language Count: 3)
Platform
License:MIT License
所有者活动
Created At2016-04-19 14:44:20
Pushed At2020-12-27 20:02:34
Last Commit At2018-09-25 08:04:26
Release Count66
Last Release Name1.6.13 (Posted on )
First Release Name0.1.0 (Posted on )
用户参与
Stargazers Count369
Watchers Count14
Fork Count78
Commits Count379
Has Issues Enabled
Issues Count0
Issue Open Count0
Pull Requests Count8
Pull Requests Open Count7
Pull Requests Close Count2
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private