JavaScript Grid

Open-source JavaScript projects categorized as Grid | Edit details

Top 21 JavaScript Grid Projects

  • GitHub repo SheetJS js-xlsx

    :green_book: SheetJS Community Edition -- Spreadsheet Data Toolkit

    Project mention: Tips for Making a Popular Open-Source Project in 2021 [Ultimate Guide] | | 2021-11-12

    Maybe a story from a maintainer would help. To contextualize, the main SheetJS open source project 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

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

  • GitHub repo react-virtualized

    React components for efficiently rendering large lists and tabular data

    Project mention: Big list performance with React | | 2021-11-26

    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.

  • GitHub repo react-table

    ⚛️ Hooks for building fast and extendable tables and datagrids for React

    Project mention: What table component library you prefer to use with React? | | 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.

  • GitHub repo react-grid-layout

    A draggable and resizable grid layout with responsive breakpoints, for React.

    Project mention: Simplest Drag and Drop setup in React, in 10 lines of code with SortableJS | | 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.

  • GitHub repo 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 | | 2021-12-06

    I used

  • GitHub repo rebass

    :atom_symbol: React primitive UI components built with styled-system.

    Project mention: [Gatsby] - This was my first Gatsby project | | 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

  • GitHub repo vue-grid-layout

    A draggable and resizable grid layout, for Vue.js.

    Project mention: A draggable grid in Vue | | 2021-05-28

    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

  • Nanos

    Run Linux Software Faster and Safer than Linux with Unikernels.

  • GitHub repo react-datasheet

    Excel-like data grid (table) component for React

    Project mention: Overview of Commercial and Open-Source UI Components for React | | 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

  • GitHub repo Tabulator

    Interactive Tables and Data Grids for JavaScript

    Project mention: KVision 5.6.0 is released | | 2021-11-29

    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 and Chart.js 3 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).

  • GitHub repo Magic-Grid

    A simple, lightweight Javascript library for dynamic grid layouts.

    Project mention: 18 amazing 🤩 GitHub repositories that will help you 🪄 make a beautiful project | | 2021-09-03

    View on GitHub

  • GitHub repo Griddle

    Simple Grid Component written in React (by GriddleGriddle)

  • GitHub repo primereact

    The Most Complete React UI Component Library

    Project mention: What UI library are you guys using these days? | | 2021-10-29

    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.

  • GitHub repo react-bootstrap-table2

    Next Generation of react-bootstrap-table

    Project mention: Alternative to react-bootstrap-table-next | | 2021-09-25

    Whoa, I use this, had no idea it's abandoned now. Somebody should fork it.

  • GitHub repo react-native-super-grid

    Responsive Grid View for React Native

    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 | | 2021-06-07
  • GitHub repo Frappe Datatable

    A simple, modern and interactive datatable library for the web (by frappe)

  • GitHub repo react-grid-system

    A powerful Bootstrap-like responsive grid system for React.

    Project mention: 5 Underrated React Libraries ⚛️ | | 2021-07-02

    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:-

  • GitHub repo FancyGrid

    FancyGrid - JavaScript grid library with charts integration and server communication.

  • GitHub repo gigatables-react

    GigaTables is a ReactJS plug-in to help web-developers process table-data in applications and CMS, CRM, ERP or similar systems.

  • GitHub repo 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. | | 2021-07-30
  • GitHub repo af-virtual-scroll

    React components for rendering large scrollable data

  • GitHub repo folo

    📋 Form & Layout JS Components

    Project mention: Show HN: React CSS Grid Components, Implementing What's Missing from CSS Grid | | 2021-01-13
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-12-06.

JavaScript Grid related posts


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
Find remote jobs at our new job board There are 31 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives