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 (
        <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>
    )
}

export default TableRadar