A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/FancyGrid/FancyGrid below:

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

Build v1.7.180

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

https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.css
https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js

Include a reference to the FancyGrid library

<link href="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

The FancyGrid object is now accessible. Happy griding!

<div id="grid"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {

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

import Fancy from 'fancygrid';

// Generate the grid
Fancy.Grid({
  // config
});

// Generate the form
new Fancy.Form({
  //config
});

// Generate the tabs
new Fancy.Tab({
  //config
});
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
});

The package includes the following:

|   README.md
├── client
│   ├── fancy.full.min.js
│   ├── fancy.min.js
│   ├── fancy.min.css
│   ├── modules
├── src
│   ├── js
│   ├── less
│   ...

In case you want to debug FancyGrid there are several approaches.

Include css file /client/fancy.css
Include js file /src/js/load-all.js
After that set

Fancy.MODULESLOAD = false;

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;

If you need any assistance or would like to report any bugs found in FancyGrid, please contact us at support@fancygrid.com


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4