Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.
keywords
Handsontable, X-data-spreadsheet, AG-grid
background
Handsontable component was introduced into the project. During the development process, the feedback was that the packaging volume was too large and there were layout bugs. Therefore, we considered whether there were alternative components in the community.
Charging components are not included in the survey.
According to the number of Github star and NPM downloads, it is found that handsonTable, X-Data-Spreadsheet and AG-grid can meet our needs to a certain extent, but also have certain advantages and disadvantages.
Conclusion At the end, comparative analysis can be skipped.
Scheme comparison
- Volume contrast
| component | Pack size (Webpack) | gzip |
|---|---|---|
| AG-Grid | 1043 KB (large) | 222kb |
| handsontable | 402KB (medium) | 85kb |
| x-data-spreadsheet | 106 KB (small) | 32kb |
- Community recognition
| component | stars | npm weekly download |
|---|---|---|
| AG-Grid | 8.2 k. | 23073 |
| handsontable | 16.4 k. | 93974 |
| x-data-spreadsheet | 12.3 k. | 3770 |
- The UI contrast
| component | Basic style | conclusion |
|---|---|---|
| AG-Grid |  |
Unique and rich style, can meet a variety of customization |
| handsontable |  |
The basic style is simple, and the scalability is good |
| x-data-spreadsheet |  |
Very close to Excel, very close to interaction |
- Functional comparison
| component | The technical implementation | The characteristics of | function | The document |
|---|---|---|---|---|
| AG-Grid | Dom implementation | Include shortcut key operation; Suitable for complex scenes such as embedded charts, pictures and rich text | Editing, filtering, rendering and other basic functions; Highly customized table content rendering | English documents; Rich configuration items and complete documentation |
| handsontable | Implementation based on Table | Performance similar to Excel, support formula calculation, etc | Sorting, filtering and other basic functions | English document, relatively complete |
| x-data-spreadsheet | Based on the canvas | Lightweight and simple. More suitable for a simple version of the Web online form editor | Read – only/Edit mode toggle toolbar merge cell right-click menu style | Chinese documents; Not perfect, deep custom configuration need to read the source code |
- Ease of use and scalability
| component | Ease of use | scalability |
|---|---|---|
| AG-Grid | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ | Can meet the complex needs of customization |
| handsontable | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ | Can meet the complex needs of customization |
| x-data-spreadsheet | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ | Only basic configurations are available. Custom configurations need to be extended |
conclusion
| Recommended degree | |
|---|---|
| AG-Grid: Suitable for those who have high requirements for table customization and focus on display | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ |
| handsontable: Excellent overall performance, moderate volume, can meet the usual table editing requirements | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ |
| x-data-spreadsheet: Suitable for quickly build simple Web Excel needs | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ |
Handsontable is still a good choice for now, with a modest size, active community, ease of use and scalability. No obvious bugs were found.
Remark:
| When using third party components, it is recommended to use chuckSplit subcontracting and turn on gzip compression, otherwise it does create excessive bandwidth consumption. |
|---|