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__registration-status-col">Registration Status</th>
12 <th scope="col" class="cs-table__vendor-col">Vendor</th>
13 <th scope="col" class="cs-table__model-col">Model</th>
14 <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
17 <tbody id="cs-table__body">
19 v-for="chargingStation in chargingStations"
20 :key="chargingStation.hashId"
21 :charging-station="chargingStation"
28 <script setup lang="ts">
29 import CSData from './CSData.vue';
30 import type { ChargingStationData } from '@/types/ChargingStationType';
32 const props = defineProps<{
33 chargingStations: Record<string, ChargingStationData>;
40 background-color: white;
47 flex-direction: column;
48 overflow: auto hidden;
49 border-collapse: collapse;
56 /* flex-direction: column;
57 justify-content: space-evenly; */
60 /* box-sizing: border-box; */
69 overflow: visible overlay;
75 /* display: inline-block; */
77 justify-content: center;
79 /* align-content: stretch; */
81 #cs-table__head .cs-table__row {
82 background-color: rgb(194, 188, 188);
84 .cs-table__row:nth-of-type(even) {
85 background-color: rgb(223, 217, 217);
88 .cs-table__action-col,
89 .cs-table__connector-col,
90 .cs-table__status-col,
91 .cs-table__transaction-col,
93 .cs-table__stopped-col,
94 .cs-table__registration-status-col,
96 .cs-table__vendor-col,
97 .cs-table__firmware-col {
101 padding-bottom: 0.2%;
102 /* background-color: red; */
104 /* display: table-cell;
105 vertical-align: middle; */
107 .cs-table__action-col {
108 /* min-width: 200px; */
110 .cs-table__connector-col {
111 /* min-width: 120px; */
113 .cs-table__status-col {
114 /* min-width: 120px; */
116 .cs-table__transaction-col {
117 /* min-width: 120px; */
119 .cs-table__name-col {
120 /* min-width: 120px; */
122 .cs-table__stopped-col {
123 /* min-width: 120px; */
125 .cs-table__registration-status-col {
126 /* min-width: 120px; */
128 .cs-table__model-col {
129 /* min-width: 120px; */
131 .cs-table__vendor-col {
132 /* min-width: 120px; */
134 .cs-table__firmware-col {
135 /* min-width: 120px; */