Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/frappe/datatable

The Missing Javascript Datatable for the Web
https://github.com/frappe/datatable

datagrid datatable datatables-library editable-grid editable-table grid interactive modern simple table

Last synced: about 1 month ago
JSON representation

The Missing Javascript Datatable for the Web

Host: GitHub
URL: https://github.com/frappe/datatable
Owner: frappe
License: mit
Created: 2017-10-07T14:58:02.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-03-13T12:13:17.000Z (3 months ago)
Last Synced: 2024-04-14T03:05:54.525Z (about 2 months ago)
Topics: datagrid, datatable, datatables-library, editable-grid, editable-table, grid, interactive, modern, simple, table
Language: JavaScript
Homepage: https://frappe.io/datatable
Size: 3.12 MB
Stars: 967
Watchers: 44
Forks: 150
Open Issues: 57
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-javascript - Frappe Datatable - Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. (Spreadsheet / Runner)
awesome-javascript-cn - Frappe Datatable
awesome-stars - frappe/datatable - The Missing Javascript Datatable for the Web (JavaScript)
awesome - frappe/datatable - The Missing Javascript Datatable for the Web (JavaScript)
awesome-javascript - Frappe Datatable - Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. (Spreadsheet / Runner)
awesome-stars - datatable
docsify-awesome-stars - frappe/datatable - The Missing Javascript Datatable for the Web (JavaScript)
best-of-react - GitHub - 64% open · ⏱️ 17.04.2024): (Data Tables & Grids)
awesome-javascript - Frappe Datatable - A simple, modern and interactive datatable library for the web ` 📝 9 months ago ` (Spreadsheet [🔝](#readme))
awesome-stars - datatable - A simple, modern and interactive datatable library for the web (JavaScript)
awesome-stars - datatable
awesome-javascript-builds-project - Frappe Datatable - Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. (Spreadsheet / Runner)
awesome-javascript - Frappe Datatable

README

        


    

    Frappe DataTable

    

    



    A modern datatable library for the web

    


[![Test and Release](https://github.com/frappe/datatable/workflows/Test%20and%20Release/badge.svg)](https://github.com/frappe/datatable/actions?query=workflow%3A%22Test+and+Release%22)

[![npm version](https://badge.fury.io/js/frappe-datatable.svg)](https://badge.fury.io/js/frappe-datatable)

[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)

![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/frappe-datatable.svg)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)



## Introduction

Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. Originally built for [ERPNext](https://github.com/frappe/erpnext), it can be used to render large amount of rows without sacrificing performance and has the basic data grid features like inline editing and keyboard navigation. It does not require jQuery, unlike most data grids out there.

## Demo

![datatable-demo-2](https://user-images.githubusercontent.com/9355208/40740030-5412aa40-6465-11e8-8542-b0247ab1daac.gif)

## Features

### Cell Features

* Custom Formatters

* Inline Editing

* Mouse Selection

* Copy Cells

* Keyboard Navigation

* Custom Cell Editor

### Column Features

* Reorder Columns

* Sort by Column

* Remove / Hide Column

* Custom Actions

* Resize Column

* Flexible Layout

### Row Features

* Row Selection

* Tree Structured Rows

* Inline Filters

* Large Number of Rows

* Dynamic Row Height

## Install

```bash

yarn add frappe-datatable

# or

npm install frappe-datatable

```

> Note: [`sortablejs`](https://github.com/RubaXa/Sortable) is required to be installed as well.

## Usage

```js

const datatable = new DataTable('#datatable', {

  columns: [ 'First Name', 'Last Name', 'Position' ],

  data: [

    [ 'Don', 'Joe', 'Designer' ],

    [ 'Mary', 'Jane', 'Software Developer' ]

  ]

});

```

## Contribution

* `yarn start` - Start dev server

* Open `index.html` located in the root folder, and start development.

* Run `yarn lint` before committing changes

* This project uses [commitizen](https://github.com/commitizen/cz-cli) for conventional commit messages, use `yarn commit` command instead of `git commit`

## Read the blog

[Making a new datatable for the web](https://medium.com/frapp%C3%A9-thoughts/things-i-learned-building-a-library-for-the-web-6846a588bf53)

## License

[MIT](http://opensource.org/licenses/MIT)