# simple-datatables-classic

> A lightweight, dependency-free JavaScript HTML table plugin.

Latest version **2.1.14** (published 2021-01-14) · LGPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install simple-datatables-classic
pnpm add simple-datatables-classic
yarn add simple-datatables-classic
bun add simple-datatables-classic
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.14 |
| Published | 2021-01-14 |
| First published | 2021-01-14 |
| Weekly downloads | 0 |
| License | LGPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Johannes Wilm |
| Maintainers | johanneswilm |
| Keywords | DataTable, DataTables, table, html table, filter, sort |

## Links

- npm: https://www.npmjs.com/package/simple-datatables-classic
- Repository: https://github.com/fiduswriter/Simple-DataTables-classic
- Homepage: https://github.com/fiduswriter/Simple-DataTables-classic#readme
- Issues: https://github.com/fiduswriter/Simple-DataTables-classic/issues
- npm.io page: https://npm.io/package/simple-datatables-classic

## Dependencies (1)

- [dayjs](https://npm.io/package/dayjs.md) ^1.8.28

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.1.14 (latest) — 2021-01-14
- 2.1.13 — 2021-01-14

## README

# Simple-DataTables-classic

A lightweight, extendable, dependency-free javascript HTML table plugin that also works in **older browsers**. Similar to jQuery DataTables, but without the jQuery dependency. See [Simple-DataTables](https://github.com/fiduswriter/Simple-DataTables) for a version that uses up-to-date technology and only targets current browsers.

Based on [Vanilla-DataTables](https://github.com/Mobius1/Vanilla-DataTables), but written in ES2018.

See the demos [here](https://fiduswriter.github.io/Simple-DataTables-classic/).

# CDN

To use the CDN version of Simple-DataTables use either [https://cdn.jsdelivr.net/npm/simple-datatables-classic@latest](https://cdn.jsdelivr.net/npm/simple-datatables-classic@latest) or [https://unpkg.com/simple-datatables-classic](https://unpkg.com/simple-datatables-classic). You also need to add the CSS styling, so the elements you'll add to html head element can for example be these:

```html
<link href="https://cdn.jsdelivr.net/npm/simple-datatables-classic@latest/dist/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/simple-datatables-classic@latest" type="text/javascript"></script>
```



### License

LGPL

### 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
* dayjs integration for sorting columns with datetime strings
* Extentable with custom plugins [See the Simple-DataTables-classic wiki](https://github.com/fiduswriter/Simple-DataTables-classic/wiki/Plugins)


[Simple-DataTables-classic Documentation](https://github.com/fiduswriter/Simple-DataTables-classic/wiki)


---

### Install

## npm
```
npm install simple-datatables-classic --save
```

---

### Quick Start

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

```javascript
import {DataTable} from "simple-datatables-classic"

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

// or

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

```

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

```javascript
import {DataTable} from "simple-datatables-classic"

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

If using the CDN:

```javascript
const dataTable = new simpleDatatables.DataTable("#myTable", {
	searchable: false,
	fixedHeight: true,
	...
})
```

---
_Source: https://npm.io/package/simple-datatables-classic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._