How to create React Table

Using Material-UI Table

Kayathiri Mahendrakumaran

Follow

Jan 6 · 2 min read

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.

Installation

It is available with npm packages.

npm install @material-ui/core

Using Material-UI Table

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.

Thank you for your time to read my article.