Description
Build v1.7.11
FancyGrid - JavaScript grid library with charts integration and server communication.
FancyGrid alternatives and similar libraries
Based on the "Spreadsheet" category.
Alternatively, view FancyGrid alternatives based on common mentions on social networks and blogs.
-
SheetJS js-xlsx
📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs -
HANDSONTABLE
JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡ -
Luckysheet
DISCONTINUED. Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source. -
-
ag-Grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript. -
-
jexcel
Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software. -
MUI X
MUI X is a collection of advanced React UI components for complex use cases. Use the native integration with Material UI or extend your design system. They feature state-of-the-art functionality and complex UX workflows for data-rich applications and support a wide range of use cases. MUI X is open core—base components are MIT-licensed, while more advanced features require a Pro or Premium commercial license. Components: - Data Grid - Date and Time Pickers - Charts - Tree View -
-
-
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of FancyGrid or a related project?
README
FancyGrid
Build v1.7.141
FancyGrid - JavaScript grid library with charts integration and server communication.
Install
bower
bower install fancygrid
npm
npm install fancygrid
CDN
https://cdn.fancygrid.com/fancy.min.js
https://cdn.fancygrid.com/fancy.min.css
Quick Start
Include a reference to the FancyGrid library
<link href="https://cdn.fancygrid.com/fancy.min.css" rel="stylesheet">
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
The FancyGrid object is now accessible. Happy griding!
<div id="grid"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
renderTo: 'grid',
width: 300,
height: 200,
data: [
{name: 'Nick', age: 30},
{name: 'Fred', age: 25},
{name: 'Mike', age: 35}
],
columns: [{
index: 'name',
title: 'Name',
type: 'string'
},{
type: 'number',
index: 'age',
title: 'Age'
}]
});
});
</script>
Load FancyGrid as a CommonJS module
FancyGrid is using an UMD module pattern, as a result it has support for CommonJS.
The following example presumes you are using npm to install FancyGrid over npm/bower.
// Load FancyGrid
var Fancy = require('fancygrid');
// Generate the grid
new Fancy.Grid({
//config
});
// Generate the form
new Fancy.Form({
//config
});
// Generate the tabs
new Fancy.Tab({
//config
});
Load FancyGrid as an ES6 module
Since FancyGrid supports CommonJS, it can be loaded as an ES6 module with the use of transpilers. Two common transpilers are Babel and TypeScript. These have different interpretations of a CommonJS module, which affects your syntax. The following examples presumes you are using npm to install FancyGrid.
Babel
import Fancy from 'fancygrid';
// Generate the grid
Fancy.Grid({
// config
});
// Generate the form
new Fancy.Form({
//config
});
// Generate the tabs
new Fancy.Tab({
//config
});
TypeScript
import * as Fancy from 'fancygrid';
// Generate the grid
Fancy.Grid({
// config
});
// Generate the form
new Fancy.Form({
//config
});
// Generate the tabs
new Fancy.Tab({
//config
});
Package Directory
The package includes the following:
| README.md
├── client
│ ├── fancy.full.min.js
│ ├── fancy.min.js
│ ├── fancy.min.css
│ ├── modules
├── src
│ ├── js
│ ├── less
│ ...
Debug
In case you want to debug FancyGrid there are several approaches.
Debug files
Include css file /client/fancy.css
Include js file /src/js/load-all.js
After that set
Fancy.MODULESLOAD = false;
Debug full build
Include css file /client/fancy.css
Include js file /src/js/fancy.full.js
Debug with auto-loading modules
Include css file /client/fancy.css
Include js file /src/js/fancy.js
Set modules path
Fancy.MODULESDIR = '/client/modules/';
Fancy.DEBUG = true;
Custom build
Debug build
grunt debug
Release build
grunt release
Support
If you need any assistance or would like to report any bugs found in FancyGrid, please contact us at [email protected]