Update README.md (#32)

This commit is contained in:
Faris Ansari 2018-05-31 00:16:16 +05:30 committed by GitHub
parent c95fa505dd
commit 96a9235a12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -10,36 +10,73 @@
[![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)
</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
![datatable-demo-2](https://user-images.githubusercontent.com/9355208/40740030-5412aa40-6465-11e8-8542-b0247ab1daac.gif)
## Features
* Resizable columns
* Sorting
* Custom formatted data
* In place editing
* Efficient rendering of large data
### 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
var grid = new DataTable(document.querySelector('#data-table'), {
data: {
columns: [ 'Sr No.', 'First Name', 'Last Name' ],
rows: [
[ '1', 'Don', 'Joe' ],
[ '2', 'Mary', 'Jane' ]
]
}
const datatable = new DataTable('#datatable', {
columns: [ 'First Name', 'Last Name', 'Position' ],
data: [
[ 'Don', 'Joe', 'Designer' ],
[ 'Mary', 'Jane', 'Software Developer' ]
]
});
```
## Contribute
## Contribution
* `yarn start` - Start dev server
Now you can open the `index.html` located in the root folder, and start development. Make sure to fix all eslint errors before making a Pull Request.
* `yarn start` - Start rollup watch
* `yarn build` - Build js/css bundles
## License
MIT
[MIT](http://opensource.org/licenses/MIT)