PTB-fe/components/Riwayat/TableRadar.js

import React, { Component } from 'react';
import ContentWrapper from '@/components/Layout/ContentWrapper';
import { Row, Col, Card, CardHeader, CardBody, Table } from 'reactstrap';


function TableRadar() {
    return (
        <Col xl="12">
            <Card className="card-default">
                {/* <CardHeader>Context Classes</CardHeader> */}
                <CardBody>
                    <Table responsive bordered>
                        <thead>
                            <tr>
                                <th>Menu\Wilayah LLDikti</th>
                                <th>I</th>
                                <th>II</th>
                                <th>III</th>
                                <th>IV</th>
                                <th>V</th>
                                <th>VI</th>
                                <th>VII</th>
                                <th>VIII</th>
                                <th>IX</th>
                                <th>X</th>
                                <th>XI</th>
                                <th>XII</th>
                                <th>XIII</th>
                                <th>XIV</th>
                                <th>XV</th>
                                <th>XVI</th>
                            </tr>
                        </thead>
                        <thead>
                            <tr style={{
                                backgroundColor: '#80b1ff',
                                color: "black",
                            }}>
                                <th>Penjadwalan Evaluasi</th>
                                <td>8</td>
                                <td>5</td>
                                <td>3</td>
                                <td>4</td>
                                <td>5</td>
                                <td>1</td>
                                <td>6</td>
                                <td>8</td>
                                <td>3</td>
                                <td>9</td>
                                <td>5</td>
                                <td>2</td>
                                <td>9</td>
                                <td>6</td>
                                <td>4</td>
                                <td>2</td>
                            </tr>
                            <tr style={{
                                backgroundColor: '#de8383',
                                color: "black",
                            }}>
                                <th>Pemeriksaan</th>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                                <td>2</td>
                                <td>5</td>
                                <td>4</td>
                                <td>3</td>
                                <td>6</td>
                                <td>7</td>
                                <td>8</td>
                                <td>6</td>
                                <td>5</td>
                                <td>4</td>
                                <td>3</td>
                                <td>2</td>
                                <td>1</td>
                            </tr>
                            <tr style={{
                                backgroundColor: '#fdda80',
                                color: "black",
                            }}>
                                <th>Sanksi</th>
                                <td>4</td>
                                <td>6</td>
                                <td>8</td>
                                <td>5</td>
                                <td>7</td>
                                <td>5</td>
                                <td>6</td>
                                <td>8</td>
                                <td>9</td>
                                <td>4</td>
                                <td>3</td>
                                <td>2</td>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                                <td>7</td>

                            </tr>
                            <tr style={{
                                backgroundColor: '#cfab80',
                                color: "black",
                            }}>
                                <th>Keberatan</th>
                                <td>8</td>
                                <td>6</td>
                                <td>8</td>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                                <td>7</td>
                                <td>8</td>
                                <td>8</td>
                                <td>7</td>
                                <td>6</td>
                                <td>5</td>
                                <td>3</td>
                            </tr>
                            <tr style={{
                                backgroundColor: '#ef90df',
                                color: "black",
                            }}>
                                <th>Banding</th>
                                <td>4</td>
                                <td>6</td>
                                <td>8</td>
                                <td>9</td>
                                <td>8</td>
                                <td>7</td>
                                <td>6</td>
                                <td>5</td>
                                <td>4</td>
                                <td>3</td>
                                <td>2</td>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                                <td>4</td>
                            </tr>
                            <tr style={{
                                backgroundColor: '#80df89',
                                color: "black",
                            }}>
                                <th>Pemantauan perbaikan</th>
                                <td>4</td>
                                <td>6</td>
                                <td>8</td>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                                <td>7</td>
                                <td>8</td>
                                <td>8</td>
                                <td>9</td>
                                <td>3</td>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                                <td>7</td>
                                <td>3</td>
                            </tr>
                            <tr style={{
                                backgroundColor: '#a3d4d1',
                                color: "black",
                            }}>
                                <th>Pencabutan Sanksi</th>
                                <td>4</td>
                                <td>6</td>
                                <td>6</td>
                                <td>9</td>
                                <td>8</td>
                                <td>7</td>
                                <td>6</td>
                                <td>3</td>
                                <td>2-</td>
                                <td>1</td>
                                <td>8</td>
                                <td>5</td>
                                <td>4</td>
                                <td>3</td>
                                <td>6</td>
                                <td>7</td>
                            </tr>
                        </thead>
                    </Table>
                </CardBody>
            </Card>
        </Col>
    )
}

export default TableRadar