--- title: "Visualizing FIFA World Cup Stats with React Data Grid" published_at: "2024-08-28T10:00:00+00:00" modified_at: "2025-11-06T11:37:31+00:00" url: "https://www.syncfusion.com/blogs/post/view-fifa-stats-with-react-data-grid" excerpt: "This blog explains how to visualize the FIFA World Cup stats report using the Syncfusion React Data Grid and other components." taxonomy_category: - "Development" - "React" - "React Data Grid" - "React Data Grid Library" - "React Data Table" - "React DataGrid Component" - "React Grid" - "React Grid Library" - "UI" - "Web" taxonomy_post_tag: - "Data Visualization" - "DataGrid" - "React" - "React Components" - "React Data Grid" - "React Data Grid Library" - "React Data Table" - "React DataGrid Component" - "React Grid" - "React Grid Library" --- # Visualizing FIFA World Cup Stats with React Data Grid [Maithiliy K](https://www.syncfusion.com/blogs/author/maithiliyk) ![Visualizing FIFA World Cup Stats with React Data Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Visualizing-FIFA-World-Cup-Stats-with-React-Data-Grid.jpg) **TL;DR:** Let’s see how to use React Data Grid to display FIFA World Cup stats. The blog covers creating a React app, installing Syncfusion packages, adding CSS references, and viewing the data in the Grid. We’ll also enhance the data with visuals and tooltips. The FIFA World Cup, held every four years, is the pinnacle of global soccer, attracting over a billion viewers. This tournament unites fans worldwide, breaking TV viewership records and creating unforgettable moments that captivate audiences across the globe. In this blog, we’ll use [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid) to display comprehensive FIFA World Cup records and statistics, covering the tournament’s entire history from 1930 to 2022. The FIFA World Cup statistics and data utilized in this app are sourced from [Wikipedia](https://en.wikipedia.org/wiki/FIFA_World_Cup_records_and_statistics) . We sincerely thank **Wikipedia** for its invaluable resource, which has been instrumental in preparing this demonstration. ## Building your app environment ### Prerequisites - **Node.js**: This app is developed using [Node.js 16.0](https://nodejs.org/en/blog/release/v16.0.0) . Ensure you have installed this version. - **React packages**: If you haven’t installed the React packages or your Node.js version is older than 16, run the following command to install them.``` npm install -g create-react-app ``` ### Step 1: Create a React app Let’s create a React app in a TypeScript environment and install the Syncfusion React Data Grid components from the React Grid Library. Refer to the following command. ``` npx create-react-app my-app cd my-app npm start ``` Or ``` yarn create react-app my-app cd my-app yarn start ``` Run the following command to set up a React app in a TypeScript environment. ``` npx create-react-app my-app --template typescript cd my-app npm start ``` Besides using the**npx package runner tool**, you can also create an app using the ** npm init**command. To begin with the ** npm init** command, upgrade the npm version to ** npm 6+**. ``` npm init react-app my-app cd my-app npm start ``` **Note:** In the following demo, we’ll create the app in a TypeScript environment. ### Step 2: Adding Syncfusion React packages Once you have created the React app, installing the required Syncfusion React component packages is next. All Syncfusion React (Essential JS 2) packages are available on the [NPM](https://www.npmjs.com/~syncfusionorg) public registry. You can choose and install the components you need for your project. In this demo, we’ll use the following Syncfusion React components to visualize the FIFA World Cup statistics: - [Data Grid](https://ej2.syncfusion.com/react/documentation/grid/getting-started) - [ToolTip](https://ej2.syncfusion.com/react/documentation/tooltip/getting-started) To install these components, run the following commands: ``` npm install @syncfusion/ej2-react-grids –save npm install @syncfusion/ej2-react-popups –save ``` If installing the packages individually seems tedious, you can copy and paste the following code directly to your **package.json** dependencies section. **[package.json]** ``` { "name": "quickstart", "version": "0.1.0", "private": true, "dependencies": { "@syncfusion/ej2-react-grids": "*", "@syncfusion/ej2-react-popups": "*", . . . } ``` ### Step 3: Adding CSS reference Now, we should import the required [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme#reference-themes-in-the-react-application) based on the components used. The React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) available in the installed packages. Adapting the React components based on the app style is quite simple by referring to any of the built-in themes. Since we are using many components to make this app, we are going to refer to the common CSS file, which contains all the component CSS through CDN. **[./public/index.html]** ``` ``` Alternatively, you can reference the CSS for individual components from the node module. In this example, we’ve referenced the React components CSS from the node module in the **App.css** file. [**./src/App.css**] ``` @import '../node_modules/@syncfusion/ej2-base/styles/ material3.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material3.css'; @import "../node_modules/@syncfusion/ej2-react-grids/styles/ material3.css"; ``` ## Ensuring seamless app implementation Once you have completed all the initial setup, you can begin implementing the app step by step. ### Step 1: Showcasing FIFA World Cup stats using React Data Grid Let’s use the React Data Grid to visualize the comprehensive details of the FIFA World Cup tournament. This includes the year it was held, the host country, the champion team, the top goal scorer, the best player award recipient, and the winning team’s coach. These details are enhanced with visual elements such as country flag images and football icons. Additionally, hyperlinks are provided for the names of the players and coaches, allowing for easy access to more information about them. The React Data Grid’s [column template](https://ej2.syncfusion.com/react/documentation/grid/columns/column-template) feature is used to achieve this detailed presentation. ![Showcasing FIFA World Cup stats using the React Data Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Showcasing-FIFA-World-cup-stats-with-React-Data-Grid.png) Showcasing FIFA World Cup stats using React Data Grid The [column template](https://ej2.syncfusion.com/react/demos/#/fluent2/grid/column-template) feature allows us to add custom text, images, and other components within the grid cells, allowing for a rich and interactive information display. In this demo, we’ve enabled the following Data Grid features: - [Sticky header](https://ej2.syncfusion.com/react/demos/#/fluent2/grid/sticky-header) : This feature lets you keep column headers fixed while scrolling, ensuring they always remain visible. Refer to the [documentation](https://ej2.syncfusion.com/react/documentation/grid/scrolling/scrolling#sticky-header) for more details. - [Text wrap](https://ej2.syncfusion.com/react/demos/#/fluent2/grid/auto-wrap) : This feature allows the grid’s cell content to wrap to the next line when it exceeds the specified cell width boundary. Refer to the [documentation](https://ej2.syncfusion.com/react/documentation/grid/cell#autowrap-the-grid-content) for more details. - [Row spanning](https://ej2.syncfusion.com/react/demos/#/fluent2/grid/row-spanning) : In this demo, the **not awarded** value repeats in the ** Player of the Season Award** column from 1930 to 1974. To avoid displaying the same value redundantly, we merge cells using the Grid row spanning feature. This feature enables us to merge two or more cells in a row into a single cell, which is useful for presenting information spanning multiple rows while reducing repetition. Refer to the [documentation](https://ej2.syncfusion.com/react/documentation/grid/row/row-spanning) for more details. - **Preventing the grid selection and hovering**: In this demo, we’ll disable the grid selection and hovering features by setting the properties [allowSelection](https://ej2.syncfusion.com/react/documentation/api/grid/#allowselection) and [enableHover](https://ej2.syncfusion.com/react/documentation/api/grid/#enablehover) to false. For further details, refer to the [documentation](https://ej2.syncfusion.com/react/documentation/grid/selection/selection) . - [Grid lines](https://ej2.syncfusion.com/react/demos/#/fluent2/grid/grid-lines) : This feature enhances readability by separating cells with horizontal and vertical lines. To enable grid lines, you can set the [gridLines](https://ej2.syncfusion.com/react/documentation/api/grid/#gridlines) property. For more details, refer to the [documentation](https://ej2.syncfusion.com/react/documentation/grid/cell#grid-lines) . ### Step 2: Display additional information with React ToolTip The React **Tooltip** displays a pop-up containing information or a message when you hover, click, focus, or touch an element. The information displayed in the Tooltip can include simple text, images, hyperlinks, or custom templates. On mobile devices, you need to tap and hold the target elements to display the tooltip. In this demo, we’ll use the tooltip to display additional information about the country, best player, coach, and champion team. Refer to the following images. ![Tooltip displaying FIFA World Cup champion details in React Data Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Displaying-the-tooltip-when-hovering-over-Italy-country-from-the-Organizer-column.png) Tooltip displaying FIFA World Cup champion details in React Data Grid ![Displaying the React Data Grid tooltip when hovering over Brazil from the Champions column](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Displaying-the-tooltip-when-hovering-over-Brazil-from-the-Champions-column.png) Displaying tooltip when hovering over Brazil from the Champions column ![Displaying the React Data Grid tooltip when hovering over Luiz Felipe Scolari from the Winning Coach column](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Displaying-the-tooltip-when-hovering-over-Luiz-Felipe-Scolari-from-the-Winning-Coach-column.png) Displaying the tooltip when hovering over Luiz Felipe Scolari from the Winning Coach column ![Displaying React Data Grid tooltip when hovering over the most goal scorer Hristo Stoichkov from the Most scorer(s) column](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Displaying-tooltip-when-hovering-over-the-most-goal-scorer-Hristo-Stoichkov-from-the-Most-scorers-column.png) Displaying tooltip when hovering over the most goal scorer Hristo Stoichkov from the Most scorer(s) column ![Displaying the React Data Grid tooltip when hovering over Lionel Messi from the Player of Season Award column](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Displaying-tooltip-when-hovering-over-player-of-session-Lionel-Messi-from-the-Player-of-season-Award-column.png) Displaying tooltip when hovering over Lionel Messi from the Player of Season Award column ## GitHub reference Check out the complete code examples for [visualizing FIFA World Cup stats using React Data Grid on GitHub](https://github.com/SyncfusionExamples/react-grid-use-case-tutorial-samples/tree/master/FIFA-STATS) . ## Run the app To run the app, execute the following command in your command prompt. ``` npm start ``` ## Common errors in React app | Error | Solution | | --- | --- | | Module not found: Can’t resolve ‘module’ | This indicates that the required module is either not installed properly or is missing. Therefore, we recommend ensuring that all dependency modules are installed correctly by executing either the npm install or yarn install command after deleting the package.lock.json file. | | npm ERR! ENOENT: no such file or directory | This error suggests that the specified directory or file is unavailable on your machine or permission for execution was denied. To resolve this, ensure that the file exists and that proper permissions are enabled to access the file or directory. | | npm ERR! Failed at the [email protected] start script | This error occurred due to a problem with the start script defined in your package.json file. To run your app, it’s important to validate and execute the start script correctly. Additionally, ensure that all dependencies are installed properly. | | npm ERR! EADDRINUSE: Address already in use | This error indicates that the port number has already been used. You can choose another port or stop the existing running app. | | npm ERR! Invalid package.json | This error indicates a syntax issue in your package.json file. To fix it, ensure all the syntax is correct. | ## Conclusion Thank you for reading! In this blog, we’ve seen how to use the Syncfusion [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid) to visualize the FIFA World Cup comprehensive stats. Like this, you can also use the React Data Grid to visualize your desired data! Feel free to try out the steps mentioned in this blog, and don’t forget to share your thoughts in the comments below! Remember, the Syncfusion Data Grid is accessible not only in React but also in various other platforms, including [Blazor](https://www.syncfusion.com/blazor-components/blazor-datagrid) , ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/grid) , [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid) ), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-data-grid) , [Angular](https://www.syncfusion.com/angular-components/angular-grid) , [Vue](https://www.syncfusion.com/vue-components/vue-grid) , [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid) , [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) , [.NET MAUI](https://www.syncfusion.com/maui-controls/maui-datagrid) , [UWP](https://www.syncfusion.com/uwp-ui-controls/datagrid) , [WinForms](https://www.syncfusion.com/winforms-ui-controls/datagrid) , [WPF](https://www.syncfusion.com/wpf-controls/datagrid) , and [WinUI](https://www.syncfusion.com/winui-controls/datagrid) . It’s a versatile tool for crafting exceptional apps! The existing customers can download the latest version of Essential Studio from the [License and Downloads](https://www.syncfusion.com/account) page. If you are new, try our 30-day [free trial](https://www.syncfusion.com/downloads) to explore our incredible features. Feel free to contact us via our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always happy to assist you! ## Related blogs - [What’s New in React 19?](https://www.syncfusion.com/blogs/post/whats-new-in-react-19) - [How to Update Real-Time Data in React Data Grid?](https://www.syncfusion.com/blogs/post/updating-real-time-data-in-react-grid) - [Easily Create a Hotel Room Booking App with React DataGrid](https://www.syncfusion.com/blogs/post/hotel-room-booking-with-react-grid) - [Enhance Inventory and Billing Management with React Data Grid](https://www.syncfusion.com/blogs/post/manage-inventory-billing-with-react-grid)