Visualizing FIFA World Cup Stats with React Data Grid

Lucy Muturi - Aug 28 - - Dev Community

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 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. 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. 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
Enter fullscreen mode Exit fullscreen mode

Step 1: Create a React app

To create a React app, you can execute the following command.

npx create-react-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

Or

yarn create react-app my-app
cd my-app
yarn start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 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:

To install these components, run the following commands:

npm install @syncfusion/ej2-react-grids –save
npm install @syncfusion/ej2-react-popups –save
Enter fullscreen mode Exit fullscreen mode

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": "*",
    . . .

}
Enter fullscreen mode Exit fullscreen mode

Step 3: Adding CSS reference

Now, we should import the required themes based on the components used.

The React components come with built-in themes 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]

<link href="https://cdn.syncfusion.com/ej2/25.2.3/fabric.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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 the 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 feature is used to achieve this detailed presentation.

The 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. Showcasing FIFA World Cup stats using the React Data Grid

In this demo, we’ve enabled the following Data Grid features:

  • Sticky header: This feature lets you keep column headers fixed while scrolling, ensuring they always remain visible. Refer to the documentation for more details.
  • Text 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 for more details.
  • 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 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 and enableHover to false. For further details, refer to the documentation.
  • Grid lines: This feature enhances readability by separating cells with horizontal and vertical lines. To enable grid lines, you can set the gridLines property. For more details, refer to the documentation.

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.

Displaying the tooltip when hovering over Italy country from the Organizer column:Displaying the tooltip when hovering over Italy country from the Organizer column

Displaying the tooltip when hovering over Brazil from the Champions column:Displaying the tooltip when hovering over Brazil from the Champions column

Displaying the tooltip when hovering over Luiz Felipe Scolari from the Winning Coach column:Displaying the tooltip when hovering over Luiz Felipe Scolari from the Winning Coach column

Displaying the tooltip when hovering over the Hristo Stoichkov from the Most scorer(s) column:Displaying tooltip when hovering over the most goal scorer Hristo Stoichkov from the Most scorer(s) column

Displaying the tooltip when hovering over Lionel Messi from the Player of Season Award column:Displaying the 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.

Run the app

To run the app, execute the following command in your command prompt.

npm start
Enter fullscreen mode Exit fullscreen mode

Common errors while executing the 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 project-name@0.1.0 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 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 DataGrid is accessible not only in React but also in various other platforms, including Blazor, ASP.NET (Core, MVC), JavaScript, Angular, Vue, Xamarin, Flutter, .NET MAUI, UWP, WinForms, WPF, and WinUI. 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 page. If you are new, try our 30-day free trial to explore our incredible features.

Feel free to contact us via our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
O'zgaruvchiga nom berish va qiymat berish

tutorial, cpp, beginners, programming
Image
Setw va Setfill
Image
Test Post
Image
//Комментарий C++
Image
📊Power BI: Dashboard Básico

powerbi, analisededados, braziliandevs, beginners
Image
panduan mendapatkan bandar slots online paling dipercaya serta memberi keuntungan
Image
round функция.

cpp, beginners, programming
Image
GUIDE to Write Captivating Blog Posts That Keep Readers Hooked
Image
Top Paid and Free Image Generators
Image
10 Golden Tips for Front-End Developers That Will Transform Your Skills and Your Work! 🔥💻

frontend, webdev
Image
Webdev & AI Weekly News

webdev, ai, nextjs, news
Image
20 Things You Need To Be Educated About Accident Lawyer Dallas
Image
Lawsuit Asbestos Tips From The Best In The Industry
Image
Argumen Orang -orang Pengin Main Judi Online
Image
What Is The Reason? Key Spare Is Fast Becoming The Most Popular Trend In 2023?
Image
When and how to load balance WebSockets at scale

webdev, pubsub, architecture
Image
(Instant Cancel 1-844-949-8748) How much time do I have to cancel a Royal Caribbean cruise?
Image
How to Encrypt a USB drive Using Cryptsetup with LUKS on Linux

linux, encryption, ubuntu, opensource
Image
Type casting

cpp, code, typecasting, beginners
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player