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

npm bundle size (minified + gzip)

datatable-demo-2

Frappe Datatable

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.

Motivation

I was trying to remove all legacy UI components from the frappe codebase. We were using SlickGrid for rendering tables. It was unmaintained and UI was dated. Other datatable solutions either didn't have the features we needed or were closed source. So we built our own.

Key Features

Cell: Enable editing within individual cells and features like custom formatters, inline editing, and mouse selection. Users can easily copy cell content, navigate through cells using the keyboard, and take advantage of a custom cell editor for advanced functionality.
Column: Columns are highly flexible, allowing users to reorder, resize, and sort them with ease. Additional features include hiding/removing columns and adding custom actions.
Row: Rows support advanced interactions, including row selection, tree-structured organization, and inline filters for precise control. They handle large datasets efficiently with dynamic row heights.

Usage

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

Note: sortablejs is required to be installed as well.

const datatable = new DataTable('#datatable', {
  columns: [ 'First Name', 'Last Name', 'Position' ],
  data: [
    [ 'Don', 'Joe', 'Designer' ],
    [ 'Mary', 'Jane', 'Software Developer' ]
  ]
});

Development Setup

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

frappe-datatable