{"id":9364,"date":"2021-10-21T12:14:36","date_gmt":"2021-10-21T09:14:36","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=9364"},"modified":"2025-05-19T14:37:49","modified_gmt":"2025-05-19T11:37:49","slug":"how-to-create-grid-in-javascript","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/how-to-create-grid-in-javascript\/","title":{"rendered":"DHTMLX Grid: How to Create a Data Table in JavaScript"},"content":{"rendered":"

Data grid can be considered an essential component while developing web apps and interfaces. This widget allows working with massive data sets by displaying them in the form of a table.<\/p>\n

DHTMLX Grid widget<\/a> provides a comprehensive feature set to process large values of data and ensure user-friendly data management. It includes such convenient features, as data filtering and sorting, resizing, drag-n-drop of rows and columns, dynamic loading, and export to Excel and CSV.<\/p>\n

In this article, we’ll show how to build a JavaScript Grid with DHTMLX.<\/p>\n

Download DHTMLX Grid ><\/a><\/p>\n

\"javascript-grid\"<\/p>\n

Initialization<\/h5>\n

Having downloaded DHTMLX Grid (as a standalone widget or as part of Suite UI library<\/a>), you have to unpack it into a folder of your project first. Then you need to create an HTML file and add full paths to JS and CSS source files into the header:<\/p>\n

<!<\/span>DOCTYPE html><\/span>
\n<<\/span>html><\/span>
\n  <<\/span>head><\/span>
\n    <<\/span>title><\/span>Grid demo<\/<\/span>title><\/span>
\n 
\n    \/\/ include source files of the DHTMLX Suite library<\/span>
\n    <<\/span>script type=<\/span>"text\/javascript"<\/span> src=<\/span>"codebase\/suite.js"<\/span>><\/<\/span>script><\/span>
\n    <<\/span>link rel=<\/span>"stylesheet"<\/span> href=<\/span>"codebase\/suite.css"<\/span> \/><\/span>
\n 
\n    \/\/ add dataset for the Grid<\/span>
\n    <<\/span>script type=<\/span>"text\/javascript"<\/span> src=<\/span>"dataset.js"<\/span>><\/<\/span>script><\/span>
\n 
\n    \/\/ add CSS classes with custom settings<\/span>
\n    <<\/span>style><\/span>
\n    ...
\n    <\/<\/span>style><\/span>
\n  <\/<\/span>head><\/span><\/div><\/div>\n

Next, you should add a container and give it an id, for example, “grid”:<\/p>\n

  <<\/span>body><\/span>
\n    <<\/span>div id=<\/span>"grid"<\/span> class<\/span>=<\/span>"grid-wrapper"<\/span>><\/<\/span>div><\/span><\/div><\/div>\n

Then you have to initialize the Grid widget with the object constructor:<\/p>\n

    <<\/span>script><\/span>
\n
\n      \/\/ create a data set for the first column (instead you can add your data)<\/span>
\n      var<\/span> users =<\/span> [<\/span>
\n        {<\/span>
\n        name:<\/span> "Gary Ortiz"<\/span>,<\/span>
\n        ava:<\/span> "01.png"<\/span>,<\/span>
\n        }<\/span>,<\/span>
\n        {<\/span>
\n        name:<\/span> "Albert Williamson"<\/span>,<\/span>
\n        ava:<\/span> "02.png"<\/span>,<\/span>
\n        }<\/span>,<\/span>
\n        {<\/span>
\n        name:<\/span> "Mildred Fuller"<\/span>,<\/span>
\n        ava:<\/span> "03.png"<\/span>,<\/span>
\n        }<\/span>,<\/span>
\n      ]<\/span>;<\/span>
\n
\n      \/\/ specify Grid configurations<\/span>
\n      var<\/span> config =<\/span> {<\/span>
\n
\n        \/\/ configure each Grid column <\/span>
\n        columns:<\/span> [<\/span>
\n        ...
\n        ]<\/span>,<\/span>
\n      }<\/span>,<\/span>
\n
\n      \/\/ initialize the Grid widget and add specified configurations<\/span>
\n      this<\/span>.widget<\/span> =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> config)<\/span>;<\/span>
\n      var<\/span> grid =<\/span> this<\/span>.widget<\/span>;<\/span>
\n    <\/<\/span>script><\/span>
\n  <\/<\/span>body><\/span>
\n<\/<\/span>html><\/span><\/div><\/div>\n

Read the full article about DHTMLX Grid initialization in the documentation<\/a>.<\/p>\n

Styling<\/h5>\n

DHTMLX Grid allows you to fully customize its appearance. You can add new CSS classes with required settings in the style section of your HTML file and then specify their name in the Grid configuration.<\/p>\n

Thus, our Grid demo includes custom cells background, margins, and text alignment. Below are some examples of CSS classes that we created for:<\/p>\n