FancyGrid

https://fancygrid.com/docs
Admin
FancyGrid is a JavaScript grid and form library that provides customizable data grids, charts...
Tokens:61,241
Snippets:700
Trust Score:8.2
Update:1 month ago
Show doc for...
Tokens:
Raw
### RESTful Create Operation Example

Source: https://fancygrid.com/docs/grid-concepts/data

Example of a POST request for creating a new record.

```text
create: 'POST'
url - app.php/users

Form Data - 
id:23

Responce - 
{"success":true,"message":"Created new User","data":{"id":23}}
```

--------------------------------

### Initialize Angular Project

Source: https://fancygrid.com/docs/getting-started/angular

Commands to install the Angular CLI and create a new project.

```bash
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve
```

--------------------------------

### Install FancyGrid dependencies

Source: https://fancygrid.com/docs/getting-started/react

Add the FancyGrid library and its React wrapper to your project.

```bash
npm install --save fancygrid fancygrid-react
```

--------------------------------

### Scaffold a Vue project

Source: https://fancygrid.com/docs/getting-started/vue

Commands to install the Vue CLI and initialize a new project.

```bash
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve
```

--------------------------------

### RESTful Read Operation Example

Source: https://fancygrid.com/docs/grid-concepts/data

Example of a GET request for reading data with sorting and paging parameters.

```text
read: 'GET'
url - app.php/users?sort=id&dir=asc&page=1&limit=10&start=10

Responce - 
{"success": true, "data": [...]}
```

--------------------------------

### Including Localization Modules

Source: https://fancygrid.com/docs/getting-started/es6-typescript

Example of importing a specific language module for localization.

```javascript

import 'fancygrid/client/modules/i18n/de';
```

--------------------------------

### Install FancyGrid dependencies

Source: https://fancygrid.com/docs/getting-started/vue

Add the required FancyGrid and Vue wrapper packages to your project.

```bash
npm install --save fancygrid fancy-grid-vue
```

--------------------------------

### Invoke Methods Immediately

Source: https://fancygrid.com/docs/form-concepts/methods

Example of calling a method immediately after initialization when using the full library build.

```javascript
var form = new FancyForm({
  ...
});
form.setTitle('new Title');
```

--------------------------------

### Install FancyGrid via npm

Source: https://fancygrid.com/docs/getting-started/installation-form

Use the npm package manager to download FancyGrid into your project.

```bash
npm install fancygrid
```

--------------------------------

### Initialize a FancyGrid component in React

Source: https://fancygrid.com/docs/getting-started/react-sample

Demonstrates basic setup of a FancyGrid component with static data and configuration properties.

```javascript
import React, { useState } from "react";
import { render } from "react-dom";
import { Grid } from "fancygrid-react";

const App = () => {
  const [height, setHeight] = useState(400);
  const [title, setTitle] = useState("Cars");

  const [columns, setColumns] = useState([
    { type: "order", locked: true },
    { index: "brand", title: "Brand", locked: true },
    { index: "model", title: "Model", autoWidth: true },
    { index: "manufactured", title: "Manufactured" },
    { index: "color", title: "Shade" },
    { index: "price", title: "Price", type: "currency" }
  ]);

  const [data, setData] = useState([
    {
      brand: "BMW",
      model: "X7",
      price: 98700,
      manufactured: "Germany",
      color: "Black"
    },
    {
      brand: "Land Rover",
      model: "DISCOVERY SPORT",
      price: 53000,
      manufactured: "UK",
      color: "Black"
    },
    {
      brand: "Jaguar",
      model: "E-PACE",
      price: 46642,
      manufactured: "UK",
      color: "Black"
    },
    {
      brand: "Jaguar",
      model: "I-PACE",
      price: 109557,
      manufactured: "UK",
      color: "Gray"
    },
    {
      brand: "Lexus",
      model: "NX 200",
      price: 38857,
      manufactured: "Japan",
      color: "Gray"
    }
  ]);

  const onGridInit = grid => {};

  return (
    <div style={{ marginTop: "5px" }}>
      <Grid
        height={height}
        theme={"extra-gray"}
        title={title}
        emptyText={"No rows to show"}
        selModel={{
          activeCell: true,
          type: "rows"
        }}
        defaults={{
          editable: true,
          resizable: true,
          menu: true
        }}
        events={[
          {
            init: onGridInit
          }
        ]}
        columns={columns}
        data={data}
      />
    </div>
  );
};

render(<App />, document.getElementById("root"));
```

--------------------------------

### RESTful Update Operation Example

Source: https://fancygrid.com/docs/grid-concepts/data

Example of a PUT request for updating a record field.

```text
update: 'PUT'
url - app.php/users
Form Data - 
id:11
key:name
value:John
```

--------------------------------

### Basic Grid Implementation

Source: https://fancygrid.com/docs/getting-started/react

Initial setup of a React component using the Grid component with separate methods for columns and data.

```javascript
import React, { Component } from 'react';
import { Grid } from 'fancygrid-react';

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
      return (
        <div>
          <Grid
			height={400}
			width={500}
			columns={this.getColumns()}
			data={this.getData()}>
          </Grid>
        </div>
      );
    }
	
	getColumns() {
	  return [{
		  index: 'company',
		  title: 'Company',
		  type: 'string',
		  width: 100
		}, {
		  index: 'name',
		  title: 'Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'surname',
		  title: 'Sur Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'age',
		  title: 'Age',
		  type: 'number',
		  width: 100
		}];
	}
	
	getData() {
	  return [
		  {name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
		  {name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
		  {name: 'Sam', surname: 'Williams',  company: 'Airbus', age: 38},
		  {name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
		  {name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33}
		];
	}
}

export default App;
```

--------------------------------

### Grid Render Method

Source: https://fancygrid.com/docs/getting-started/react

Example of defining grid properties directly in the render method.

```javascript
render() {
  return (
	<div>
	  <Grid
		height={400}
		width={500}
		columns={this.getColumns()}
		data={this.getData()}>
	  </Grid>
	</div>
  );
}
```

--------------------------------

### Render FancyGrid component

Source: https://fancygrid.com/docs/getting-started/react

Example of rendering the component within the render method.

```javascript
render() {
  return (
    <div>
      <FancyGridReact
		config={this.getConfig()}>
      </FancyGridReact>
    </div>
 );
}
```

--------------------------------

### RESTful Destroy Operation Example

Source: https://fancygrid.com/docs/grid-concepts/data

Example of a DELETE request for removing a record.

```text
destroy: 'DELETE'
url - app.php/users
Form Data - 
id:11
```

--------------------------------

### JSON Writer Create Operation

Source: https://fancygrid.com/docs/grid-concepts/data

Example of a create request using JSON payload.

```text
create: 'POST'
url - app.php/users

Request Payload -
{"id":26}
Responce - 
{"success":true,"message":"Created new User","data":{"id":27}}
```

--------------------------------

### JSON Writer Read Operation

Source: https://fancygrid.com/docs/grid-concepts/data

Example of a read request using JSON writer configuration.

```text
read: 'GET'
url - app.php/users?sort=company&dir=asc&page=1&limit=10&start=10

Responce - 
{"success": true, data: [...]}
```

--------------------------------

### Custom Reader Server Response

Source: https://fancygrid.com/docs/grid-concepts/data

Example response structure when using a custom reader root.

```json
{
  "items": [
    {"id": 1, "name": "Ted", "surname": "Smith"},
    {"id": 2, "name": "Ed", "surname": "Johnson"}
  ]
}
```

--------------------------------

### Server Multi-Sorting Parameter Structure

Source: https://fancygrid.com/docs/grid-concepts/sorting

Example of the sorters array structure sent to the server when multi-sorting is active.

```javascript
sorters: [{
  key: 'surname',
  dir: 'ASC',
  type: 'string'
},{
  key: 'age',
  dir: 'DESC',
  type: 'number'
}]
```

--------------------------------

### Server Filter Request Parameters

Source: https://fancygrid.com/docs/grid-concepts/filtering

Example structure of the filter array sent to the server, containing operator, value, and property fields.

```javascript
filter: [{
  operator: 'lt',
  value: 30,
  property: 'age'
},{
  operator: 'like',
  value: 'Adobe',
  property: 'company'
}]
```

--------------------------------

### Scaffold a React project

Source: https://fancygrid.com/docs/getting-started/react

Initialize a new React application using create-react-app.

```bash
npx create-react-app my-app
cd my-app
npm start
```

--------------------------------

### Include full library for immediate method access

Source: https://fancygrid.com/docs/grid-concepts/methods

Using the full library build allows methods to be called immediately after initialization.

```html
<script src="http://cdn.fancygrid.com/fancy.full.min.js"></script>
```

```javascript
var grid = new FancyGrid({
  ...
});
grid.setTitle('new Title');
```

--------------------------------

### Include Full Library

Source: https://fancygrid.com/docs/form-concepts/methods

Include the full library script to ensure methods are available immediately upon initialization.

```html
<script src="http://cdn.fancygrid.com/fancy.full.min.js"></script>
```

--------------------------------

### JSON Writer Destroy Operation

Source: https://fancygrid.com/docs/grid-concepts/data

Example of a destroy request using JSON payload.

```text
destroy: 'DELETE'
url - app.php/users

Request Payload -
{"id":11}

Responce - 
{"success":true,"message": "Destroyed User 11"}
```

--------------------------------

### JSON Writer Update Operation

Source: https://fancygrid.com/docs/grid-concepts/data

Example of an update request using JSON payload.

```text
update: 'PUT'
url - app.php/users

Request Payload -
{"id":2,"surname":"John"}

Responce - 
{"success":true,"message": "Updated User 2"}
```

--------------------------------

### Define Built-in Validation Types

Source: https://fancygrid.com/docs/form-concepts/validation

Examples of applying built-in vtypes to form fields.

```javascript
},{
  name: 'email',
  label: 'Email',
  vtype: 'email'
},{
```

```javascript
},{
  name: 'age',
  label: 'Age',
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'range',
    min: 20,
    max: 70
  }
}]
```

```javascript
},{
  name: 'age',
  label: 'Age',
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'min',
    param: 30
  }
}]
```

```javascript
},{
  name: 'age',
  label: 'Age',
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'max',
    param: 70
  }
}]
```

```javascript
},{
  name: 'age',
  label: 'Age',
  type: 'number',
  vtype: 'notnan'
}]
```

--------------------------------

### Handle Initialization via Event

Source: https://fancygrid.com/docs/form-concepts/methods

Use the init event to ensure the library is fully loaded before calling methods on the form instance.

```javascript
var form = new FancyForm({
  ...,
  events: [{
    init: function(){
      formInitedFn();
    }
  }],
  ...
});

function formInitedFn(){
  form.setTitle('new Title');
}
```

--------------------------------

### Create a context menu

Source: https://fancygrid.com/docs/misc/menu

Configures a context menu using predefined actions and custom menu items.

```javascript
new FancyGrid({
  exporter: true,
  contextmenu: [
	'copy',
    'copy+',
	'-',
    'delete',
    '-',
    'export',
	'-',
	{
	  text: 'Custom',
	  imageCls: 'custom-menu-item-cls',
	  sideText: 'CUSTOM',
	  handler: function(){
		alert('Click on custom item');
	  }
  }],
  ...
})
```

--------------------------------

### Configure renderTo Options

Source: https://fancygrid.com/docs/getting-started/your-first-grid

Demonstrates different ways to specify the rendering target for the grid.

```javascript
new FancyGrid({
  renderTo: 'container',
```

```javascript
new FancyGrid({
  renderTo: document.querySelector('#container'),
```

```javascript
new FancyGrid(document.querySelector('#container'), {
  title: 'Title',
```

--------------------------------

### Create a menu with string and number items

Source: https://fancygrid.com/docs/misc/menu

Demonstrates adding input-capable items like strings and numbers to a menu.

```javascript
new FancyGrid({
  tbar: [{
    type: 'button',
    text: 'File',
    menu: [{
	  type: 'string',
	  value: 'String',
	  events: [{
		input: function(field, value){
		  
		}
	  }]
	},{
	  type: 'number',
	  value: 7,
	  events: [{
		input: function(field, value){
		  
		}
	  }]
    }]
  }],
  ...
})
```

--------------------------------

### Initialize FancyForm

Source: https://fancygrid.com/docs/form-concepts/methods

Basic structure for initializing a new FancyForm instance.

```javascript
var form = new FancyForm({
  ...
})
```

--------------------------------

### Include Full Build of FancyGrid

Source: https://fancygrid.com/docs/getting-started/installation-form

Use the full build file if you prefer not to use the module loading system.

```html
<link href="/fancygrid/fancy.min.css" rel="stylesheet">
<script src="/fancygrid/fancy.full.min.js"></script>
```

--------------------------------

### Configure Page Size and Options

Source: https://fancygrid.com/docs/grid-concepts/paging

Define the default page size and the available options in the page size dropdown.

```javascript
new FancyGrid({
  paging: {
    pageSize: 20,
    pageSizeData: [5,10,20,50]
  },
  ...

```

--------------------------------

### Collapse rows on start

Source: https://fancygrid.com/docs/grid-concepts/grouping

Sets the initial state of grouped rows to collapsed using the collapsed property.

```javascript
new FancyGrid({
  ...
  grouping: {
    by: 'model',
	collapsed: true
  },
  ...

```

--------------------------------

### Configure renderTo Options

Source: https://fancygrid.com/docs/getting-started/your-first-form

Demonstrates different ways to specify the target container for the form.

```javascript
new FancyForm({
  renderTo: 'container',
```

```javascript
new FancyForm({
  renderTo: document.querySelector('#container'),
```

```javascript
new FancyForm(document.querySelector('#container'), {
  title: 'Title',
```

--------------------------------

### Define RESTful Action Methods

Source: https://fancygrid.com/docs/grid-concepts/data

Standard HTTP methods used for CRUD operations in a RESTful setup.

```text
read: 'GET'
create: 'POST'
update: 'PUT'
destroy: 'DELETE'
```

--------------------------------

### Final Grid Implementation

Source: https://fancygrid.com/docs/getting-started/react

Complete component implementation including advanced configuration and data.

```javascript
import React, { Component } from 'react';

import { Grid } from 'fancygrid-react';

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
      return (
        <div>
          <Grid
		    selModel='rows'
			theme='gray'
			height={400}
			width={500}
			defaults={{sortable: true}}
			trackOver={true}
			columns={this.getColumns()}
			data={this.getData()}>
          </Grid>
        </div>
      );
    }
	
	getColumns() {
	  return [{
		  type: 'select'
	    },{
		  index: 'company',
		  title: 'Company',
		  type: 'string',
		  width: 100
		}, {
		  index: 'name',
		  title: 'Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'surname',
		  title: 'Sur Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'age',
		  title: 'Age',
		  type: 'number',
		  width: 100
		}];
	}
	
	getData() {
	  return [
		  {name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
		  {name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
		  {name: 'Sam', surname: 'Williams',  company: 'Airbus', age: 38},
		  {name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
		  {name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33}
		];
	}
}

export default App;
```

--------------------------------

### Fancy.getWidget(id)

Source: https://fancygrid.com/docs/form-concepts/fields

Retrieves a reference to a widget by its ID, allowing for programmatic interaction such as getting or setting values.

```APIDOC
## Fancy.getWidget(id)

### Description
Retrieves a widget instance by its unique identifier. This is useful for manipulating field values dynamically.

### Parameters
- **id** (String) - Required - The unique identifier assigned to the field.

### Example
```javascript
var numberField = Fancy.getWidget('employee');
var newValue = numberField.get() + 2;
numberField.set(newValue);
```
```

--------------------------------

### Initialize FancyTab with Grid Items

Source: https://fancygrid.com/docs/misc/tabs

Creates a tabbed interface containing multiple grid views with shared column configurations.

```javascript
var columns = [{
  type: 'image',
  index: 'img',
  title: 'Photo',
  cls: 'column-car-image',
  width: 170
},{
  index: 'name',
  type: 'string',
  sortable: true,
  width: 100,
  title: 'Name'
},{
  index: 'price',
  type: 'currency',
  sortable: true,
  title: 'Start Price'
}];

var selModel = 'row',
  defaults = {
    resizable: true
  },
  cellHeight = 75;

new FancyTab({
  renderTo: 'tabs',
  title: 'KIA by types',
  width: 500,
  height: 450,
  resizable: true,
  theme: 'gray',
  items: [{
    title: 'Sub-Compacts',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'sub-compacts.json'
      }
    },
    defaults: defaults,
    columns: columns
  },{
    title: 'Compacts',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'compacts.json'
      }
    },
    defaults: defaults,
    columns: columns
  },{
    title: 'Minivans',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'minivans.json'
      }
    },
    defaults: defaults,
    columns: columns
  },{
    title: 'Luxury Sedans',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'luxury-sedans.json'
      }
    },
    defaults: defaults,
    columns: columns
  },{
    title: 'Crossovers',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'suv.json'
      }
    },
    defaults: defaults,
    columns: columns
  }]
});
```

--------------------------------

### Initialize FancyGrid Container

Source: https://fancygrid.com/docs/grid-concepts/sizing

Include the library script and define the target container element for the grid.

```html
<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container" style="width: 700px; height: 400px;"></div>
```

--------------------------------

### Include FancyGrid files from local domain

Source: https://fancygrid.com/docs/getting-started/angularjs

Load the required CSS and JavaScript files from a local server path after downloading the build.

```html
<link href="/fancygrid/fancy.min.css" rel="stylesheet">
<script src="/fancygrid/fancy.min.js"></script>
<script src="/fancygrid/fancy-angular.js"></script>
```

--------------------------------

### Retrieving Required Modules

Source: https://fancygrid.com/docs/getting-started/es6-typescript

Command to identify which modules are currently in use for production bundling.

```javascript
Fancy.getModulesList();
```

--------------------------------

### Implement FancyGrid in App.js

Source: https://fancygrid.com/docs/getting-started/react

Basic implementation of the FancyGridReact component with configuration and data.

```javascript
import React, { Component } from 'react';
import { FancyGridReact } from 'fancygrid-react';

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
      return (
        <div>
          <FancyGridReact
			config={this.getConfig()}>
          </FancyGridReact>
        </div>
      );
    }
	
	getConfig() {
	  return {
	    height: 400,
		width: 500,
		columns: [{
          index: 'company',
		  title: 'Company',
		  type: 'string',
		  width: 100
		}, {
		  index: 'name',
		  title: 'Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'surname',
		  title: 'Sur Name',
		  type: 'string',
		  width: 100
		}, {
		  index: 'age',
		  title: 'Age',
		  type: 'number',
		  width: 100
        }],
        data: [
          {name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
		  {name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
		  {name: 'Sam', surname: 'Williams',  company: 'Airbus', age: 38},
		  {name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
		  {name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33}
        ]
	  }
	}
}

export default App;
```

--------------------------------

### Define a controller with events

Source: https://fancygrid.com/docs/grid-concepts/controllers

Demonstrates defining a controller using Fancy.defineControl and mapping events within the FancyGrid configuration.

```javascript
Fancy.defineControl('mycontrol', {
  onCellClick: function(grid, o){
    
  },
  onCellDBLClick: function(grid, o){
    
  }
});

var grid = new FancyGrid({
  ...
  events: [{
    cellclick: 'onCellClick'
  },{
    celldblclick: 'onCellDBLClick'
  }],
  controllers: ['mycontrol'],
  ...
});
```

--------------------------------

### Importing FancyGrid with Transpilers

Source: https://fancygrid.com/docs/getting-started/es6-typescript

Shows the syntax differences for importing FancyGrid when using Babel versus TypeScript.

```javascript

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
});
```

--------------------------------

### Initialize FancyGrid with Currency Columns

Source: https://fancygrid.com/docs/grid-concepts/columns

Configures a grid with multiple columns, including calculated currency fields and custom renderers for formatting.

```javascript
document.addEventListener("DOMContentLoaded", function() {


  new FancyGrid({
    title: 'Hour Rate - Currencies',
    renderTo: 'container',
    width: 752,
    height: 500,
    data: data,
    selModel: 'row',
    trackOver: true,
    theme: 'extra-gray',
    defaults: {
      type: 'string',
      width: 100,
      resizable: true,
      sortable: true,
      menu: ['size', '-', 'sort', '-', 'columns', '-', 'lock']
    },
    columns: [{
      index: 'name',
      title: 'Name'
    }, {
      type: 'string',
      index: 'country',
      title: 'Country'
    }, {
      index: 'hour',
      type: 'currency',
      title: 'Hour rate',
      width: 70
    }, {
      index: '12*180*hour',
      type: 'currency',
      title: 'Dollar',
      currency: Fancy.currency.USD,
      cellAlign: 'right',
      width: 70
    }, {
      index: '0.91*12*180*hour',
      type: 'currency',
      title: 'Euro',
      currency: Fancy.currency.EUR,
      cellAlign: 'right',
      render: function(o) {
        o.value = Fancy.Number.format(o.value, ',', 0);

        return o;
      },
      width: 90
    }, {
      index: '0.80*12*180*hour',
      type: 'currency',
      title: 'Pound',
      currency: Fancy.currency.GBP,
      cellAlign: 'right',
      render: function(o) {
        o.value = Fancy.Number.format(o.value, ',', 0);

        return o;
      },
      width: 90
    }, {
      index: '108.36*12*180*hour',
      type: 'currency',
      title: 'Yen',
      currency: Fancy.currency.JPY,
      cellAlign: 'right',
      render: function(o) {
        o.value = Fancy.Number.format(o.value, ',', 0);

        return o;
      },
      width: 90
    }, {
      index: '72*12*180*hour',
      type: 'currency',
      title: 'Ruble',
      currency: Fancy.currency.RUB,
      cellAlign: 'right',
      render: function(o) {
        o.value = Fancy.Number.format(o.value, ',', 0);

        return o;
      },
      width: 90
    }]
  });

});


var data = [{
    id: 1,
    name: 'Ted Smith',
    position: 'Java Developer',
    birthday: '06/22/1953',
    country: 'USA',
    hour: 52
  },
  {
    id: 2,
    name: 'Ed Johnson',
    position: 'C/C++ Market Data Developer',
    birthday: '09/12/1971',
    country: 'England',
    hour: 16
  },
  {
    id: 3,
    name: 'Sam Williams',
    position: 'Technical Analyst',
    birthday: '09/02/1973',
    country: 'USA',
    hour: 40
  },
  {
    id: 4,
    name: 'Alexander Brown',
    position: 'Project Manager',
    country: 'USA',
    birthday: '09/25/1991',
    hour: 33
  },
  {
    id: 5,
    name: 'Nicholas Miller',
    position: 'Senior Software Engineer',
    country: 'Canada',
    birthday: '08/24/1959',
    hour: 50
  },
  {
    id: 6,
    name: 'Andrew Thompson',
    position: 'Agile Project Manager',
    country: 'Germany',
    birthday: '08/18/1978',
    hour: 27
  },
  {
    id: 7,
    name: 'Ryan Walker',
    position: 'Application Support Engineer',
    country: 'England',
    birthday: '04/02/1981',
    hour: 40
  },
  {
    id: 8,
    name: 'John Scott',
    position: 'Flex Developer',
    country: 'USA',
    birthday: '02/14/1960',
    hour: 71
  },
  {
    id: 9,
    name: 'James Phillips',
    position: 'Senior C++/C# Developer',
    country: 'USA',
    birthday: '10/18/1991',
    hour: 58
  },
  {
    id: 10,
    name: 'Brian Edwards',
    position: 'UNIX/C++ Developer',
    country: 'USA',
    birthday: '04/16/1963',
    hour: 64
  },
  {
    id: 11,
    name: 'Jack Richardson',
    position: 'Ruby Developer',
    country: 'Germany',
    birthday: '11/20/1982',
    hour: 58
  },
  {
    id: 12,
    name: 'Alex Howard',
    position: 'CSS3/HTML5 Developer',
    country: 'USA',
    birthday: '07/22/1987',
    hour: 66
  },
  {
    id: 13,
    name: 'Carlos Wood',
    position: 'Node.js Developer',
    country: 'USA',
    birthday: '08/08/1988',
    hour: 41
  },
  {
    id: 14,
    name: 'Adrian Russell',
    position: 'Frontend Developer',
    country: 'Canada',
    birthday: '06/19/1969',
    hour: 25
  },
  {
    id: 15,
    name: 'Jeremy Hamilton',
    position: 'Scala Developer',
    country: 'USA',
    birthday: '04/17/1950',
    hour: 69
  },
  {
    id: 16,
    name: 'Ivan Woods',
    position: 'Objective C Developer',
    country: 'USA',
    birthday: '03/25/1964',
    hour: 64
  },
  {
    id: 17,
    name: 'Peter West',
    position: 'PHP/HTML Developer',
    country: 'England',
    birthday: '09/06/1977',
    hour: 30
  },
  {
    id: 18,
    name: 'Lorenzo Tucker',
    position: 'Architect',
    country: 'USA',
    birthday: '10/25/1975',
    hour: 41
  },
  {
    id: 19,
    name: 'Randy Grant',
    position: 'Engineer',
    country: 'USA',
    birthday: '07/16/1969',
    hour: 50
  },
  {
    id: 20,
    name: 'Arthur Gardner',
    position: 'Analytic',
    country: 'USA',
    birthday: '09/26/1994',
    hour: 16
  },
  {
    id: 21,
    name: 'Orlando Ruiz',
    position: 'Unit Testing Developer',
    country: 'Germany',

```

--------------------------------

### Import FancyGrid component

Source: https://fancygrid.com/docs/getting-started/react

Importing the component using full or short names.

```javascript
import { FancyGridReact } from 'fancygrid-react';
```

```javascript
import { Grid } from 'fancygrid-react';
```

--------------------------------

### Configure paging

Source: https://fancygrid.com/docs/grid-concepts/core-properties

Enables pagination for the grid.

```javascript
new FancyGrid({
  ...
  paging: true,
  ...
```

--------------------------------

### Configure Grid Dimensions and Title

Source: https://fancygrid.com/docs/grid-concepts/understanding-fancygrid

Set basic layout properties including height, width, and the grid title.

```javascript
height: 500,
```

```javascript
title: 'Grid of statistics',
```

```javascript
width: 400,
```

--------------------------------

### FancyGrid Configuration Properties

Source: https://fancygrid.com/docs/grid-concepts/understanding-fancygrid

Overview of the main configuration properties used to initialize and define the behavior of a FancyGrid instance.

```APIDOC
## FancyGrid Configuration

### Description
Configuration properties used to define the structure, data source, and appearance of a FancyGrid component.

### Properties
- **data** (Object|Array) - The data source for the grid. Supports direct arrays, JSON objects, proxy URLs, REST endpoints, and chart integration.
- **columns** (Array) - Definition of grid columns including index, title, locked status, width, and type.
- **defaults** (Object) - Default properties applied to all columns (e.g., type, width, editable, sortable).
- **height** (Number) - The height of the grid in pixels.
- **width** (Number) - The width of the grid in pixels.
- **title** (String) - The display title for the grid.

### Configuration Example
```javascript
new FancyGrid({
  title: 'Grid of statistics',
  width: 400,
  height: 500,
  data: [
    {id: 1, name: 'Ted', surname: 'Smith'}
  ],
  columns: [{
    index: 'id',
    title: 'Id',
    width: 50
  }],
  defaults: {
    type: 'string',
    sortable: true
  }
});
```
```

--------------------------------

### Configure controllers

Source: https://fancygrid.com/docs/grid-concepts/core-properties

Defines application controllers for logic separation.

```javascript
FancyGrid.defineController('mycontrol', {
  controls: [{
    event: 'cellclick',
    selector: '.sign-minus',
    handler: 'onClickMinus'
  },{
    event: 'cellclick',
    selector: '.sign-plus',
    handler: 'onClickPlus'
  }],
  onClickMinus: function(grid, o){
    
  },
  onClickPlus: function(grid, o){
    
  },
});

var grid = new FancyGrid({
  ...
  controllers: ['mycontrol'],
  ...
});
Copy
```

--------------------------------

### Configure spin and step for number columns

Source: https://fancygrid.com/docs/grid-concepts/columns

Enables spinner buttons and sets increment steps for numeric columns.

```javascript
columns: [{
...
  title: 'Salary',
  index: 'salary',
  type: 'number',
  spin: true,
  step: 1000,
  min: 0,
  max: 150000,
  format: {
    inputFn: salaryInputFn
  }
...
]
```

--------------------------------

### Configure selection property

Source: https://fancygrid.com/docs/grid-concepts/core-properties

Sets the configuration for grid selection.

```javascript
new FancyGrid({
  renderTo: 'grid',
  width: 690,
  height: 350,
  selection: {
    row: true
  }
  
  ...

```

--------------------------------

### Define a Custom Theme

Source: https://fancygrid.com/docs/design-and-style/themes

Create a new theme using Fancy.defineTheme and associated CSS rules.

```css

.fancy-theme-my .fancy-grid-cell {
  color: #888888;
}
...
```

```javascript

Fancy.defineTheme('my', {
  config: {
    cellHeaderHeight: 30,
    cellHeight: 32,
    titleHeight: 42,
    barHeight: 37,
    bottomScrollHeight: 12
  }
});
```

--------------------------------

### Set simple text for title and subTitle

Source: https://fancygrid.com/docs/form-concepts/title

Use string values to define basic title and subtitle text.

```javascript
title: 'Title',
subTitle: 'Sub Title',
```

--------------------------------

### Importing Grid Component

Source: https://fancygrid.com/docs/getting-started/react

Minimal import statement for the Grid component.

```javascript
import { Grid } from 'fancygrid-react';
```

--------------------------------

### Enable Remote Sorting and Paging

Source: https://fancygrid.com/docs/grid-concepts/data

Initializes the grid with remote sorting and paging enabled.

```javascript
new FancyGrid({
  ...
  data: {
    remoteSort: true,
    proxy: {
      url: 'ajax.php'
    }
  },
  paging: true,
```

--------------------------------

### Configure buttons

Source: https://fancygrid.com/docs/grid-concepts/core-properties

Defines the buttons bar.

```javascript
buttons: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],
Copy
```

--------------------------------

### Configure theme property

Source: https://fancygrid.com/docs/grid-concepts/core-properties

Enables a custom theme for the grid.

```javascript
theme: 'my'
```

--------------------------------

### Fetch data for FancyGrid in React

Source: https://fancygrid.com/docs/getting-started/react-sample

Shows how to populate grid data asynchronously using a toolbar button handler.

```javascript
import React, { useState } from "react";
import { render } from "react-dom";
import { Grid } from "fancygrid-react";

const App = () => {
  const [height, setHeight] = useState(400);
  const [title, setTitle] = useState("Cars");

  const [columns, setColumns] = useState([
    { type: "order", locked: true },
    { index: "brand", title: "Brand", locked: true },
    { index: "model", title: "Model", autoWidth: true },
    { index: "manufactured", title: "Manufactured" },
    { index: "color", title: "Shade" },
    { index: "price", title: "Price", type: "currency" }
  ]);

  const [data, setData] = useState([]);

  return (
    <div style={{ marginTop: "5px" }}>
      <Grid
        height={height}
        theme={"extra-gray"}
        title={title}
        emptyText={"No rows to show"}
        selModel={{
          activeCell: true,
          type: "rows"
        }}
        defaults={{
          editable: true,
          resizable: true,
          menu: true
        }}
        tbar={[{
          text: 'Fetch Data',
          handler:()=>{
            fetch('https://fancygrid.com/data/cars.json')
              .then(result => result.json())
              .then(data=>setData(data));
          }
        }]}
        columns={columns}
        data={data}
      />
    </div>
  );
};

render(<App />, document.getElementById("root"));
```

--------------------------------

### Configure displayKey and valueKey

Source: https://fancygrid.com/docs/grid-concepts/columns

Maps display and value fields for a combo column using external JSON data.

```javascript
columns: [{
...
},{
  index: 'state',
  title: 'State',
  type: 'combo',
  width: 110,
  displayKey: 'text',
  valueKey: 'value',
  data: {
    proxy: {
      url: 'states.json'
    }
  }
...
```

```json
states.json
{
  "data": [{
    "value": "",
    "text": ""
  },{
    "value": "AL",
    "text": "Alabama"
  },{
    "value": "AK",
    "text": "Alaska"
  },{
    "value": "AZ",
    "text": "Arizona"
```

--------------------------------

### Configure defaults

Source: https://fancygrid.com/docs/grid-concepts/core-properties

Sets default properties for all columns.

```javascript
defaults: {
  type: 'string',
  width: 100,
  editable: true,
  sortable: true
},
Copy
```

--------------------------------

### Use the init event for delayed method execution

Source: https://fancygrid.com/docs/grid-concepts/methods

When using modular builds, wait for the init event to ensure the library is fully loaded before calling methods.

```javascript
var grid = new FancyGrid({
  ...,
  events: [{
    init: function(){
      gridInitedFn();
    }
  }],
  ...
});

function gridInitedFn(){
  grid.setTitle('new Title');
}
```

--------------------------------

### Initialize FancyGrid with jQuery

Source: https://fancygrid.com/docs/getting-started/your-first-grid

Defines a data array and configures the FancyGrid component with specific columns and dimensions.

```javascript
var data = [
  {name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
  {name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
  {name: 'Sam', surname: 'Williams',  company: 'Airbus', age: 38},
  {name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
  {name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33},
  {name: 'Andrew', surname: 'Thompson', company: 'Google', age: 28},
  {name: 'Ryan', surname: 'Walker', company: 'Siemens', age: 39},
  {name: 'John', surname: 'Scott', company: 'Cargo', age: 45},
  {name: 'James', surname: 'Phillips', company: 'Pro bugs', age: 30},
  {name: 'Brian', surname: 'Edwards', company: 'IT Consultant', age: 23},
  {name: 'Jack', surname: 'Richardson', company: 'Europe IT', age: 24},
  {name: 'Alex', surname: 'Howard', company: 'Cisco', age: 27},
  {name: 'Carlos', surname: 'Wood', company: 'HP', age: 36},
  {name: 'Adrian', surname: 'Russell', company: 'Micro Systems', age: 31},
  {name: 'Jeremy', surname: 'Hamilton', company: 'Big Machines', age: 30},
  {name: 'Ivan', surname: 'Woods', company: '', age: 24},
  {name: 'Peter', surname: 'West', company: 'Adobe', age: 26},
  {name: 'Scott', surname: 'Simpson', company: 'IBM', age: 29},
  {name: 'Lorenzo', surname: 'Tucker', company: 'Intel', age: 29},
  {name: 'Randy', surname: 'Grant', company: 'Bridges', age: 30},
  {name: 'Arthur', surname: 'Gardner', company: 'Google', age: 31},
  {name: 'Orlando', surname:'Ruiz', company: 'Apple', age: 32}
];

$(function(){
  $('#container').FancyGrid({
    width: 500,
    height: 400,
    data: data,
    columns: [{
      index: 'company',
      title: 'Company',
      type: 'string',
      width: 100
    },{
      index: 'name',
      title: 'Name',
      type: 'string',
      width: 100
    },{
      index: 'surname',
      title: 'Sur Name',
      type: 'string',
      width: 100
    },{
      index: 'age',
      title: 'Age',
      type: 'number',
      width: 100
    }]
  });
});
```

--------------------------------

### Configuring CSS for Production

Source: https://fancygrid.com/docs/getting-started/react

Import the required CSS file and set Fancy.stylesLoaded to true to prevent the library from attempting to load styles dynamically.

```javascript
import 'fancygrid/client/fancy.min.css';
Fancy.stylesLoaded = true;
```

--------------------------------

### Configure summary property

Source: https://fancygrid.com/docs/grid-concepts/core-properties

Enables row summary functionality.

```javascript
new FancyGrid({
  ...,
  summary: true,
  columns: [{
    ...,
	summary: 'sum'
  },{

```

--------------------------------

### Initialize FancyForm with jQuery

Source: https://fancygrid.com/docs/getting-started/your-first-form

Use the jQuery plugin syntax to initialize the form on a selected container.

```javascript
$(function(){
  $('#container').FancyForm({
    title: 'User Data',
    width: 290,
    height: 500,
    defaults: {
      type: 'string'
    },
    items: [{
      name: 'id',
      type: 'hidden'
    },{
      label: 'Name',
      emptyText: 'Name',
      name: 'name'
    },{
      label: 'SurName',
      emptyText: 'SurName',
      name: 'surname'
    },{
      label: 'E-mail',
      emptyText: 'E-mail',
      name: 'email',
      valid: {
        type: 'email',
        blank: false,
        blankText: 'Required',
        text: 'Incorect email'
      }
    },{
      type: 'date',
      label: 'Birthday',
      name: 'birthday'
    },{
      type: 'checkbox',
      label: 'Active',
      name: 'active',
      value: true
    },{
      type: 'number',
      label: 'Hour rate',
      name: 'hour',
      min: 0
    },{
      type: 'string',
      label: 'Position',
      name: 'position'
    },{
      type: 'combo',
      label: 'Country',
      name: 'country',
      data: [
        {country: 'USA'},
        {country: 'Canada'},
        {country: 'England'},
        {country: 'Germany'}
      ],
      displayKey: 'country',
      valueKey: 'country'
    },{
      type: 'textarea',
      label: 'About',
      name: 'about'
    }],
    buttons: ['side', {
      text: 'Clear',
      handler: function(){
        form.clear();
      }
    },{
      text: 'Save',
      handler: function(){
        var values = form.get();


      }
    }]
  });
});
```
Tokens:
Raw