# Tables

## Skills Table & Manage Positions Table

**File Name:** SkillsPositionsTable.tsx

**Imports:** 
- Table from Material-UI: [Table Doc](https://material-ui.com/components/tables/)
- Table from '@material-ui/core/Table': [Table API](https://material-ui.com/api/table/#table-api)
- TableBody from '@material-ui/core/TableBody': [TableBody API](https://material-ui.com/api/table-body/#tablebody-api)
- TableCell from '@material-ui/core/TableCell': [TableCell API](https://material-ui.com/api/table-cell/#tablecell-api)
- TableContainer from '@material-ui/core/TableContainer': [TableContainer API](https://material-ui.com/api/table-container/#tablecontainer-api)
- TableHead from '@material-ui/core/TableHead': [TableHead API](https://material-ui.com/api/table-head/#tablehead-api)
- TableRow from '@material-ui/core/TableRow': [TableRow API](https://material-ui.com/api/table-row/#tablerow-api)

**Example:** Skills Table containing all of the skills, skill codes, and descriptions

**Description:** 
- Pages:
    - Manage Skills
    - Manage Positions
- The Skills Table used in the Manage Skills page will consist of the skill name, skill code, and description.
- The Positions table in the Manage Positions page will consist of the position name and description.

**I/O:** 
- Both tables allow for the creation of new items with a New button.
- The icon button next to each item allows an admin to edit each item.

**Manage Positions Table**

<img src="../../images/components/Table-Manage-Positions.png" width="500"/>

**Manage Skills Table**

<img src="../../images/components/Table-Manage-Skills.png" width="500"/>

## Daily Roster Table

**File Name:** DailyRosterTable.tsx

**Imports:**
- Table from Material-UI: [Table Doc](https://material-ui.com/components/tables/)
- Table from '@material-ui/core/Table': [Table API](https://material-ui.com/api/table/#table-api)
- TableBody from '@material-ui/core/TableBody': [TableBody API](https://material-ui.com/api/table-body/#tablebody-api)
- TableCell from '@material-ui/core/TableCell': [TableCell API](https://material-ui.com/api/table-cell/#tablecell-api)
- TableContainer from '@material-ui/core/TableContainer': [TableContainer API](https://material-ui.com/api/table-container/#tablecontainer-api)
- TableHead from '@material-ui/core/TableHead': [TableHead API](https://material-ui.com/api/table-head/#tablehead-api)
- TableRow from '@material-ui/core/TableRow': [TableRow API](https://material-ui.com/api/table-row/#tablerow-api)

**Example:** Table of time slots on the Daily Roster page

**Description:**
- Pages:
    - Daily Roster page
- For everyone, the table will show all time slots of the current day.
- Each row will have the following columns:
    - Hours
    - Name
    - Position
    - Unit #
    - Vehicle #
    - Radio #
    - Skills
    - Notes

**I/O:** Clicking on a time slot will redirect to the View Time Slot page of that particular time slot.

<img src="../../images/components/Table-DailyRoster.png" width="500"/>

## Select Time Slot Table

**File Name:** SelectTimeSlotTable.tsx

**Imports:**
- Table from Material-UI: [Table Doc](https://material-ui.com/components/tables/)
- Table from '@material-ui/core/Table': [Table API](https://material-ui.com/api/table/#table-api)
- TableBody from '@material-ui/core/TableBody': [TableBody API](https://material-ui.com/api/table-body/#tablebody-api)
- TableCell from '@material-ui/core/TableCell': [TableCell API](https://material-ui.com/api/table-cell/#tablecell-api)
- TableContainer from '@material-ui/core/TableContainer': [TableContainer API](https://material-ui.com/api/table-container/#tablecontainer-api)
- TableHead from '@material-ui/core/TableHead': [TableHead API](https://material-ui.com/api/table-head/#tablehead-api)
- TableRow from '@material-ui/core/TableRow': [TableRow API](https://material-ui.com/api/table-row/#tablerow-api)

**Example:** Table of selectabe time slots in Select Time Slot page

**Description:**
- Pages:
    - Select Time Slot
- Each row of the Select Time Slot table will have information for the following columns:
    - Hours
    - Days
    - Overtime
    - Assigned To
    - Notes

**I/O:** Clicking on a row brings of the details of that particular time slot in the Confirm Time Slot page.

<img src="../../images/components/Table-SelectTimeSlot.png" width="500"/>

## Create Schedule Table and Edit Schedule Table

**File Name:** CreateEditScheduleTable.tsx

**Imports:**
- Table from Material-UI: [Table Doc](https://material-ui.com/components/tables/)
- Table from '@material-ui/core/Table': [Table API](https://material-ui.com/api/table/#table-api)
- TableBody from '@material-ui/core/TableBody': [TableBody API](https://material-ui.com/api/table-body/#tablebody-api)
- TableCell from '@material-ui/core/TableCell': [TableCell API](https://material-ui.com/api/table-cell/#tablecell-api)
- TableContainer from '@material-ui/core/TableContainer': [TableContainer API](https://material-ui.com/api/table-container/#tablecontainer-api)
- TableHead from '@material-ui/core/TableHead': [TableHead API](https://material-ui.com/api/table-head/#tablehead-api)
- TableRow from '@material-ui/core/TableRow': [TableRow API](https://material-ui.com/api/table-row/#tablerow-api)

**Example:** Table of time slots under a particular position in Create Schedule and Edit Schedule pages.

**Description:**
- Pages:
    - Create Schedule page
    - Edit Schedule page
- In both the Create Schedule and Edit Schedule tables, the admin can view and create rows (time slots) under the respective positions.

**I/O:** 
- Time slots can be added when New is clicked on (redirects to Create Time Slot page).
- Clicking on a time slot will bring up the details of that time slot.

**Create Schedule Table**

<img src="../../images/components/Table-CreateSchedule.png" width="500"/>

**Edit Schedule Table**

<img src="../../images/components/Table-EditSchedule.png" width="500"/>