You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[](https://github.com/frappe/datatable/actions?query=workflow%3A%22Test+and+Release%22)
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, unlike most data grids out there.
I was trying to remove all legacy UI components from the [frappe](https://github.com/frappe/frappe) codebase. We were using [SlickGrid](https://github.com/mleibman/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.
27
25
28
-
### Cell Features
29
26
30
-
* Custom Formatters
31
-
* Inline Editing
32
-
* Mouse Selection
33
-
* Copy Cells
34
-
* Keyboard Navigation
35
-
* Custom Cell Editor
27
+
### Key Features
36
28
37
-
### Column Features
38
-
39
-
* Reorder Columns
40
-
* Sort by Column
41
-
* Remove / Hide Column
42
-
* Custom Actions
43
-
* Resize Column
44
-
* Flexible Layout
45
-
46
-
### Row Features
47
-
48
-
* Row Selection
49
-
* Tree Structured Rows
50
-
* Inline Filters
51
-
* Large Number of Rows
52
-
* Dynamic Row Height
29
+
-**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.
30
+
-**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.
31
+
-**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.
53
32
54
33
## Install
55
34
@@ -73,18 +52,24 @@ const datatable = new DataTable('#datatable', {
73
52
});
74
53
```
75
54
76
-
## Contribution
55
+
## Development Setup
77
56
78
57
*`yarn start` - Start dev server
79
58
* Open `index.html` located in the root folder, and start development.
80
59
* Run `yarn lint` before committing changes
81
60
* This project uses [commitizen](https://github.com/commitizen/cz-cli) for conventional commit messages, use `yarn commit` command instead of `git commit`
82
61
83
-
## Read the blog
62
+
## Links
84
63
85
-
[Making a new datatable for the web](https://medium.com/frapp%C3%A9-thoughts/things-i-learned-building-a-library-for-the-web-6846a588bf53)
64
+
-[Making a new datatable for the web](https://medium.com/frapp%C3%A9-thoughts/things-i-learned-building-a-library-for-the-web-6846a588bf53)
0 commit comments