With pivot tables, you can make comparisons and create calculations more quickly. You can even create charts to visualize your data.

Creating pivot tables might be intimidating if you're doing it for the first time. But in this article, I’m going to explain everything you need to start creating pivot tables.

It doesn’t end there – I will also show you how to add charts so you can visualize your data.

In addition, the version of Excel you’re using doesn’t matter. You can even create a Pivot table in Excel 2013. In fact, I used Excel 13 to get set for this article.

What We'll Cover

• How to Create a Pivot Table in Excel
  • How to Create Rows and Make Calculations with a Pivot Table
  • How to Create Entirely New Rows with a Pivot Table
• How to Implement Graphical Visualization for a Pivot Table
• Wrapping Up

How to Create a Pivot Table in Excel

To show you how to create a pivot table, I have created a table of some fictional footballers showing:

• their names
• the number of matches they've played
• their assists and goals

I will be creating extra rows of Goal Contributions and Goal Ratio, also called Goals per Game.

In football (Soccer), goal contributions is the total number of goals and assists. The goal ratio is derived when the number of goals is divided by the number of matches played.

To create a pivot table, follow the steps below:

Step 1: In the menu bar, click “Insert” and select “Pivot Table”:

Step 2: Leave everything as it is and select “OK”:

You should use a new worksheet so you can have a dedicated sheet for your pivot table.

The next interface you’ll see looks like this:

You’ll be working with the part where you see “PivotTable Fields”. You will even see the columns of your table there.

How to Create Rows and Make Calculations with a Pivot Table

This is the part where you can create rows, columns, and make calculations.

To create rows for your pivot table, drag one of the rows in the existing table to the part where you see “ROWS”.

For instance, I want to create a row for the pivot table with the name row of the original table. That means I have to drag the name row to the ROWS area:

You can see I’ve created a row with the name row of the original table.

To make calculations easily, you can use the “VALUES” area.

I want to see the number of goals scored by each player. So, I’ll drag the “Goal scored” row to the “VALUES” area:

You can see I can directly visualize the number of goals scored by each footballer.

You can also make other calculations in the Values area. Just click the dropdown in front of the column right there and select “Value Field Settings…”:

I want to see the highest goal scored instead of the total goals scored by all the players. So I’ll select “MAX” and click “OK”:

Now I can see the maximum goals scored instead of the total of all goals scored:

How to Create Entirely New Rows with a Pivot Table

Remember I said I would create extra rows of Goal Contributions and Goal Ratio, also called Goals per Game? So, let’s do it.

I need the Assists Created and Goal Scored rows to calculate goal contributions. So, I’ll make sure both of them are in the Values area:

Now, I’ll make sure the “Analyze” tab is selected, click “Fields, Items, & Sets”, then select “Calculated Field…”:

The next interface you’ll see looks like this:

Here, I’ll do three things:

• type the name of the row in the name field
• write the formula – in this case, “Assists Created + Goal Scored”
• click Add and OK

Now, I have successfully created the Goal Contributions row:

To create the Goal Ratio, I have to make sure the matches played row is in the VALUES area:

The formula I’ll use is Goal Scored / Matches played. So, I’ll implement calculated fields again:

I can now see the goal ratio of each footballer:

How to Implement Graphical Visualization for a Pivot Table

It’s nice to create a pivot table and implement calculations easily, but it’s nicer to see the graphical representation of that pivot table in a chart.

To represent the pivot table in a chart:

Step 1: Make sure the “Analyze” tab is selected, then select PivotChart:

Step 2: Select the type of chart you want on the right. It could be a column, pie chart, or bar chart. Also, select the format in the upper part. It could be 2D or 3D.

Click OK when you are satisfied.

That’s the chart representing the data.

Wrapping Up

Pivot tables are one of the most powerful features of Excel. If you have large datasets you have to work with, a pivot table can save you a lot of time when it comes to analysis and visualization.

Pivot tables are nice, but being able to create different types of charts to represent the data is really helpful, too.

I hope this article helps you create a pivot table and charts for the data you’re working with.

If you find this article helpful, don’t hesitate to pass it along to others.

HTML Tables are simple to use for rendering small amounts of data. But they can be hard for users to work with when they display a lot of data.

Features like sorting, filtering, and pagination make it easier to work with many rows of data. We can easily implement those features by migrating from an HTML Table to a JavaScript Data Grid component.

In this post we will use the free community edition of AG Grid JavaScript Data Grid to convert from a long static HTML table to an easy to use interactive Data Grid. The amount of JavaScript we need to do this is minimal and very simple.

We will build the example code in three steps:

• Render a static list of Todo Items data in an HTML Table.
• Load a list of Todo Items from a REST API and render in the table.
• Convert the HTML Table to a Data Grid to allow sorting, filtering and pagination.

How to Render Data with HTML Tables

The first version of our application will allow us to create the basic page structure and make sure we are rendering the right data for the user.

I create a simple index.html file as shown below:

<!DOCTYPE html>
<html>

<head>
    <title>Table Example</title>
</head>

<body>

    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        td,
        th {
            border: 1px solid #000000;
            text-align: left;
            padding: 8px;
        }
    </style>

    <h1>TODO List</h1>

    <div id="data-table">
        <table id="html-data-table">
            <tr>
                <th>userId</th>
                <th>id</th>
                <th>title</th>
                <th>completed</th>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>My todo 1</td>
                <td>false</td>
            </tr>
        </table>    
    </div>

</body>

</html>

This will render a single Todo Item in a table.

Single Todo Item Shown in an HTML Table

Here is the example Static HTML Table Page.

The table is styled to have a width of 100% of the page using width:100% and the border lines between cells in the table have been styled to show as one line with border-collapse: collapse.

Without the border-collapse value the table would look like the image below:

Table Styled without border-collapse

Benefits of Short HTML Tables

HTML Tables are a very fast way to render small amounts of data in a tabular form on a page.

Tables require styling because the default styling of a table varies between browsers and is often shown with no borders making the data hard to read.

At the moment, our list of Todo Items is statically coded into the page. For the next step we will fetch the list from a REST API using JavaScript.

How to Read JSON from an API to Render in an HTML Table

Since we will be loading the data from an API, I won't hard code any data in the table. To support dynamic loading, I simply remove the line of data from the table because I'm going to create the data rows using JavaScript:

    <div id="data-table">
        <table id="html-data-table">
            <tr>
                <th>userId</th>
                <th>id</th>
                <th>title</th>
                <th>completed</th>
            </tr>
        </table>    
    </div>

I will add the JavaScript in the index.html page immediately before the terminating body tag.

    <script type="text/javascript" charset="utf-8">
    </script>
</body>

To start, I will write the code that reads the data.

I will use the "{JSON} Placeholder" REST API application for this demonstration. By making a GET request on the URL https://jsonplaceholder.typicode.com/todos we will receive a JSON response which is a list of Todo Items.

You can try it for yourself without JavaScript by clicking on the link above.

The easiest way to make a GET request on the API is by using the fetch function built into JavaScript.

    <script type="text/javascript" charset="utf-8">

        fetch('https://jsonplaceholder.typicode.com/todos')
            .then(function (response) {
                return response.json();
            }).then(function (apiJsonData) {
                console.log(apiJsonData);
            })

    </script>
</body>

To explain the above code, I'll describe it in sections below:

• Issue a GET request to https://jsonplaceholder.typicode.com/todos

fetch('https://jsonplaceholder.typicode.com/todos')

• Then when the request is finished, convert the response to a JavaScript Object – in our case this will be an array containing all the Todo Items.

.then(function (response) {
    return response.json();
})

• Then write the JavaScript object to the console

.then(function (apiJsonData) {
    console.log(apiJsonData);
})

With this code in our application, we won't see anything in the table, but we would see the array rendered in the Browser Dev Tools Console where we could view the data.

Data shown when console.log used

The API call returns 200 items, and each item is a Todo Object:

  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  }

Our next step is to render the data in the table:

    <script type="text/javascript" charset="utf-8">

        fetch('https://jsonplaceholder.typicode.com/todos')
            .then(function (response) {
                return response.json();
            }).then(function (apiJsonData) {
                console.log(apiJsonData);
                renderDataInTheTable(apiJsonData);
            })

        function renderDataInTheTable(todos) {
            const mytable = document.getElementById("html-data-table");
            todos.forEach(todo => {
                let newRow = document.createElement("tr");
                Object.values(todo).forEach((value) => {
                    let cell = document.createElement("td");
                    cell.innerText = value;
                    newRow.appendChild(cell);
                })
                mytable.appendChild(newRow);
            });
        }
    </script>
</body>

The renderDataInTheTable function finds the table in the DOM so that we can append new rows to it, then loops over all the Todo Items returned from the API call.

For each Todo Item the code creates a new tr element, then adds each value in the Todo Item to the table as a td element.

let newRow = document.createElement("tr");
Object.values(todo).forEach((value) => {
    let cell = document.createElement("td");
    cell.innerText = value;
    newRow.appendChild(cell);
})

When the fetch and renderDataInTheTable code is added to our application, and the page loads, we will see that the HTML table now has all 200 Todo Items rendered in the table.

Dynamically loaded todo list

Here is the example Dynamic HTML Table Page.

Benefits and Disadvantages of Long HTML Tables

HTML Tables are an easy way to render data on a page but are not very usable for long lists of data.

The data items can be hard to find, although the user can search the data by using the built in 'find in the page' functionality of the browser.

By rendering in an HTML table, our users have no way to sort the data, or filter it to show only completed Todo Items. We would have to add extra code to our application to implement sorting and filtering functionality.

HTML Tables will automatically grow as more rows are added to the table. This can make them harder to use in an application when a lot of data has been added.

When we add a lot of data we probably want to have pagination to restrict the table of data to show only a certain number of rows and allow the user to click through to the next page to see more items. This, again, is functionality we would have to write extra code to handle.

When our application gets to the point that we need more user interaction, we should consider using a Data Grid component.

We can use it to add extra functionality like:

• sorting
• filtering
• column resizing
• pagination

Data Grid Components and Libraries

There are many free Data Grid Components available, but most of them are framework specific so they require coding using either React, Angular, or Vue.

I'm using AG Grid for this example because the free version can be used with JavaScript, TypeScript, React, Angular or Vue. The "AG" stands for Agnostic, meaning can be used with any framework.

When you learn to use AG Grid in one framework, the same API is available for other frameworks, making your knowledge transferrable to other projects.

The free version of AG Grid can be used in commercial applications, so if you manage to expand the demo application shown here into a commercial Todo List Management Application, you'll still be able to use AG Grid for free. Many commercial applications have been built using the free version of AG Grid.

In addition, AG Grid is frequently sought as a skill in job applications, so is worth experimenting with.

The commercial version of AG Grid has extra features like Excel Exporting and creating Charts, but we don't need any of that functionality in this demo.

Using a Data Grid means that we configure the Data Grid, give it the data to render, and the Grid handles all the other functionality like sorting, filtering, and pagination.

We can convert our existing code to use AG Grid with just a few changes.

How to Add AG Grid JavaScript and CSS

AG Grid is a library so we will include the JavaScript required.

If you are using build tools like npm, then various npm install commands are listed in the Getting Started with AG Grid documentation.

We are using plain JavaScript, so we can include the script in our head section.

<head>
    <title>Data Grid Example</title>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
</head>

This includes the community edition of AG Grid and the CSS required to render the Grid properly.

Our data-table div no longer needs to have any table element:

    <div id="data-table" class="ag-theme-balham">
    </div>

AG Grid will create the HTML for the Data Grid when we set it up. We add the class to use an AG Grid theme. In this example we are using the theme ag-theme-balham.

AG Grid requires setting a width and height for the div. I chose to add this as the style section in the code:

    <style>
        #data-table {
            height: 500px;
            width: 100%;
        }
    </style>

The grid will be shown as 500 pixels high and fill 100% width of the screen. This replicates the basic styling we had with the HTML table. But it also shows one of the benefits of using a Data Grid. The size of the table rendered can be easily controlled and scroll bars will be added automatically as necessary by the Grid itself.

How to Configure AG Grid and Render Data

The script section of the code changes because we need to:

• Configure the data grid.
• Create a new data grid using the configuration.
• Fetch the data and add it to the grid.

I'll show the initial amended script section below and then explain it in the following paragraphs.

    <script type="text/javascript" charset="utf-8">

        const columnDefs = [
            { field: 'userId' },
            { field: 'id' },
            { field: 'title' },
            { field: 'completed' },
        ];

        const gridOptions = {
            columnDefs: columnDefs,
            onGridReady: (event) =>{renderDataInTheTable(event.api)}
        };

        const eGridDiv = document.getElementById('data-table');
        new agGrid.Grid(eGridDiv, gridOptions);

        function renderDataInTheTable(api) {
            fetch('https://jsonplaceholder.typicode.com/todos')
                .then(function (response) {
                    return response.json();
                }).then(function (data) {
                    api.setRowData(data);
                    api.sizeColumnsToFit();
                })
        }
    </script>

A Data Grid is data- and configuration-driven – we don't have to write much code in order to create a functional Data Grid.

First we create an array of Column Objects which define the columns in the Data Grid. These columns map on to the data.

The data that we are receiving from the API call has four properties: "userId", "id", "title" and "completed":

  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  }

To render these in the Data Grid as columns, we create an Object with a field property where the value is the name of the property in the Data Object.

        const columnDefs = [
            { field: 'userId' },
            { field: 'id' },
            { field: 'title' },
            { field: 'completed' },
        ];

Next we create the gridOptions object. This configures the Data Grid:

        const gridOptions = {
            columnDefs: columnDefs,
            onGridReady: (event) =>{renderDataInTheTable(event.api)}
        };

The columnDefs property is assigned the array of Column Objects that we defined earlier.

The onGridReady property is assigned a function which will call the renderDataInTheTable function when the grid has been created and rendered in the DOM (that is, when the grid is ready).

To add the grid to the page, we find the div element which will contain the grid, then instantiate a new AG Grid object for that element and with the options we configured:

        const eGridDiv = document.getElementById('data-table');
        new agGrid.Grid(eGridDiv, gridOptions);

The function to fetch the data and render the data in the grid is much the same fetch code that we used for the dynamic HTML table. The difference is that the renderDataInTheTable function receives an AG Grid Api object as a parameter, allowing us to call AG Grid functionality to set the row data and size the columns to fit the grid:

        function renderDataInTheTable(api) {
            fetch('https://jsonplaceholder.typicode.com/todos')
                .then(function (response) {
                    return response.json();
                }).then(function (data) {
                    api.setRowData(data);
                    api.sizeColumnsToFit();
                })
        }

When this code runs, we will have basically replicated the same functionality of the dynamic HTML table, but now all the data is shown in a Data Grid with a scroll bar.

To receive the benefits of using a Data Grid and allow the user to sort, filter, and navigate through the data, we only have to amend the configuration.

How to Implement Sorting, Filtering, and Pagination

Here's what we've configured in the Data Grid so far:

• which fields from the data to display
• what data to use

To add sorting, filtering, resizable columns, and pagination, we amend the gridOptions configuration:

        const gridOptions = {

            defaultColDef: {
                sortable: true,
                filter: 'agTextColumnFilter',
                resizable: true
            },

            pagination: true,

            columnDefs: columnDefs,
            onGridReady: (event) =>{renderDataInTheTable(event.api)}
        };

We can configure columns in AG Grid individually by adding additional properties to the columnDefs objects. Or if the same functionality is required by default in all columns we can configure the defaultColDef.

Here we configure it to be sortable, filterable, and resizable:

            defaultColDef: {
                sortable: true,
                filter: 'agTextColumnFilter',
                resizable: true
            },

The default filter we defined for all the columns is the text filter.

To add automatic pagination to the grid, we add the pagination: true property and AG Grid will automatically paginate the data for us.

Data Grid with Sorting, Filtering and Pagination

User Friendly Data Grid

With the above code we have created a User Friendly Data Grid that dynamically fetches the data and adds it to a Data Grid which supports sorting, filtering, and pagination.

Here is the example Data Grid HTML Page:

<!DOCTYPE html>
<html>

<head>
    <title>Data Grid Example</title>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
</head>

<body>
    <style>
        #data-table {
            height: 500px;
            width: 100%;
        }
    </style>

    <h1>TODO List</h1>

    <div id="data-table" class="ag-theme-balham">
    </div>

    <script type="text/javascript" charset="utf-8">

        const columnDefs = [
            { field: 'userId' },
            { field: 'id' },
            { field: 'title' },
            { field: 'completed' },
        ];

        const gridOptions = {

            defaultColDef: {
                sortable: true,
                filter: 'agTextColumnFilter',
                resizable: true
            },

            pagination: true,

            columnDefs: columnDefs,
            onGridReady: (event) =>{renderDataInTheTable(event.api)}
        };

        const eGridDiv = document.getElementById('data-table');

        new agGrid.Grid(eGridDiv, gridOptions);

        function renderDataInTheTable(api) {
            fetch('https://jsonplaceholder.typicode.com/todos')
                .then(function (response) {
                    return response.json();
                }).then(function (data) {
                    api.setRowData(data);
                    api.sizeColumnsToFit();
                })
        }
    </script>
</body>
</html>

Number Filters

Since the userId and id columns are numeric, we could make then use a number filter by amending the columnDefs:

        const columnDefs = [
            { field: 'userId', filter: 'agNumberColumnFilter'},
            { field: 'id', filter: 'agNumberColumnFilter'},
            { field: 'title' },
            { field: 'completed' },
        ];

Here is the example Data Grid Number Filters HTML Page.

There are a lot of configuration options for columns listed in the AG Grid Documentation, for example configuring the width, style, and making the cells editable.

Benefits of a Data Grid

For many web sites, a simple HTML table will be a perfectly sensible way to render tabular data. It's fast and easy to understand, and with a little CSS the table can look good for your users.

When your pages become more complex, render more data, or require more interactivity for the user, then it starts to make more sense to use a Data Grid component or library.

Data Grids provide much of the functionality your users need, without having to write a lot of code. In the example presented in this post, we moved from a dynamic table which read the data from an API, to a Data Grid reading from an API with sorting, filtering, pagination, and column resizing.

This is a lot of extra functionality, but our HTML code was the same length and the JavaScript we added was less complicated because the Data Grid did all the work of rendering the data.

Data Grids can handle hundreds of thousands of rows and update quickly so they are often used in real time financial trading systems with prices in cells updating every few milliseconds.

If you are using React, then in addition to AG Grid you could look at Material UI or React Table. React Table is a 'table' rather than a Data Grid so it requires a little more code initially to render the table.

Both Material UI and React Table are only available for React. AG Grid is framework agnostic and will work with JavaScript, TypeScript, React, Angular, and Vue.

The source code for this post can be found in this Github repo in the folder docs/html-table-to-data-grid.

In this article, we'll discuss why you should use the Data Grid in Material UI in your project. And then we'll also go through how to install and set up the Data Grid, consume and integrate a RESTful API, and enable pagination as well as sorting and filtering.

Table of Contents

• Introduction to the Data Grid

• Why use the Material UI Data Grid

• Installation and Setup of React and Material UI Data Grid

• API Integration and Consumption

• Display API Results in Material UI Data Grid

• Conclusion

Watch the video version of this article below, or on my YouTube channel:

Introduction to Data Grid

According to the Material UI documentation, Data Grid is a

"fast and extendable React data table and React data grid. It's a feature-rich component available in MIT or Commercial versions".

Basically, Data Grid in Material UI comes with some features like editing, sorting, filtering, updating, pagination, exports and so on by default.

The team also has future plans of implementing additional features like Excel export, Range selection, Group, Pivot, Aggregation.

For the purpose of this tutorial, we will be implementing some of the features of the Data Grid with a public REST API called JSONPlaceholder

Why use the Material UI Data Grid

There are some important reasons you might want to use the Material UI Data Grid:

• Accessibility

• User Interaction

• Data Presentation

Accessibility

The Data Grid offers accessibility features such as cell highlighting. That is, every cell is accessible using the keyboard.

It also provides additional features such as keyboard navigation by using certain keys on the keyboard to change the focus of the table cells, along with density properties to determine the row and column height on the table.

User Interaction

In terms of interaction, the Data Grid provides an inbuilt feature such as row selection by default. This allows the user to select certain rows on mouse click or using certain keyboard shortcuts.

The Data Grid in Material UI supports single and multiple row selection, ability to disable selection certain rows or all rows, checkbox selection and much more.

Data Presentation

The Data Grid provides an inbuilt feature that allows data to be exported to CSV format.

Also, data can be manipulated by clicking a column header. This will trigger the sorting and filtering functionalities.

Another basic feature that comes by default is scrolling, which does not occur in a normal table by default.

How to Install and Setup React and Material UI Data Grid

To create a new project in React, you need to have Node.js installed. This will give us access to npm in our terminal. We can then install and use Create React App using npm to create our project, by running the command below:

npm i create-react-app

The next step is to create a new React project from the terminal by running the command below:

npx create-react-app data-grid 
cd data-grid 
npm start

Above we created a new project called data-grid. Then we navigated into the newly created project directory and started the project with npm.

By default, our project will be running on localhost:3000 in the browser.

Finally, we need to install two packages which are Material UI and the Data Grid using the command below:

npm install @mui/x-data-grid @mui/material

API Integration and Consumption

To integrate our API, we need to create a new file and folder in our src directory that's created for us when we generated our project with Create-React-App. We will call this new folder Table and the file will be called DataGrid.js.

In the end, our folder structure should look something like this:

> src 
    > Table 
        > DataGrid.js 
.gitignore 
package-lock.json 
package.json 
README

In the DataGrid.js file, we will use a functional component. In this functional component, we will implement some of the following default features in React:

• useState hook

• useEffect hook

• The Fetch API

The useState Hook

The useState hook in React is an inbuilt function that helps us track state in a functional component.

The useEffect Hook

The useEffect hook allows us to handle side effects in our functional component. Some of these side effects could include things like updating the DOM, fetching data from a RESTful API, timer events, and so on.

The Fetch API

The Fetch API in JavaScript allows web browsers to make HTTP requests to web servers. The request can be of any APIs that send and receive data in JSON or XML format.

Now that we've explored the concept of hooks and the Fetch API, let's generate a boilerplate functional component in our DataGrid.js file:

import React from 'react'

const DataGrid= () => {
  return (
    <div>

    </div>
  )
}

export default DataGrid

The next step is to consume the REST API from JSON placeholder.

To do that, the first thing we need to do is to import the useState and useEffect hooks:

import React, { useState, useEffect } from 'react'

Then we create a variable using the useState hook:

const [tableData, setTableData] = useState([])

The tableData above serves as a getter, while the setTableData serves as a setter.

Finally, to access our data we will use the useEffect hook and the Fetch API:

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then((data) => data.json())
    .then((data) => setTableData(data))
}, [])
 console.log(tableData)

Above, we can see that inside the useEffect hook, we did three things:

• First, inside the useEffect hook, we used Fetch to consume the JSON placeholder REST API

• Then we converted the response we got into JSON format

• Lastly, we passed the data from our response to the setter we created earlier called setTableData

To be sure we got the right response, we logged the data we got into the console. To see the results in the console, we need to import our DataGrid.js inside our App.js file:

import './App.css';
import DataGrid from './Table/DataGrid';

function App() {
  return (
    <div className="App">
      <DataGrid />
    </div>
  );
}

export default App;

Then we get the result below, which consists of a list of 100 objects in an array:

JSON Data in the Console

How to Display the API Results in the Material UI Data Grid

To display our API results in the Material UI Data Grid, we need to import the Data Grid package into our DataGrid.js file:

import { DataGrid } from '@mui/x-data-grid'

We then set up the configuration for the header section of our Data Grid table:

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 }
]

As you can see above, it is in an array of objects and it contains an id, title and a body, which is in accordance with the results we got from our REST API.

Finally, we bring in the DataGrid component into our return statement:

<div style={{ height: 700, width: '100%' }}>
     <DataGrid
       rows={tableData}
       columns={columns}
       pageSize={12}
     />
   </div>

Above, we have three properties inside the DataGrid component:

• The first one is the rows property. What we did with the row property was to pass in the results we got from our REST API, which is contained in the getter called tableData

• The second property is called columns. This is the array of objects that contains the header of our DataGrid that include the id, title and body.

• The last property is the pageSize. This helps us to set a limit to the amount of data that can be displayed at once. As you can see, we set this to 12 – the rest of the result is then paginated by default.

In the end, our DataGrid.js file should look something like this:

import React, { useState, useEffect } from 'react'
import { DataGrid } from '@mui/x-data-grid'

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 }
]

const DataGrid = () => {

  const [tableData, setTableData] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((data) => data.json())
      .then((data) => setTableData(data))

  }, [])

  console.log(tableData)

  return (
    <div style={{ height: 700, width: '100%' }}>
      <DataGrid
        rows={tableData}
        columns={columns}
        pageSize={12}
      />
    </div>
  )
}

export default DataGrid

The results in the browser should also look like the image we have below:

Data Grid Table Result

One awesome thing to note in the result of our image above is that, we have an out-of-the-box sorting and filtering functionality when we click on the header section(id, title, body) of our data table.

Conclusion

In this article, we learned about DataGrid in Material UI, React Hooks, REST API consumption and much more.

Also, the link to the code of this article can be found on GitHub.

If you enjoyed this article, show your support by subscribing to my YouTube channel where I create awesome tutorials on web development technologies like JavaScript, React, Angular, Node.js, and more.

If you have any feedback or question on this post or other programming related questions, you can find me on Twitter @thecodeangle.

TL;DR

The most popular way to display a collection of similar data is to use tables, but HTML tables have the drawback of being difficult to make responsive.

In this article, I use CSS Grid Layout Module and CSS Properties (and no Javascript) to layout tables that wrap columns depending on screen width, which further changes to a card based on layout for small screens.

For the impatient, look at the following pen for a prototypical implementation.

A Little History of Responsive HTML Tables

Responsive tables aren’t a new topic, and there are many solutions that have already been proposed. “Responsive Table Data Roundup” first published in 2012 by Chris Coyier, has things summarized very neatly (including a 2018 update).

“Really Responsive Tables using CSS3 Flexbox” by Vasan Subramanian shows an idea of wrapping columns, implemented with Flexbox.

Even though many interesting ideas have been proposed, libraries like bootstrap opt for horizontal scrolling for small screens.

As we now have CSS Grid, I think we could have a better common alternative to horizontal scrolling.

HTML Tables

Starting with the basics, a table in HTML is a layout format for displaying collections of items through a matrix of rows and columns. Items are laid out in rows, with the same data attributes in the same columns, with the rows often sorted with one or more sortable attributes. The format gives you a birds-eye view to quickly grasp and examine large quantities of data.

For example, here’s a hypothetical table of purchase order details, that you may see in a purchasing application.

Table of purchase order details

An item, in this case, is a purchase order detail, that has attributes such as part number, part description, etc.

When using HTML tables, the layout of the data is hardcoded as rows and columns (e.g. <tr> and <td>). This may be sufficient for usage by a screen that fits the whole table width, but in reality, this does not apply for the myriad of devices that exist today. In terms of hacks, you can alter the display property of tables and use any layout you can do with CSS in general, but that doesn’t seem semantically correct.

Tables Redefined (= Collection of Items)

Let’s start by redefining how table data should be expressed in HTML.

As stated earlier, since table data is essentially an ordered collection of items, it seems natural to use ordered lists. Also, since tables are often used to supplement textual descriptions, it seems natural to enclose this in a section, but this would depend on the context of how the table data is being used.

<section>
 <ol>
  <!-- The first list item is the header of the table -->
  <li>
   <div>#</div>
   <!-- Enclose semantically similar attributes as a div hierarchy -->
   <div>
    <div>Part Number</div>
    <div>Part Description</div>
   </div>
   ...
  </li>
  <!-- The rest of the items in the list are the actual data -->
  <li>
   <div>1</div>
   <!-- Group part related information-->
   <div>
    <div>100-10001</div>
    <div>Description of part</div>
   </div>
  ...
  </li>
 ...
 </ol>
</section>

Vanilla <div>'s are used to express item attributes since HTML5 does not define an appropriate tag for this. The key here is to express semantically similar attributes as a hierarchy of <div>'s. This structure will be used when defining how the data should be laid out. I will come back to this in the next section on the topic of styling.

As for the actual data inside the <div> element, the first item in the list is the header, and the rest of the items are the actual data.

Now, it’s time to start talking about styling the items with CSS Grid.

Styling Item Collections

The basic idea here is to display all attributes of the item as a normal table, display width permitting. This layout has the luxury of being able to see as many items (rows) as possible.

Full Table

When the width of the display becomes narrower, some attributes are stacked vertically, in order to save horizontal space. The choice of stacking attributes should be based on:

1. Do the attributes make sense when stacked vertically? and,
2. When stacked vertically, does it save horizontal space?

Wrapping Table 1. Start by wrapping columns that need little width, and give the other columns space

Wrapping Table 2. Wrap “Part Description”, to be able to see the description

Wrapping Table 3. Further wrap “Vendor Name”

Wrapping Table 4. Wrap vendor related information under part related information

Wrapping Table 5. Fully wrapped

When the width further shrinks to the size of a mobile device, each item is displayed as a card. This layout has redundancy because the attribute names are repeatedly displayed on each card, and has the least glanceability, but does not compromise usability (e.g. horizontal scrolling, super small text, etc).

Two Column Card Layout

One Column Card Layout

Now let’s dive into the details.

Styling Step 1: Full Table

Here’s a visual summary of how things will be implemented with CSS Grid.

Grid containers

In order to make columns wrap, multiple grid containers are defined as a hierarchy. The red box is a grid container for each row, and the blue box is a container for each column group that wraps.

Let’ s start by setting the list as a grid container by defining a class called .item-container and applying it to the <li>(the red box).

.item-container {
    display: grid;
    grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
}

The number of explicit columns specified with grid-template-columns is nine, which is the number of top-level <div>'s, directly under <li>.

The column’s width is defined in relative length to make the columns wrap. The actual fraction has to be fine-tuned, based on the content.

The columns that don’t wrap are defined in absolute length to maximize width usage for the wrapping columns. In the purchase order details example, the second column is a two-digit Id, so I set the width to double that size of 2 m’s.

Next, we define another grid container called .attribute-container and apply it on all intermediate <div>’s under the list (the blue box).

.attribute-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

The minimum column width for all grid items under .attribute-container is specified with a CSS variable called --column-width-min(more on this later) using the minmax function, with the maximum set to take the rest of the space (e.g. one fraction). Since grid-template-columns are repeated, available horizontal space will be split into the maximum number of columns that could take at least --column-width-min, and the rest of the columns would go to the next line. The column’s width will be stretched if there is excess horizontal space because the repeat is auto-fited.

Styling Step 2: Wrapping Table

Next, --column-width-min needs to be specified independently for each column in order to wrap. Just to be clear, the variables need to be specified in order for the full table to render properly as well. To do this, a class is set for each .attribute-container, and a different --column-width-min is specified for each class scope.

Let’s take a look at the HTML where .part-id is applied,

<div class="attribute-container part-id">
    <div>Part Number</div>
    <div>Part Description</div>
</div>

and the CSS:

.part-id {
    --column-width-min: 10em;
}

This specific grid container will have two columns, as long as the available width is wider than 10em for each grid item (e.g. the grid container is wider than 20em). Once the grid container’s width becomes narrower than 20em, the second grid item will go to the next row.

When we combine CSS properties like this, we need only one grid container .attribute-container, with the details changing where the class is applied.

We can further nest .attribute-containers, to have multiple levels of wrapping with different widths, as in the following exert.

<div class="attribute-container part-information">
    <div class="attribute-container part-id">
        <div class="attribute" data-name="Part Number">Part Number</div>
        <div class="attribute" data-name="Part Description">Part Description
    </div>
    </div>
    <div class="attribute-container vendor-information">
        <div class="attribute">Vendor Number</div>
        <div class="attribute">Vendor Name</div>
    </div>
</div>
.part-information {
    --column-width-min: 10em;
}
.part-id {
    --column-width-min: 10em;
}
.vendor-information {
    --column-width-min: 8em;
}

All of the above is enclosed in the following media query. The actual breakpoint should be selected based on the width necessary when your table is wrapped to the extreme.

@media screen and (min-width: 737px) {
...
}

Styling Step Three: Card Layout

The card layout will look like a typical form with attribute names in the first column and attribute values in the second column.

To do this, a class called .attribute is defined and applied to all leaf <div> tags under the <li>.

.attribute {
    display: grid;
    grid-template-columns: minmax(9em, 30%) 1fr;
}

The attribute names are taken from a custom attribute of the leaf <div> called data-name, for example <div class=”attribute” data-name="Part Number">, and a pseudo-element is created. The pseudo-element will be subject to the grid container’s layout.

.attribute::before {
    content: attr(data-name);
}

The first item in the list is the header and does not need to be displayed.

/* Don't display the first item, since it is used to display the header for tabular layouts*/
.collection-container>li:first-child {
    display: none;
}

And finally, the cards are laid out in one column for mobile devices, but two for screens with a little bit more width, but not enough for displaying a table.

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
...
}
/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

Finishing Notes

Accessibility is an area that wasn’t considered at all and may have some space for improvement.

If you have any ideas or second thoughts, please feel free to comment!

And of course, thanks for reading.