How to make mui table with body scrollable in react js?
March 17, 2023Hi Friends 👋,
Welcome To aGuideHub!
To make mui table with body scrollable in React js, you can use this code style={{ height: "300px", overflow: "auto" }}. It will make mui table with body scrollable.
Today, I am going to show you, how to make mui table with body scrollable in react js.
Table of contents
- Install Material-UI.
- Import the Mui table component.
- Define Table Data.
Let’s start with the first step.
Step 1: Install Material-UI
The first step is to install Material-UI. And you can use npm or yarn. And you can open it by typing in terminal.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledStep 2: Import the Mui table component.
To make mui table with body scrollable in React, first, you have to import the table. We have imported the Table, TableBody, TableCell, TableHead, TableRow components from the @mui/material library.
import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';Step 3: Define Table Data.
We have to define to show the data of our table.
const data = [
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1"
];MUI material make mui table with body scrollable example.
The below code is an example of a Material UI table. You have to import @mui material table. In the Material Table function when you create a table component, Will use style components to make the table body scrollable height: "300px", and overflow: "auto".
App.js
import React from "react";
import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
const data = [
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1",
"1"
];
class Demo extends React.Component {
render() {
return (
<div>
<div style={{ position: "sticky", top: 0 }}>
<Table>
<TableHead>
<TableRow
style={{
backgroundColor: "#f5f5f5",
height: "35px"
}}
>
<TableCell>Column 1</TableCell>
<TableCell>Column 2</TableCell>
<TableCell>Column 3</TableCell>
</TableRow>
</TableHead>
</Table>
</div>
<div style={{ height: "300px", overflow: "auto" }}>
<Table style={{ tableLayout: "fixed" }}>
<TableBody>
{data.map((n, i) => {
return (
<TableRow key={i}>
<TableCell>{n}</TableCell>
<TableCell>{n}</TableCell>
<TableCell>{n}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
</div>
);
}
}
export default Demo;In the above code example, I have used the @mui/material component and made mui table with body scrollable.
Check the output of the above code example.
Here, we are provided code sandbox links for the above program make mui table with body scrollable. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍
