88 lines
2.6 KiB
Markdown
88 lines
2.6 KiB
Markdown
<div align="center">
|
|
<img src="https://github.com/frappe/design/blob/master/logos/data-table-logo.svg" height="128">
|
|
<h2>Frappe DataTable</h2>
|
|
<p align="center">
|
|
<p>
|
|
A modern datatable library for the web
|
|
</p>
|
|
|
|
[](https://travis-ci.org/frappe/datatable)
|
|
[](https://badge.fury.io/js/frappe-datatable)
|
|
[](http://opensource.org/licenses/MIT)
|
|
|
|
[](https://github.com/semantic-release/semantic-release)
|
|
|
|
|
|
</div>
|
|
|
|
## 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, like most data grids out there.
|
|
|
|
## Demo
|
|
|
|
|
|
|
|
## 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) and [`clusterize.js`](https://github.com/NeXTs/Clusterize.js) are 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 commiting changes
|
|
* This project uses [commitizen](https://github.com/commitizen/cz-cli) for conventional commit messages, use `yarn commit` command instead of `git commit`
|
|
|
|
|
|
|
|
## License
|
|
|
|
[MIT](http://opensource.org/licenses/MIT)
|