How to create React Table

Using Material-UI Table

Kayathiri Mahendrakumaran
Jan 6 · 2 min read
Image for post
Image for post
React + Material-UI

Material-UI is a popular framework for React. Are you new to Material-UI? It is very easy to learn. This guide will help you to get started. It is one of the popular libraries for React user interface. It’s components can work in isolation.

if you are new to React, refer this page to create a react app.

You can follow the guide to create stylish tables.

It is available with npm packages.

npm install @material-ui/core

You can import Table using the following commands.

import Table from '@material-ui/core/Table';
// or
import { Table } from '@material-ui/core';

Other required libraries can be imported using the following lines of code.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

Use the following code to style your table.

const useStyles = makeStyles({
table: {
minWidth: 650,
},
});

Use the following line to create the data.

function createData(name, age, sex, country, salary) {
return { name, age, sex, country, salary };
}
// add data
const rows = [
createData('John', 45, 'Male', 'Canada', 5000),
createData('Mary', 25, 'Female', 'London', 8500),
createData('Nick', 31, 'Male', 'America', 7800),
createData('Sunil', 65, 'Male', 'London', 4800),
createData('Rebecca', 51, 'Female', 'America', 7500),
];

The react function to display the table:

export default function BasicTable() {
const classes = useStyles();
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell align="right">Age</TableCell>
<TableCell align="right">Sex</TableCell>
<TableCell align="right">Country</TableCell>
<TableCell align="right">Salary&nbsp;($)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.age}</TableCell>
<TableCell align="right">{row.sex}</TableCell>
<TableCell align="right">{row.country}</TableCell>
<TableCell align="right">{row.salary}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

Finally, you may get a table like this.

Image for post
Image for post
React Material-UI Table

Thank you for your time to read my article.

Frontend Weekly

It's really hard to keep up with all the front-end…

Kayathiri Mahendrakumaran

Written by

Undergraduate, Computer Science & Engineering

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Kayathiri Mahendrakumaran

Written by

Undergraduate, Computer Science & Engineering

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store