JSPM

  • Created
  • Published
  • Downloads 24894
  • Score
    100M100P100Q153259F
  • License MIT

A modern datatable library for the web

Package Exports

  • frappe-datatable
  • frappe-datatable/dist/frappe-datatable.cjs.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (frappe-datatable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Frappe DataTable

A modern datatable library for the web

Test and Release npm version MIT License npm bundle size (minified + gzip) semantic-release

Introduction

Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. Originally built for 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

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

yarn add frappe-datatable
# or
npm install frappe-datatable

Note: sortablejs is required to be installed as well.

Usage

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 for conventional commit messages, use yarn commit command instead of git commit

Read the blog

Making a new datatable for the web

License

MIT