mui table is not responsive - reactjs

Question

I am using mui table. It is not responsive. I need to set the width in %.
The output is
I attach the screenshort from two different screen

Answer 1

Create a div container with overflow: auto, then another container
with: width: '100%', display: 'table', tableLayout: 'fixed'
And that's all.
<div className="App">
<Box sx={{ overflow: "auto" }}>
<Box sx={{ width: "100%", display: "table", tableLayout: "fixed" }}>
<Table>
<TableHead>
<TableRow>
<TableCell>
<TableSortLabel>Name</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel>User</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel>Title</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel>Role</TableSortLabel>
</TableCell>
<TableCell align={"right"}></TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow hover>
<TableCell>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Avatar
sx={{
height: 42,
width: 42,
backgroundColor: "primary.main"
}}
>
MD
</Avatar>
<Box sx={{ ml: 1 }}>
<Link
color={"inherit"}
variant={"subtitle2"}
component={"a"}
sx={{ cursor: "pointer" }}
>
Darwling Jackson
</Link>
</Box>
</Box>
</TableCell>
<TableCell>DJackson</TableCell>
<TableCell>Tester</TableCell>
<TableCell>Editor</TableCell>
</TableRow>
<TableRow hover>
<TableCell>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Avatar
sx={{
height: 42,
width: 42,
backgroundColor: "primary.main"
}}
>
MD
</Avatar>
<Box sx={{ ml: 1 }}>
<Link
color={"inherit"}
variant={"subtitle2"}
sx={{ cursor: "pointer" }}
>
Jhon Phoneix
</Link>
</Box>
</Box>
</TableCell>
<TableCell>JP</TableCell>
<TableCell>Database Administrator</TableCell>
<TableCell>Editor</TableCell>
</TableRow>
<TableRow hover>
<TableCell>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Avatar
sx={{
height: 42,
width: 42,
backgroundColor: "primary.main"
}}
>
MD
</Avatar>
<Box sx={{ ml: 1 }}>
<Link
color={"inherit"}
variant={"subtitle2"}
sx={{ cursor: "pointer" }}
>
Maria Dominguez
</Link>
</Box>
</Box>
</TableCell>
<TableCell>MDominguez</TableCell>
<TableCell>IT Manager</TableCell>
<TableCell>Editor</TableCell>
</TableRow>
</TableBody>
</Table>
</Box>
</Box>
</div>
See my example: Mui responsive code sandbox

Answer 2

Can't really demonstrate without code, but if you don't want to let Material UI to determine the width, a common strategy is to wrap the component in a Box, and give the width (in percent) to the Box instead. Reference.