I am creating an admin dashboard that uses MUI DataGrid table component. I have no clue why the table goes off screen when I think the width should only extend the 100% of the viewport width and horizontally scroll to include all columns.

I am pretty new to MUI, React, and Sass so any help would be greatly appreciated.

import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
import "./dataTable.scss";
import { Link } from "react-router-dom";
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';

type Props = {
  columns: GridColDef[],
  rows:object[]
  slug: string;
}

const DataTable = (props:Props) => {

  const handleDelete = (id:number) => {
    //delete the item
    console.log(id + " has been deleted")
  }

  const actionColumn:GridColDef = {
    field:"action",
    headerName:"Action",
    width: 200,
    renderCell:(params) => {
      return (
        <div className="action">
          <Link to={`/${props.slug}/${params.row.id}`}>
            <VisibilityOutlinedIcon />
          </Link>
          <div className="delete" onClick={()=>handleDelete(params.row.id)}>
            <DeleteOutlineOutlinedIcon />
          </div>
        </div>
      )
    }
  }

  return (
    <div className="dataTable">
      <DataGrid
        className="dataGrid"
        rows={props.rows}
        columns={[...props.columns, actionColumn]}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 10,
            },
          },
        }}
        slots={{toolbar:GridToolbar}}
        slotProps={{
          toolbar: {
            showQuickFilter:true,
            quickFilterProps:{debounceMs: 500},
          }
        }}
        pageSizeOptions={[5]}
        checkboxSelection
        disableRowSelectionOnClick
        disableColumnFilter
        disableDensitySelector
        disableColumnSelector
      />
    </div>
  )
}

export default DataTable

This is my DataTable.tsx file

.dataTable {

  .dataGrid {
    background: white;
    padding: 20px;

    .MuiDataGrid-toolbarContainer {
      flex-direction: row-reverse;
    }

    .MuiDataGrid-cell {
      display: grid;
    }

    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      align-self: center;
    }

    .action {
      display: flex;
      gap: 15px;
      cursor: pointer;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}

This is the corresponding Sass file for DataTable.tsx

This is what the page looks like when initially loaded

As you can see, when horizontally scrolling, all other icons and the background stop but the table keeps going.

I have tried changing the width of the component in my dataTable.scss and global.scss file to width: 100%; or width: 100vw; but nothing has worked.