Styled Card - Copy this React, Mui Component to your project

import { useState } from 'react'; import { DataGrid, GridColDef, GridEventListener, GridToolbarQuickFilter, GridToolbarExport, GridToolbarFilterButton, GridRowParams, } from '@mui/x-data-grid'; import { Box, SxProps, Theme } from '@mui/material'; import styles from './datagrid.module.css'; export interface GridRow { id: string | number; [key: string]: | string | number | Date | undefined | Record<string, string> | string[]; } interface CustomDataGridProps { columns: GridColDef[]; rows: GridRow[]; disableRowSelectionOnClick?: boolean; showToolbar?: boolean; initialPageSize?: number; rowHeight?: number; checkboxSelection?: boolean; onRowClick?: GridEventListener<'rowClick'>; useCustomToolbar?: boolean; showQuickFilter?: boolean; onSearch?: (searchTerm: string) => void; getRowClassName?: (params: GridRowParams) => string; sx?: SxProps<Theme>; } const CustomToolbar = () => ( <Box sx={{ p: 0.5, pb: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'center', }} > <GridToolbarQuickFilter /> <Box sx={{ display: 'flex', gap: 2 }}> <GridToolbarFilterButton /> <GridToolbarExport /> </Box> </Box> ); const CustomDataGrid = ({ columns, rows, disableRowSelectionOnClick = true, initialPageSize = 10, checkboxSelection = false, showQuickFilter, onSearch, useCustomToolbar, rowHeight, onRowClick, showToolbar, getRowClassName, sx, }: CustomDataGridProps) => { const [pageSize, setPageSize] = useState(initialPageSize); // Create a custom toolbar component if needed const ToolbarComponent = useCustomToolbar ? CustomToolbar : showQuickFilter ? () => ( <Box sx={{ p: 0.5, pb: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'center', }} > <div> <GridToolbarFilterButton /> <GridToolbarExport /> </div> <GridToolbarQuickFilter quickFilterParser={(searchInput) => { onSearch?.(searchInput); return searchInput.split(',').map((value) => value.trim()); }} /> </Box> ) : undefined; return ( <Box sx={{ mx: '1.3rem', ...(sx || {}) }}> <Box className={styles.gridContainer}> <DataGrid className={styles.Container} columns={columns} rows={rows} pagination hideFooterPagination={false} disableRowSelectionOnClick={disableRowSelectionOnClick} onPaginationModelChange={(paginationModel) => { setPageSize(paginationModel.pageSize); }} initialState={{ pagination: { paginationModel: { pageSize: pageSize, }, }, }} pageSizeOptions={[10, 15, 20, 25]} getRowHeight={rowHeight ? () => rowHeight : () => 'auto'} // To enable auto row height for big content checkboxSelection={checkboxSelection} getRowClassName={ getRowClassName || ((params) => params.indexRelativeToCurrentPage % 2 === 0 ? styles.rowEven : styles.rowOdd) } slots={{ toolbar: showToolbar === false ? undefined : ToolbarComponent, }} onRowClick={onRowClick} /> </Box> </Box> ); }; export default CustomDataGrid;