3 <thead id="cs-table__head">
4 <tr class="cs-table__row">
5 <th scope="col" class="cs-table__action-col">Action</th>
6 <th scope="col" class="cs-table__connector-col">Connector</th>
7 <th scope="col" class="cs-table__status-col">Status</th>
8 <th scope="col" class="cs-table__transaction-col">Transaction</th>
9 <th scope="col" class="cs-table__name-col">Name</th>
10 <th scope="col" class="cs-table__stopped-col">Stopped</th>
11 <th scope="col" class="cs-table__vendor-col">Vendor</th>
12 <th scope="col" class="cs-table__model-col">Model</th>
13 <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
16 <tbody id="cs-table__body">
18 v-for="chargingStation in chargingStations"
19 :key="chargingStation.hashId"
20 :charging-station="chargingStation"
27 <script setup lang="ts">
28 import CSData from './CSData.vue';
29 import { ChargingStationData } from '@/type/ChargingStationType';
31 const props = defineProps<{
32 chargingStations: Record<string, ChargingStationData>;
39 background-color: white;
46 flex-direction: column;
47 overflow: auto hidden;
48 border-collapse: collapse;
55 /* flex-direction: column;
56 justify-content: space-evenly; */
59 /* box-sizing: border-box; */
68 overflow: visible overlay;
74 /* display: inline-block; */
76 justify-content: center;
78 /* align-content: stretch; */
80 #cs-table__head .cs-table__row {
81 background-color: rgb(194, 188, 188);
83 .cs-table__row:nth-of-type(even) {
84 background-color: rgb(223, 217, 217);
87 .cs-table__action-col,
88 .cs-table__connector-col,
89 .cs-table__status-col,
90 .cs-table__transaction-col,
92 .cs-table__stopped-col,
94 .cs-table__vendor-col,
95 .cs-table__firmware-col {
100 /* background-color: red; */
102 /* display: table-cell;
103 vertical-align: middle; */
105 .cs-table__action-col {
106 /* min-width: 200px; */
108 .cs-table__connector-col {
109 /* min-width: 120px; */
111 .cs-table__status-col {
112 /* min-width: 120px; */
114 .cs-table__transaction-col {
115 /* min-width: 120px; */
117 .cs-table__name-col {
118 /* min-width: 120px; */
120 .cs-table__stopped-col {
121 /* min-width: 120px; */
123 .cs-table__model-col {
124 /* min-width: 120px; */
126 .cs-table__vendor-col {
127 /* min-width: 120px; */
129 .cs-table__firmware-col {
130 /* min-width: 120px; */