{"id":28954,"date":"2026-01-07T09:32:27","date_gmt":"2026-01-07T09:32:27","guid":{"rendered":"urn:uuid:8580a6a4-909d-4646-9cfa-824a83a6a4c4"},"modified":"2026-01-13T12:06:18","modified_gmt":"2026-01-13T12:06:18","slug":"building-an-economic-blocs-map-with-highcharts-react-and-grid","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/building-an-economic-blocs-map-with-highcharts-react-and-grid\/","title":{"rendered":"Building an Economic Blocs Map with Highcharts React and Grid"},"content":{"rendered":"\n<p>In the first version of this demo <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/building-an-economic-blocs-map-with-highcharts-react\/\" target=\"_blank\">building an economic blocs map with Highcharts React<\/a>, I focused on the map experience: select a bloc, highlight member countries, and show quick stats. In this short update, I add <a href=\"https:\/\/www.highcharts.com\/products\/grid\/\" target=\"_blank\">Highcharts Grid Lite<\/a> under the map so users can scan all blocs at once and click any row to highlight it on the map.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What&#8217;s new in Version 2<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Highcharts Grid Lite table (under the map).<\/li>\n\n\n\n<li>Clickable headers for sorting: Name, GDP, Population, Founded, Members.<\/li>\n\n\n\n<li>Row click still highlights the bloc on the map.<\/li>\n<\/ul>\n\n\n\n<p><strong>User flow (unchanged, now faster):<\/strong> users can pick a bloc from the dropdown or click a grid row, the map highlights its member countries, and the stats panel updates with GDP, population, and founding year.<\/p>\n\n\n\n<p>Feel free to try it out:<br><em>Link to the <a href=\"https:\/\/codesandbox.io\/p\/github\/mekhatria\/economic-blocs-map-grid\/main\" target=\"_blank\">demo CodeSandbox<\/a><\/em><br><br><\/p>\n\n\n<iframe \n  src=\"https:\/\/codesandbox.io\/embed\/github\/mekhatria\/economic-blocs-map-grid\/main?view=preview&#038;hidenavigation=1&#038;hidedevtools=1\"\n  style=\"width:100%; height:1250px; border:0; border-radius: 4px; overflow:hidden;\"\n  title=\"Economic Blocs Map with Grid\"\n  sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n><\/iframe>\n\n\n<h3 class=\"wp-block-heading\"><strong>Grid architecture<\/strong><\/h3>\n\n\n\n<p>App<\/p>\n\n\n\n<p>\u251c\u2500 BlocDropdown<\/p>\n\n\n\n<p>\u251c\u2500 BlocInfo<\/p>\n\n\n\n<p>\u251c\u2500 MapChart<\/p>\n\n\n\n<p>\u2514\u2500 BlocGrid  &lt;&#8211; new<\/p>\n\n\n\n<p><strong>BlocGrid in a nutshell:<\/strong> it renders a Highcharts Grid Lite table with sortable columns in the header, and clicking any row highlights the corresponding bloc on the map.<\/p>\n\n\n\n<p>Highcharts grid exposes all blocs at once instead of hiding them behind a dropdown, makes comparisons easy via sorting (e.g., GDP or population), and keeps the map visible thanks to the fixed-height container.<\/p>\n\n\n\n<p>Now, that you understand why I used Highcharts Grid, let me show you the high-level implementation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Implementation steps<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install Grid Lite: <code>@highcharts\/grid-lite<\/code><\/li>\n\n\n\n<li>Create a new component: <code>src\/components\/BlocGrid.jsx<\/code><\/li>\n\n\n\n<li>Add column definitions (Name, GDP, Population, Founded, Members)<\/li>\n\n\n\n<li>Maintain <code>sortKey<\/code> + <code>sortDir<\/code> state<\/li>\n\n\n\n<li>Compute sorted rows with <code>useMemo<\/code><\/li>\n\n\n\n<li>Feed columns into Highcharts Grid Lite<\/li>\n\n\n\n<li>Wire row clicks to highlight the bloc on the map<\/li>\n<\/ol>\n\n\n\n<p>And here is the code behind all that:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const [sortKey, setSortKey] = useState('name');\nconst [sortDir, setSortDir] = useState('asc');\n\nconst rows = useMemo(() => {\n  const data = Object.entries(blocs).map(([key, bloc]) => ({\n    key,\n    name: bloc.name,\n    members: bloc.countries.length,\n    founded: bloc.founded,\n    gdp: bloc.gdp,\n    population: bloc.population\n  }));\n\n  const dir = sortDir === 'asc' ? 1 : -1;\n  data.sort((a, b) => {\n    const aValue = a[sortKey];\n    const bValue = b[sortKey];\n    if (typeof aValue === 'number' && typeof bValue === 'number') {\n      return (aValue - bValue) * dir;\n    }\n    return String(aValue).localeCompare(String(bValue)) * dir;\n  });\n\n  return data;\n}, [blocs, sortKey, sortDir]);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Wrapping up<\/strong><\/h3>\n\n\n\n<p>This grid update makes the app feel more like a data explorer: users can scan, sort, and compare blocs without losing the map context.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the first version of this demo building an economic blocs map with Highcharts React, I focused on the map experience: select a bloc, highlight member countries, and show quick stats. In this short update, I add Highcharts Grid Lite under the map so users can scan all blocs at once and click any row [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":29022,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"Building Interactive Maps with Highcharts React and Grid Tutorial","meta_description":"Learn how to add Highcharts Grid Lite to an interactive map app. Sort and compare economic blocs by GDP, population, and members with sortable tables.","hc_selected_options":["hc_twentyfour_products_cache_formatted","hc_twentyfour_products_cache_formatted_short"],"footnotes":""},"categories":[210],"tags":[1048,876,1031,824],"coauthors":[699],"class_list":["post-28954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-grid","tag-highcharts-maps","tag-javascript","tag-react"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/28954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=28954"}],"version-history":[{"count":4,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/28954\/revisions"}],"predecessor-version":[{"id":29398,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/28954\/revisions\/29398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/29022"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=28954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=28954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=28954"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=28954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}