text: import { createMuiTheme, MuiThemeProvider } 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 TableHead from '@material-ui/core/TableHead';
  import TableRow from '@material-ui/core/TableRow';
  import Moment from 'moment';
  import React from 'react';
  
  const theme = createMuiTheme({
    overrides: {
      MuiTableCell: {
        root: {
          padding: '3px',
          border: '1px solid black !important',
          width: '100px',
          fontSize: '14px'
        }
      }
    }
  });
  
  
  
  function TableDeletedUsers({value, index}){
  
      return (
        <MuiThemeProvider theme={theme}>
            <br/>
            <Table aria-label="spanning table"  id={`table_${index}`} className={`${index > 0 ? 'other_tables' : ''}`} >
                <TableHead>
                      <TableRow>
                          <TableCell align="left" colSpan={6}>
                             Table : <span style={{color : 'red', fontSize : '15px', fontWeight : 'bold'}}>Users &nbsp;</span>
                            <span style={{float : 'right'}}>Count : <b>{value.length}</b></span>
                          </TableCell>
                      </TableRow>
                      <TableRow>
                          <TableCell style={{backgroundColor: '#b2b2b3', color: '#000', textAlign : 'center',}}>Transaction Date</TableCell>
                          <TableCell style={{backgroundColor: '#b2b2b3', color: '#000', textAlign : 'center', }}>Full Name</TableCell>
                          <TableCell style={{backgroundColor: '#b2b2b3', color: '#000', textAlign : 'center', }}>User Name</TableCell>
                          <TableCell style={{backgroundColor: '#b2b2b3', color: '#000', textAlign : 'center',}}>Administrator</TableCell>
                          <TableCell style={{backgroundColor: '#b2b2b3', color: '#000', textAlign : 'center',}}>Deleted By</TableCell>
                          {/* <TableCell style={{backgroundColor: '#b2b2b3', color: '#000', textAlign : 'center',}}>Date Deleted</TableCell> */}
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {value.length > 0
                        ?
                          value.map((row) => (
                              <TableRow key={row._id}>
                                <TableCell>{Moment(row.transaction_date).format('MM-DD-YYYY HH:mm:ss')}</TableCell>
                                <TableCell>{row.full_name}</TableCell>
                                <TableCell>{row.user_name}</TableCell>
                                <TableCell>{`${row.isAdmin ? `Y` : `N`}`}</TableCell>
                                <TableCell>{row.deleted_by}</TableCell>
                                {/* <TableCell>{Moment(row.date_created).format('MMM DD, YYYY HH:mm:ss')}</TableCell> */}
                              </TableRow>
                          ))
                        :
                        <TableRow>
                            <TableCell style={{textAlign : 'center'}} colSpan={6}>No records to display</TableCell>
                        </TableRow>
                      }
                     
                    </TableBody>
            </Table>
        </MuiThemeProvider>
      );
  }
  
  export default TableDeletedUsers;