mirror of
https://github.com/ntop/ntopng.git
synced 2026-05-02 17:00:10 +00:00
58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
<!--
|
|
(C) 2013-22 - ntop.org
|
|
word-break:break-all;
|
|
-->
|
|
<template>
|
|
<!-- Normal table -->
|
|
<table v-if="!(horizontal) || (horizontal == false)" class="table table-striped table-bordered col-sm-12" style="">
|
|
<thead>
|
|
<tr>
|
|
<th v-for="col in columns" scope="col" :class="col.class" v-html="print_html_column(col)"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="row in rows" class="">
|
|
<td v-if="wrap_columns == true" v-for="col in columns" scope="col" style="height:2.5rem;" :class="col.class">
|
|
<div class="wrap-column" :style="col.style" v-html="print_html_row(col, row)"></div>
|
|
</td>
|
|
<td v-else v-for="col in columns" scope="col" :class="col.class" class="wrap_column" :style="col.style"
|
|
v-html="print_html_row(col, row)">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- Horizontal table, with th on the rows -->
|
|
<table v-else class="table table-striped table-bordered">
|
|
<tbody>
|
|
<tr v-for="row in rows ">
|
|
<th class="col-2" v-html="print_html_title(row.name)"></th>
|
|
<td style="overflow-wrap:anywhere !important; max-width: 500px;" :colspan="[(row.values.length <= 1) ? 2 : 1]" v-for="value in row.values" v-html="print_html_row(value)">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
const props = defineProps({
|
|
id: String,
|
|
columns: Array,
|
|
rows: Array,
|
|
print_html_column: Function,
|
|
print_html_row: Function,
|
|
print_html_title: Function,
|
|
horizontal: Boolean,
|
|
wrap_columns: Boolean,
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wrap-column {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
}
|
|
</style>
|