We\u2019re happy to announce the release of Highcharts Grid Lite. If you\u2019re looking for a fast way to add interactive, customizable data grids to your web apps without bloating your project with unnecessary dependencies, this tool is for you. It\u2019s free, easy to configure, and built with developers in mind.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Read on to learn more about Grid Lite\u2019s features and how to get started. You can also play around with a live JSFiddle demo<\/a> to see all these features in action.<\/p>\n\n\n\n <\/p>\n\n\n\n Update (May 2026):<\/strong> Grid Lite remains free and unaffected by licensing changes. For Grid Pro users, please note that starting May 6th, the Highcharts Dashboard license no longer includes Grid Pro usage.<\/p>\n<\/div>\n<\/div>\n\n\n\n Grid Lite grew out of Highcharts Dashboards\u2019 data grid. We realized many developers loved the grid component but didn\u2019t always need the full dashboard experience. So we extracted essential functionality and created a free version that shares the same core codebase as Dashboards\u2019 \u201cpro\u201d data grid minus the heavier extras.<\/p>\n\n\n\n <\/p>\n\n\n\n To get started, all you need is a basic HTML file, a JavaScript config, and a data object that maps column keys to values.<\/p>\n\n\n\n <\/p>\n\n\n\n Start by including the script and stylesheet in your HTML:<\/p>\n\n\n\n <\/p>\n\n\n\n Then, define your data using a simple key\/value structure. Each key represents a column, and its value is an array of cell values for that column:<\/p>\n\n\n\n <\/p>\n\n\n\n Then, to render a simple grid, pass your data object to your grid configuration like this:<\/p>\n\n\n\n <\/p>\n\n\n\n This setup gives you a functional grid with minimal code. Check out this clip from our Grid Lite webinar<\/a> for more info.<\/p>\n\n\n\nWhy Grid Lite?<\/strong><\/h2>\n\n\n\n
Getting Started<\/h2>\n\n\n\n
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@highcharts\/grid-lite\/grid-lite.js\"><\/script>\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@highcharts\/grid-lite\/css\/grid.css\" \/>\n<\/code><\/pre>\n\n\n\nconst employeeData = {\n id: [\n \"a1B2c3D4e5\",\n \"F6g7H8i9J0\",\n \"K1l2M3n4O5\",\n \"P6q7R8s9T0\",\n \"U1v2W3x4Y5\"\n \/\/ ...\n ],\n firstName: [\n \"Alice\",\n \"Bob\",\n \"Charlie\",\n \"Dana\",\n \"Evan\"\n \/\/ ...\n ],\n lastName: [\n \"Smith\",\n \"Johnson\",\n \"Williams\",\n \"Brown\",\n \"Jones\"\n \/\/ ...\n ]\n};\n<\/code><\/pre>\n\n\n\nGrid.grid(\"our_grid\", {\n dataTable: {\n columns: employeeData\n }\n});\n<\/code><\/pre>\n\n\n\n