430d7cfe48
As datatable renders only some rows at a time and sets each cell's html property based on that rendering, so when someone filters things and only looks at some rows without scrolling the whole grid and tries to filter things (when there is a custom cell formatter), they won't be able to see the data as the filtering is done based on cell's content not html (as it's not set at that point)
Frappe DataTable
A modern datatable library for the web
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
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:
sortablejsis 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.htmllocated in the root folder, and start development. - Run
yarn lintbefore committing changes - This project uses commitizen for conventional commit messages, use
yarn commitcommand instead ofgit commit
Read the blog
Making a new datatable for the web