Skip to content

Commit 9193fd9

Browse files
Update README.md (#201)
1 parent ecc660e commit 9193fd9

File tree

1 file changed

+29
-44
lines changed

1 file changed

+29
-44
lines changed

README.md

+29-44
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,34 @@
1-
<div align="center">
2-
<img src="https://github.com/frappe/design/raw/master/logos/logo-2019/frappe-datatable-logo.png" height="128">
3-
<h2>Frappe DataTable</h2>
4-
<p align="center">
5-
<p>
6-
A modern datatable library for the web
7-
</p>
1+
<div align="center" markdown="1">
2+
3+
<img width="80" alt="datatable-logo" src="https://github.com/user-attachments/assets/8235f4b9-993a-4329-97de-9431dcf63aae" >
4+
5+
<h1>Frappe DataTable</h1>
6+
7+
**A modern datatable library for the web**
88

99
[![Test and Release](https://github.com/frappe/datatable/workflows/Test%20and%20Release/badge.svg)](https://github.com/frappe/datatable/actions?query=workflow%3A%22Test+and+Release%22)
1010
[![npm version](https://badge.fury.io/js/frappe-datatable.svg)](https://badge.fury.io/js/frappe-datatable)
11-
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
1211
![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/frappe-datatable.svg)
13-
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
1412

1513

14+
![datatable-demo-2](https://user-images.githubusercontent.com/9355208/40740030-5412aa40-6465-11e8-8542-b0247ab1daac.gif)
15+
1616
</div>
1717

18-
## Introduction
18+
## Frappe Datatable
1919

2020
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.
2121

22-
## Demo
23-
24-
![datatable-demo-2](https://user-images.githubusercontent.com/9355208/40740030-5412aa40-6465-11e8-8542-b0247ab1daac.gif)
22+
### Motivation
2523

26-
## Features
24+
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.
2725

28-
### Cell Features
2926

30-
* Custom Formatters
31-
* Inline Editing
32-
* Mouse Selection
33-
* Copy Cells
34-
* Keyboard Navigation
35-
* Custom Cell Editor
27+
### Key Features
3628

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.
5332

5433
## Install
5534

@@ -73,18 +52,24 @@ const datatable = new DataTable('#datatable', {
7352
});
7453
```
7554

76-
## Contribution
55+
## Development Setup
7756

7857
* `yarn start` - Start dev server
7958
* Open `index.html` located in the root folder, and start development.
8059
* Run `yarn lint` before committing changes
8160
* This project uses [commitizen](https://github.com/commitizen/cz-cli) for conventional commit messages, use `yarn commit` command instead of `git commit`
8261

83-
## Read the blog
62+
## Links
8463

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)
8665

87-
88-
## License
89-
90-
[MIT](http://opensource.org/licenses/MIT)
66+
<br>
67+
<br>
68+
<div align="center" style="padding-top: 0.75rem;">
69+
<a href="https://frappe.io" target="_blank">
70+
<picture>
71+
<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
72+
<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
73+
</picture>
74+
</a>
75+
</div>

0 commit comments

Comments
 (0)