Top 21 JavaScript Grid Projects
-
Project mention: Tips for Making a Popular Open-Source Project in 2021 [Ultimate Guide] | news.ycombinator.com | 2021-11-12
Maybe a story from a maintainer would help. To contextualize, the main SheetJS open source project https://github.com/SheetJS/sheetjs has over 28K stars.
tl;dr: the project involves "crowdsourced research" which benefits from popularity.
The main social goal with the project is data preservation and integrity. Large-scale economic and political decisions are made from data and analyses in spreadsheets. For example, last year in the UK, COVID cases were underreported thanks to Excel minutiae https://www.bbc.com/news/technology-54423988
Due to various corporate stratagems, the older data representations were intentionally obfuscated. To support Excel, many developers poked around at Excel files and guessed at the structures.
In this environment, the biggest challenge is finding worksheets with random corner cases. These types of files are not easy to create and fuzzing has limited effectiveness. This is where open source and popularity come into play. The open source and JS nature of the project helps reduce testing friction (https://oss.sheetjs.com/ runs in the web browser, no need to install anything) and encourage bug reports with test cases.
There will always be "entitled users" and "low quality bug reports" but that comes with the territory. There are also meaningful issues and code contributions. Efforts at trying to prevent the low quality contributions also discourage higher quality contributions.
-
Since this is apparently a popular question and things have progressed since the original question was asked, while I do encourage you to watch the video linked above, in order to get a grasp of a virtual layout, I also encourage you to use the React Virtualized library if you do not want to re-invent the wheel.
-
Scout APM
Scout APM: A developer's best friend. Try free for 14-days. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
Project mention: What table component library you prefer to use with React? | reddit.com/r/reactjs | 2021-11-26
check out react-table it is simple-ish. in a sense that it handles most of the logic, but you have to implement the UI.
-
Project mention: Simplest Drag and Drop setup in React, in 10 lines of code with SortableJS | dev.to | 2021-11-27
React Grid Layout: quite easy to setup, and quite powerful also. But I wanted to be able to move items in a grid so that it takes the position of another item in the grid and the grid keeps the same shape at the end of the drag/drop action - the defauilt behavior of this lib being to "make space" for the dragged item and break the grid layout. After spending one hour on it, I still couldn't find the way to achieve my goal, I quit.
-
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Project mention: GLADOS = Generic Life Activity Data Organization System | reddit.com/r/webdev | 2021-12-06I used https://github.com/clauderic/react-sortable-hoc
-
Project mention: [Gatsby] - This was my first Gatsby project | reddit.com/r/reviewmycode | 2021-11-15
There's absolutely nothing wrong with using CSS mixed with your components, but I would suggest (if you haven't already) looking into some alternatives, such as styled-components or Rebass. Not because one is "better" than the other, but it's something to add to your arsenal
-
Is there some sort of implementation or library to do this? The best one i found is vue-grid-layout but i had troubles customizing it and working with responsiveness. Any advice is appreciated
-
-
Project mention: Overview of Commercial and Open-Source UI Components for React | dev.to | 2021-07-01
React-datasheet is a highly customizable React UI component that serves for generating Excel-like spreadsheets on a web page. It allows performing basic cell operations (select, cut, copy, paste) and using keyboard navigation by default. You can add more advanced capabilities, extra cell attributes, your own editors, or new behaviors with the help of custom renderers. It is important to mention that React-datasheet does not support math calculations and validation. For this purpose, you’ll have to integrate some math libraries (such as mathjs). Useful resources: GitHub repository Package size: 116 kB License: MIT
-
Both kvision-tabulator and kvision-chart modules are now based on new major versions of Tabulator Tables and Chart.js. Both modules contain breaking changes. Please take a look at the migration guides for Tabulator 5 http://tabulator.info/docs/5.0/upgrade and Chart.js 3 https://www.chartjs.org/docs/latest/getting-started/v3-migration.html. Unfortunately both are quite huge documents. If you still want to use old versions, just change KVision dependencies - the old modules are published with new names: kvision-tabulator4, kvision-tabulator4-remote and kvision-chart2. The old components are deprecated but there are no plans to remove them (at least not before KVision 6).
-
Project mention: 18 amazing 🤩 GitHub repositories that will help you 🪄 make a beautiful project | dev.to | 2021-09-03
View on GitHub
-
-
I had used Material UI once. I’ve been exploring PrimeReact, the ultimate collection of design-agnostic, flexible and accessible React UI Components, and PrimeFlex, a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.
-
Whoa, I use this, had no idea it's abandoned now. Somebody should fork it.
-
Project mention: How to create gridview of components like this in react Native without use of libraries? My data is dynamic and comes from server so I can't hardcode flexbox values | reddit.com/r/reactnative | 2021-06-07
-
-
5. React Grid System A powerful Bootstrap-like responsive grid system for React. react-grid-system provides a responsive grid for React inspired by Bootstrap. Moreover, it has various additional powerful features, such as setting breakpoints and gutter widths through React's context. Three components are provided for creating responsive grids: Container, Row, and Col. Homepage GitHub Usage:- Installation:- npm install react-grid-system --save An example on how to use these:-
-
-
gigatables-react
GigaTables is a ReactJS plug-in to help web-developers process table-data in applications and CMS, CRM, ERP or similar systems.
-
LimberGridView
LimberGridView, a powerful JavaScript Library using Computational Geometry to render movable, dynamically resizable, and auto-arranging grids. Written in vanilla JavaScript, it can be plugged into most frameworks, plus it has a plugin for React applications. It gives users the most optimal arrangements using its highly efficient and fine-tuned algorithm.
Project mention: LimberGridView - Flexible grids for your web application. | reddit.com/r/Frontend | 2021-07-30 -
-
Project mention: Show HN: React CSS Grid Components, Implementing What's Missing from CSS Grid | news.ycombinator.com | 2021-01-13
JavaScript Grid related posts
- 5 open source JavaScript datagrids for your next project
- Alternative to react-bootstrap-table-next
- LimberGridView - Flexible grids for your web application.
- LimberGridView - Flexible grids for your web application.
- How can I add a trend section to my table?
- I have a web application in which I want to give users an easy interface to modify large data in tables (100 mill+) The users are non tech and need easy interface. I have come across some tools (in description), but are too complex to use or cannot be embedded. Any frameworks to recommend?
- Vue-table-2: How to get the firs row data (server-data)?
Index
What are some of the best open-source Grid projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | SheetJS js-xlsx | 28,334 |
| 2 | react-virtualized | 22,892 |
| 3 | react-table | 15,661 |
| 4 | react-grid-layout | 14,683 |
| 5 | react-sortable-hoc | 9,726 |
| 6 | rebass | 7,553 |
| 7 | vue-grid-layout | 5,156 |
| 8 | react-datasheet | 4,856 |
| 9 | Tabulator | 4,317 |
| 10 | Magic-Grid | 2,816 |
| 11 | Griddle | 2,492 |
| 12 | primereact | 2,376 |
| 13 | react-bootstrap-table2 | 1,157 |
| 14 | react-native-super-grid | 1,082 |
| 15 | Frappe Datatable | 710 |
| 16 | react-grid-system | 687 |
| 17 | FancyGrid | 180 |
| 18 | gigatables-react | 120 |
| 19 | LimberGridView | 52 |
| 20 | af-virtual-scroll | 35 |
| 21 | folo | 27 |
Are you hiring? Post a new remote job listing for free.
