Using FancyGrid library

In this article, we will see how to use FancyGrid library.

But first of all, what's FancyGrid ?
FancyGrid is a JavaScript grid library.
Our goal is to use the FancyGrid library to create a web page where we can see all the employees of the fictitious startup 'Vision-HR'. We are going to have a wonderful feature that will allow us to search for employees according to filters  .
First of all we will create an 'Employees' table in which we will insert all the employees of our company. Next, we will create an API function that will allow us to retrieve the data included in our 'Employees' table And finally, we will integrate the 'FancyGrid library in our front end'

Create a new table 'Employees' :



Create an API function :

Create a new function of type 'Visual select'  and select 'GET' Method:


Let's try our API :

Perfect, now let's do the front end!

Wow, a lot of job, let's explain our code a bit but really don't hesitate to ask us questions
In our html, we create a div giving it the id 'container'.
We import the library : https://cdn.fancygrid.com/fancy.min.js.
We call our API function and we change the format of our data in order to integrate them into FancyGrid (arrPersonal).
We use the FancyGrid library: new FancyGrid.

You can find a lot of information regarding options, and design for example on their samples documentation

Let's check the result :
Wow, a beautiful chart which displays the results of our API function.

You can simply use the search feature to more easily find specific employees :