Convert Figma logo to code with AI

FancyGrid logoawesome-grid

A curated list of grid(table) libraries and resources that developers may find useful.

1,461
107
1,461
8
View on GitHub

Top Related Projects

ag-grid's avatar

ag-grid

12,496

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

handsontable's avatar

handsontable

19,743

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

6pac's avatar

SlickGrid

1,818

A lightning fast JavaScript grid/spreadsheet

gridstack's avatar

gridstack.js

6,536

Build interactive dashboards in minutes.

Quick Overview

FancyGrid/awesome-grid is a curated list of grid libraries and tools for various programming languages and frameworks. It serves as a comprehensive resource for developers looking for grid solutions in their projects, covering options for JavaScript, React, Angular, Vue.js, and more.

Pros

  • Extensive collection of grid libraries across multiple platforms and languages
  • Regularly updated with new and popular grid solutions
  • Includes both open-source and commercial options
  • Provides brief descriptions and links for each listed library

Cons

  • May be overwhelming for beginners due to the large number of options
  • Lacks detailed comparisons or recommendations between different grid libraries
  • Some listed libraries may become outdated or unmaintained over time
  • Does not provide code examples or implementation details for each library

Code Examples

As this is a curated list repository and not a code library itself, there are no code examples to provide.

Getting Started

As this is not a code library, there are no specific getting started instructions. However, to use this resource:

  1. Visit the GitHub repository: https://github.com/FancyGrid/awesome-grid
  2. Browse through the categorized list of grid libraries
  3. Click on the links to explore individual grid solutions that interest you
  4. Check the documentation and examples provided by each specific grid library for implementation details

Competitor Comparisons

ag-grid logo

ag-grid

12,496

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Pros of ag-grid

  • More comprehensive and feature-rich data grid solution
  • Offers both free (Community) and paid (Enterprise) versions with advanced features
  • Extensive documentation and active community support

Cons of ag-grid

  • Steeper learning curve due to its complexity
  • Larger file size and potential performance impact for simpler use cases

Code Comparison

ag-grid:

import { Grid } from 'ag-grid-community';

const gridOptions = {
  columnDefs: [/* column definitions */],
  rowData: [/* row data */]
};

new Grid(document.querySelector('#myGrid'), gridOptions);

awesome-grid:

// No direct code comparison available as awesome-grid is a curated list,
// not a grid implementation

Additional Notes

ag-grid is a full-featured data grid library, while awesome-grid is a curated list of various grid solutions. ag-grid provides a complete implementation with numerous features and customization options, making it suitable for complex enterprise applications. awesome-grid, on the other hand, serves as a resource for developers to explore different grid libraries and choose the one that best fits their needs.

ag-grid offers extensive functionality out of the box, including sorting, filtering, and cell editing. It also provides advanced features like pivoting, grouping, and Excel-like functionality in its Enterprise version. However, this comprehensive nature can make it overkill for simpler projects.

awesome-grid doesn't provide a grid implementation itself but offers a valuable collection of grid libraries and resources. This can be beneficial for developers who want to compare different options or find lightweight alternatives to ag-grid for specific use cases.

handsontable logo

handsontable

19,743

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

Pros of Handsontable

  • More comprehensive and feature-rich data grid solution
  • Extensive documentation and API reference
  • Larger community and more frequent updates

Cons of Handsontable

  • Steeper learning curve due to its complexity
  • Commercial license required for some features
  • Larger file size and potential performance impact for simpler use cases

Code Comparison

Handsontable:

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true
});

Awesome Grid (using FancyGrid as an example):

new FancyGrid({
  renderTo: 'container',
  width: 500,
  height: 300,
  data: data,
  columns: [
    {index: 'name', title: 'Name'},
    {index: 'age', title: 'Age'}
  ]
});

Handsontable offers more built-in features and configuration options out of the box, while Awesome Grid (FancyGrid) provides a simpler setup for basic grid functionality. Handsontable's code demonstrates its advanced features like filters and dropdown menus, which may require additional plugins or configuration in other grid libraries.

6pac logo

SlickGrid

1,818

A lightning fast JavaScript grid/spreadsheet

Pros of SlickGrid

  • More mature and battle-tested, with a longer development history
  • Extensive documentation and community support
  • Highly customizable with a wide range of features and plugins

Cons of SlickGrid

  • Steeper learning curve due to its complexity
  • Heavier footprint, which may impact performance for smaller projects
  • Less modern UI out of the box, may require additional styling

Code Comparison

SlickGrid:

var grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onCellChange.subscribe(function (e, args) {
  console.log("Cell changed: ", args);
});

Awesome Grid:

var grid = new FancyGrid({
  renderTo: 'grid-container',
  data: data,
  columns: columns
});
grid.on('cellclick', function(grid, o){
  console.log('Cell clicked:', o);
});

Both libraries offer powerful grid functionality, but SlickGrid provides more granular control and customization options at the cost of complexity. Awesome Grid, while newer, offers a more modern and straightforward API, making it easier to implement basic grid functionality quickly. The choice between the two depends on project requirements, desired features, and development team expertise.

gridstack logo

gridstack.js

6,536

Build interactive dashboards in minutes.

Pros of gridstack.js

  • More actively maintained with frequent updates and bug fixes
  • Offers a wider range of built-in features for grid manipulation
  • Better documentation and examples for easier implementation

Cons of gridstack.js

  • Larger file size and potentially higher performance overhead
  • Steeper learning curve due to more complex API
  • Less flexibility for custom grid implementations

Code Comparison

gridstack.js:

$('.grid-stack').gridstack();
var grid = $('.grid-stack').data('gridstack');
grid.addWidget($('<div><div class="grid-stack-item-content">New Widget</div></div>'), 0, 0, 3, 2);

awesome-grid:

var grid = new FancyGrid({
  renderTo: 'grid-container',
  width: 500,
  height: 300,
  columns: [
    {text: 'Name', dataIndex: 'name'}
  ]
});

Summary

gridstack.js is a more feature-rich and actively maintained library, offering robust grid manipulation capabilities. It's ideal for complex, interactive dashboard-like interfaces. However, it comes with a steeper learning curve and potentially higher performance costs.

awesome-grid, while less actively maintained, provides a simpler approach to grid creation. It's more suitable for basic grid layouts and data presentation, offering easier implementation but fewer built-in features for advanced grid manipulation.

Choose gridstack.js for complex, interactive grid layouts, and awesome-grid for simpler, data-focused grid presentations.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Awesome Grid

A curated list of data grid/table libraries and resources that developers may find useful. This list focuses on JavaScript-based data grid libraries and not CSS-based grid systems for page layout. The list is ordered alphabetically by category.

Awesome

Table of Contents

Libraries

  • ag-grid - Serious data grid solution for Enterprise. It supports major javascript frameworks:
    Angular 1, Angular2, Aurelia, React, VueJs, Web Components.
    It has both free and commercial licences. Free is limited on features.
  • Bryntum Grid - A rich JS data grid component that integrates with React, Vue and Angular.
  • FancyGrid - JavaScript grid library with charts integration and server communication.
    There is a big form module.
    It supports major javascript frameworks:
    Angular, jQuery, React, VueJs, Web Components.
  • Grid.js - Table plugin written in TypeScript. It has integrations with React, Vue, Angular and jQuery. It extends native HTML table. It does not provide many modern Enterprise grid features.
  • Handsontable - JavaScript Spreadsheet excel-like table.
    It supports major javascript frameworks: Angular, React, VueJs, Web Components.
  • RealGrid - Professional grid library on Canvas aimed at Enterprise level but almost all documentation is written in Korean.
  • RevoGrid - Free spreadsheet grid implementation as webcomponent. Handles millions of rows and columns fast and efficiently. Works in any major framework (VueJs, React, Ember, Angular) or with no framework at all.
  • SpreadJS - JavaScript Spreadsheet, Grid and Data Presentation Components. There is a .NET version.
    SpreadJS is a serious product but the documentation and samples organization is complex.
  • Tabulator - Free JavaScript Table library with many features. It has integrations with Angular, React and Vue.

Specific Libraries

jQuery

  • appendGrid - The dynamic table input jQuery plugin. It has basic features. The design looks old.
  • DataTables - Easy to use library. It is the number one grid solution on jQuery.
  • Dynatable - It has basic features. Last update in 2014!
  • Frappe DataTable - A simple, modern and interactive datatable library on es6. Current version is full of small bugs.
  • jExcel - jExcel is is a very light jquery plugin to embed a spreadsheet, compatible with Excel, in your browser. You can load data straight to a jExcel table from a JS array, json or even a CSV file.
  • jsGrid - Light grid library with basic grid features.
    The author is a former core architect of DevExpress.
  • jqGrid - Variety of grid features.
  • jTable - All main features and a focus on CRUD operations.
  • MiniUI - A collection of widgets. There are some basic grid features. There are PHP, Java and .NET versions. All documentation is in Chinese.
  • ParamQuery - Featured grid library, but many small bugs and old design. Good features realization.
  • SlickGrid - Many features. There is even an infinite feature (1 000 000 rows). Themes looks out of date. Product is well known. Last update in 2014!
  • Tablesorter - Small table plugin that enables sorting and several features. Mainly used to enable fast sorting on html table.

AngularJS

  • ngx-datatable - A feature-rich lightweight data-table crafted for Angular2.
  • ui-grid - Professional complete grid solution.

React

EmberJS

Vue.js

  • vue-table - Vue.js component that will automatically request (JSON) data from the server and display it nicely in a html table with swappable/extensible pagination component.
  • vue-tables - Small table component on Vue.js.
  • Vuetiful Datatable - Vuetiful is a component framework written on Vue.js. Although it does not have documentation, site and even link with samples - it is still interesting. Link on DataTable
  • DevExtreme Vue Grid - High-performance plugin-based Vue data grid

Dojo

  • dgrid - Full featured, lightweight data grid library.
  • DridX - Featured grid solution.

Frameworks

  • DevExpress - Huge framework. It has AngularJS, Angular 2, Knockout, .NET versions.
    Grid solutions: grid, pivot, scheduler.
  • DHTMLX - One of the oldest frameworks. A bit out of date with old API.
    Grid solutions: grid, pivot, scheduler, treegrid, spreadsheet.
  • EasyUI - Light and fast jQuery UI library with many widgets.
    Grid solutions: grid, treegrid.
  • FlexGrid - A fast and flexible JavaScript data grid with zero dependencies. FlexGrid has deep integration with frameworks like Angular, React, Vue and Web Components. It is dependable on Wijmo framework.
  • Infragistics(IgniteUI) - Framework with .NET, Silverlight, Mobile, JavaScript versions. JavaScript version has name IgniteUI. It is jQuery based UI. Grid solutions: grid, treegrid, pivot.
  • JQWidgets - jQuery based UI library with a full list of widgets.
    Grid solutions: grid, scheduler, treegrid.
  • Sencha - The biggest JavaScript Framework. Robust API. It is the most serious market solution for developing CRM/ERP systems. Due to it's large size it is used only for SP complex solutions. No jQuery or AngularJS integrations.
    It has a material design theme since 6.2 version.
    There is a .NET version as an external product - Ext.NET.
    Grid solutions: grid with all features, tree grid, pivot, calendar, spreadsheets, infinite.
    There is a 3rd party ExtJS based Gantt and Scheduler - bryntum
  • ShieldUI - UI framework with JavaScript, .NET and Java versions.
    Grid solutions: there are both basic and advanced features. But there are some bugs in the samples and has old design.
  • SmartClient - The oldest project in this list. Old API, but many features.
    Grid solutions: grid with basic features.
  • Syncfusion - Syncfusion offers a complete solution with 50+ components in multiple frameworks such as Angular, React, Vue, etc. Grid solutions: grid, treegrid, spreadsheet, pivot grid, gantt.
  • Telerik - Telerik provides Kendo UI JS framework. Variety of widgets. It has .NET, MVC and PHP versions. It now has an AngularJS 2 version. Grid solutions: grid, scheduler, treegrid, scheduler, spreadsheet.
  • Vaadin - Material design widgets on Polymer. It has AngularJS and Java versions.
    Grid solutions: modern grid with basic features with Free license(Apache 2.0).
    Important: it supports only latest browsers versions!
  • Webix - Variety of widgets. It has Backbone.js, Angular 1, Angular2, VueJS and custom integrations.
    There is .NET version. Grid solutions: grid, treegrid, scheduler, pivot, spreadsheet.
  • w2ui - Light framework on jQuery with just 69kb.
    Grid solutions: light grid solution.

Specific products

  • Cal-Heatmap - JavaScript module to create calendar heatmap to visualize time series data.
  • Elegantt - Awesome Gantt charts for Trello.
  • fullcalendar - Professional JavaScript calendar and schedule library.
  • productboard - Service with interesting grids inside.
  • redbooth - Gantt service.
  • Smartsheet - Popular cloud service to manage grid/excel.
  • tablein - Multi-language restaurant table booking system. It has awesome functionality.
  • wpDataTables - WordPress Table Plugin. This plugin relies on DataTables

Infographic Tools

  • infogr.am - Cloud infographics tool, has light grid widget.