Introduction
Material UI V5 is a popular, open-source library that provides pre-built UI components, themes, and styles for building user interfaces with React. Data tables are a common component used in web development to display data in a tabular format. In this article, I’ll show you how to use Material UI V5 to create stylish and functional data tables for your web applications.
Getting Started with Material UI V5
Before we dive into creating data tables, let’s first set up a new project with Material UI V5. To get started, we’ll need to install the Material UI V5 library through npm. Open up your terminal or command prompt and navigate to your project’s directory. Then, run the following command:
npm install @mui/material @emotion/react @emotion/styled
Once the installation is complete, we can set up a new project with Material UI V5. Create a new file called App.js
and add the following code:
import React from 'react';
import { Button } from '@mui/material';
function App() {
return (
<div>
<Button variant="contained">Click me</Button>
</div>
);
}
export default App;
In this example, we’ve imported the Button
component from Material UI V5 and used it in our App
component. With this starter code in place, we should see a basic button rendered on the page.
Creating Data Tables with Material UI V5
Now that we have our project set up with Material UI V5, let’s move on to creating data tables. Material UI V5 provides several components that can be combined to create a functional and attractive data table.
Choosing the Appropriate Components
The Table
component is the core component for creating data tables in Material UI V5. It provides the table structure and basic functionality such as sorting and pagination. We’ll also need to use the TableBody
, TableCell
, and TableRow
components to display the actual data in the table.
Setting up Data Sources
Before we can display data in our data table, we need a source of data. For this example, we’ll create an array of objects containing some sample data. Add the following code to your App
component:
const rows = [
{ id: 1, name: 'John Smith', email: '[email protected]', phone: '123-456-7890' },
{ id: 2, name: 'Jane Doe', email: '[email protected]', phone: '555-555-5555' },
{ id: 3, name: 'Bob Johnson', email: '[email protected]', phone: '555-123-4567' },
];
In this example, we’ve created an array of three objects, each representing a row of data in our table. Each object has an id
property and several other properties representing the fields we want to display in our table.
Configuring Tables with Basic Functionality
With our data source set up, we can now create our data table. Replace the code in your App
component with the following:
import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
const rows = [
{ id: 1, name: 'John Smith', email: '[email protected]', phone: '123-456-7890' },
{ id: 2, name: 'Jane Doe', email: '[email protected]', phone: '555-555-5555' },
{ id: 3, name: 'Bob Johnson', email: '[email protected]', phone: '555-123-4567' },
];
function App() {
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Email</TableCell>
<TableCell>Phone</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.email}</TableCell>
<TableCell>{row.phone}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
export default App;
In this example, we’ve imported the necessary components from Material UI V5 and used them to create a simple data table. Inside the Table
component, we’ve created a TableHead
component with the column headers for our table. Inside the TableBody
component, we’ve used the map
function to iterate over our rows
array and create a <TableRow>
component for each row of data. Inside each TableRow
, we’ve used <TableCell>
components to display the data for each column.
Customizing Data Tables with Sorting, Filtering, and Pagination
Material UI V5 provides several built-in features that allow us to enhance our data tables with sorting, filtering, and pagination. Let’s take a look at how we can add these features to our table.
Sorting
To add sorting functionality to our table, we’ll need to use the TableSortLabel
component. This component displays a clickable label that allows users to sort the table by a particular column. Add the following code to your App
component, after the TableHead
component:
const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('name');
const handleSortRequest = (property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
function EnhancedTableHead(props) {
const { order, orderBy, onRequestSort } = props;
const createSortHandler = (property) => (event) => {
onRequestSort(property);
};
return (
<TableHead>
<TableRow>
<TableCell>
<TableSortLabel
active={orderBy === 'name'}
direction={orderBy === 'name' ? order : 'asc'}
onClick={createSortHandler('name')}
>
Name
</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel
active={orderBy === 'email'}
direction={orderBy === 'email' ? order : 'asc'}
onClick={createSortHandler('email')}
>
Email
</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel
active={orderBy === 'phone'}
direction={orderBy === 'phone' ? order : 'asc'}
onClick={createSortHandler('phone')}
>
Phone
</TableSortLabel>
</TableCell>
</TableRow>
</TableHead>
);
}
function App() {
const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('name');
const handleSortRequest = (property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
return (
<TableContainer component={Paper}>
<Table>
<EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleSortRequest} />
<TableBody>
{rows.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.email}</TableCell>
<TableCell>{row.phone}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
export default App;
In this example, we’ve created a new component called EnhancedTableHead
that wraps our existing TableHead
component. Inside this component, we’ve used TableSortLabel
components to create clickable labels for each column header. When a user clicks on a label, the handleSortRequest
function is called with the property that corresponds to the clicked label. This function then sets the orderBy
and order
states appropriately. Finally, we pass these states and the handleSortRequest
function down to our EnhancedTableHead
component and use them to update our TableBody
component.
Filtering
To add filtering functionality to our table, we can use the TextField
component from Material UI V5. This component allows users to enter a search query and filters the table by matching the query against the data in each row. Add the following code to your App
component, after the TableContainer
component:
const [filter, setFilter] = React.useState('');
const handleFilterChange = (event) => {
setFilter(event.target.value);
};
const filteredRows = rows.filter((row) =>
row.name.toLowerCase().includes(filter.toLowerCase()) ||
row.email.toLowerCase().includes(filter.toLowerCase()) ||
row.phone.toLowerCase().includes(filter.toLowerCase())
);
return (
<TableContainer component={Paper}>
<TextField
label="Search"
variant="outlined"
margin="normal"
value={filter}
onChange={handleFilterChange}
fullWidth
/>
<Table>
<EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleSortRequest} />
<TableBody>
{filteredRows.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.email}</TableCell>
<TableCell>{row.phone}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
In this example, we’ve added a new state called filter
that represents the user’s search query. We’ve also added a new function called handleFilterChange
that updates the filter
state when the user types in the search box. We then use the filter
state to create a new filteredRows
array that contains only the rows that match the search query. Finally, we update our TableBody
component to use filteredRows
instead of rows
.
Pagination
To add pagination functionality to our table, we can use the TablePagination
component from Material UI V5. This component allows users to navigate through the pages of data in the table. Add the following code to your App
component, after the TableHead
component:
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<TableContainer component={Paper}>
<TextField
label="Search"
variant="outlined"
margin="normal"
value={filter}
onChange={handleFilterChange}
fullWidth
/>
<Table>
<EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleSortRequest} />
<TableBody>
{filteredRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
<TableRow key={row.id}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.email}</TableCell>
<TableCell>{row.phone}</TableCell>
</TableRow>
))}
</TableBody>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={filteredRows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Table>
</TableContainer>
);
In this example, we’ve added two new states called page
and rowsPerPage
that represent the current page and number of rows per page, respectively. We’ve also added two new functions called handleChangePage
and handleChangeRowsPerPage
that update these states when the user interacts with the pagination component. We then use these states to slice our filteredRows
array and display only the rows that should be visible on the current page. Finally, we add the TablePagination
component to our table, passing in the necessary states and functions and customizing the appearance and behavior of the pagination component.
Adding Tooltips and Icons to Data Tables
Material UI V5 provides several components that can be used to add tooltips and icons to our data table. Let’s take a look at how we can use these components to enhance our table.
Tooltips
To add tooltips to our table, we can use the Tooltip
component from Material UI V5. This component displays a small popup with additional information when a user hovers over a particular element. Add the following code to your App
component, inside the TableCell
components:
import { Tooltip } from '@mui/material';
<TableCell>
<Tooltip title="View details">
<IconButton>
<VisibilityIcon />
</IconButton>
</Tooltip>
</TableCell>
In this example, we’ve added a Tooltip
component around an IconButton
component that displays a VisibilityIcon
. When the user hovers over the icon, a tooltip with the text “View details” will appear.
Icons
To add icons to our table, we can use the Icon
component from Material UI V5. This component displays a small graphic or symbol that can be used to represent a particular action or piece of information. Add the following code to your App
component, inside the TableCell
components:
import { Icon } from '@mui/material';
<TableCell>
<Icon>
{row.favorite ? 'favorite' : 'favorite_border'}
</Icon>
</TableCell>
In this example, we’ve added an Icon
component that displays a heart icon if the row is marked as a favorite, and a heart outline if it is not. We use the ternary operator to choose the appropriate icon based on the favorite
property of the row object.
Conclusion
In this article, we’ve walked through the steps to create a data table with Material UI V5. We’ve covered how to add sorting, filtering, pagination, tooltips, and icons to our table, and provided code snippets for each feature. Material UI V5 provides a rich set of components and features that can help create clean, modern, and user-friendly data tables for your web applications. By following the examples in this article and exploring the Material UI V5 documentation, you too can create rich and interactive data tables that enhance the user experience of your application.
Tables In Material UI V5
Introduction As a web developer, I often find myself struggling to create functional and visually appealing tables for my web applications. When I discovered Material UI V5, I was intrigued by the promise of a streamlined and customizable table component. In this article, I’ll delve into the world of Material UI V5 Tables and share […]
Badges In Material UI V5
As a web developer, I’ve always been fascinated by the small design elements that can make a big impact on the overall user experience of a website. One such element is the badge, often used to highlight new or important information to users. In the latest release of Material UI, version 5, badges have seen […]
Avatars In Material UI V5
As a developer, I have always been fascinated by the way avatars enhance the user experience in web applications. They provide a personalized touch and make users feel more connected to the platform. That’s why I was excited to learn that Material UI V5 had revamped their avatar component. In this article, I’ll share my […]
Chip Component In Material UI V5
As a web developer, I’m always on the lookout for new and improved tools and frameworks to make my life easier. And one of the tools that has been a staple in my toolkit is Material UI. If you’re not familiar with Material UI, it is a library that provides pre-built UI components for web […]
Alerts in Material UI V5
Introduction Let’s take a look at Alerts In Material UI V5. With its sleek design and easy-to-use features Material UI V5 makes it easy to show your users alerts. Alerts are an essential element of any website or application, allowing us to provide users with important information and updates. In this article, we’re going to […]