# simple-datatables

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

Latest version **10.3.0** (published 2026-07-30) · LGPL-3.0 license · 0 weekly downloads

## Install

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

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 10.3.0 |
| Published | 2026-07-30 |
| First published | 2018-08-17 |
| Weekly downloads | 0 |
| License | LGPL-3.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1610 |
| Author | Johannes Wilm |
| Maintainers | johanneswilm |
| Keywords | DataTable, DataTables, table, html table, filter, sort |

## Links

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

## Dependencies (2)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.21
- [diff-dom](https://npm.io/package/diff-dom.md) 5.2.1

## 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

- 10.3.0 (latest) — 2026-07-30
- 10.2.1 — 2026-07-30
- 10.2.0 — 2025-10-04
- 10.1.0 — 2025-10-02
- 10.0.0 — 2025-02-09
- 9.2.2 — 2025-02-02
- 9.2.1 — 2024-10-09
- 9.2.0 — 2024-10-08
- 9.1.0 — 2024-08-21
- 9.0.4 — 2024-06-27
- 9.0.3 — 2024-04-11
- 9.0.2 — 2024-04-10
- 9.0.1 — 2024-04-10
- 9.0.0 — 2023-11-28
- 8.0.1 — 2023-11-17
- … 88 more at https://npm.io/package/simple-datatables/versions

## README

# simple-datatables

A lightweight, extendable, JavaScript HTML table library written in TypeScript and transpilled to Vanilla JavaScript. Similar to jQuery DataTables **for use in modern browsers**, but without the jQuery dependency.

## Examples / Demos

See the demos [here](https://fiduswriter.github.io/simple-datatables/demos/) and the documentation [here](https://fiduswriter.github.io/simple-datatables/documentation/).

### Upgrading

For upgrading from one major version to another, check the upgrade guide:
https://fiduswriter.github.io/simple-datatables/documentation/Upgrading

**Note**: The upgrade from version 5 version 6 is the most complicated upgrade so far. Please read through the instructions before filing complaints. If you run simple-datatables from a CDN, make sure that you have fixed it to a specific major or minor version so that you do not accidentally upload to a new version that requires you to do lots of manual adjustments.


# CDN

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

**Note:** For production websites, specify a specific major version. For example [https://cdn.jsdelivr.net/npm/simple-datatables@6](https://cdn.jsdelivr.net/npm/simple-datatables@6) for the latest version in the 6.x.x series or [https://cdn.jsdelivr.net/npm/simple-datatables@6.0](https://cdn.jsdelivr.net/npm/simple-datatables@6.0) for the latest version in the 6.0.x series.

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

LGPL

### Features

* Sortable/filterable columns
* Pagination
* Searchable
* Customisable layout
* Customisable labels
* Customise column rendering
* 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
* Using [diffDOM](https://github.com/fiduswriter/diffDOM) for faster DOM updates.


[simple-datatables Documentation](https://fiduswriter.github.io/simple-datatables/documentation)


### History

This project started as a fork of [Vanilla-DataTables](https://github.com/Mobius1/Vanilla-DataTables), but it has since been converted to TypeScript.

If you want a version that works in very old browsers (IE, etc.), then head over to https://github.com/fiduswriter/simple-datatables-classic .


---


### Install

## npm
```
npm install simple-datatables --save
```
## Yarn
```
yarn add simple-datatables
```

---

### 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"

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 parameter:

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

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

If using the CDN:

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

---

## How to contribute?

1. Fork the repository
2. Create a sub-branch
3. Clone the sub-branch to your local system
4. Install [NodeJS](https://nodejs.org/en)
5. Open the project in a code editor (for example [Visual Studio Code](https://code.visualstudio.com/) or [Pulsar Edit](https://pulsar-edit.dev/))
6. Open the Terminal
7. Run `npm install` in the Terminal
8. Start making changes and contributing to the project 🙂
9. You can run `npm run test_server` to test your code. This runs on port 3000 (http://localhost:3000/)
10. You can also run `npm run build` in the Terminal to build the final files
11. Once finished, then commit/push your code and create a Pull Request on GitHub for the changes

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