This blog will teach you how to Create Table Component (Dynatable) in HDI (Helical Dashboard Insights).

Dynatable : It is a library , it uses jQuery . It is a framework using which we can easily search ,   sort and filter the html tables data and data is in JSON Format.

Eg : –

<table>

<thead>

<th>name</th><th>class</th><th>address</th>

</thead>

<tbody></tbody>

</table>

And you ahve a record that looks like this:

{

“name”: “abc”,

“class”: “08-cs-08”,

“marks”: 72

}

Dynatable will render the “name” attribute to the first column, the “class” attribute to the second, and will ignore the “address” attribute since there’s no corresponding column header, and it will leave the last column blank since there’s not corresponding “marks” attribute.

By default, dynatable converts headings to JSON attribute names in camlecase . But we can change this by using the below property :

defaultColumnIdStyle:’underscore’

or

defaultColumnIdStyle: ‘lowecase’ etc.. 

To provide d3 dynatable feature in HDI , we need to go through following steps:

1. Database server – mysqlDB – foodmartTable : customerQuery :SELECT c.`customer_id` as customer_id, c.`account_num` as account_num, c.`fname` as fname, c.`lname` as lname, c.`address1` as address, c.`city` as city FROM foodmart.customer c;

The above information with username and password we need to provide in “demo.efwd” extension.

2.  We have to declare one dynatable component in “dynatable.html” file and in this component we need to provide the link of the file where the dynatable chart property is defined. 3.  In “dynaTable.efwvf” we need to define the dynatable properties and its link to database connection file i.e; “demo.efwd”

4.  One “dynaTable.EFW” file should also present which points to the template file i.e; “dynatable.html”

5.  Make all the three files in one folder and put              jquery.dynatable.css and jquery.dynatable.js file in the same folder and      give its path link in html extension file .

6.  By following these we are able to see the output which is as follows:

Capture2

Rupam Bhardwaj

Helical IT Solution

Leave a Reply