Table View

Overview

Table View shows all of the components that must be included in one table. You can re-design Table View to approach your goal.

Table View includes TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TablePagination, Checkbox, TextField.

Import

CODE

import {
  Checkbox,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  TextField,
} from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Code Sample:

CODE

 <TableContainer
          sx={{'width': '544px',}}>
      <Table>
         <TableHead>
            <TableRow>
                <TableCell padding="checkbox" align="center">
                  <Checkbox />
                </TableCell>
                <TableCell component="th">TableCell</TableCell>
                <TableCell>TableCell</TableCell>
                <TableCell>TableCell</TableCell>
                <TableCell>TableCell</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow selected={true}>
                <TableCell padding="checkbox">
                  <Checkbox checked={true} />
                </TableCell>
                <TableCell
                  sx={{'backgroundColor': 'yellow',}}>
                  Option 1
                </TableCell>
                <TableCell
                  sx={{'backgroundColor': 'orange',}}>
                  Option 2
                </TableCell>
                <TableCell>
                  <TextField />
                </TableCell>
                <TableCell>
                  <TextField />
                </TableCell>
            </TableRow>
            <TableRow>
                <TableCell padding="checkbox">
                  <Checkbox />
                </TableCell>
                <TableCell
                  sx={{'backgroundColor': 'blue',
                    'color': 'white',}}>
                  Option 3
                </TableCell>
                <TableCell>Option 4</TableCell>
                <TableCell>
                  <TextField />
                </TableCell>
                <TableCell>
                  <TextField />
                </TableCell>
            </TableRow>
            <TableRow>
                <TableCell padding="checkbox">
                  <Checkbox />
                </TableCell>
                <TableCell>Option 5</TableCell>
                <TableCell>Option 6</TableCell>
                <TableCell>
                  <TextField />
                </TableCell>
                <TableCell>
                  <TextField />
                </TableCell>
            </TableRow>
          </TableBody>
      </Table>
          <TablePagination
            count={10}
            rowsPerPage={10}
            page={0}
            onPageChange={() => {}}>
          </TablePagination>
  </TableContainer>