70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
const props = defineProps({
|
||
|
|
columns: {
|
||
|
|
type: Array as () => any[],
|
||
|
|
require: true,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<q-table
|
||
|
|
ref="table"
|
||
|
|
:columns="props.columns"
|
||
|
|
row-key="name"
|
||
|
|
flat
|
||
|
|
bordered
|
||
|
|
dense
|
||
|
|
class="custom-header-table"
|
||
|
|
style="width: 625px"
|
||
|
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||
|
|
>
|
||
|
|
<!-- <template v-slot:header="props">
|
||
|
|
<q-tr :props="props">
|
||
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||
|
|
<span class="text-weight-medium" v-html="col.label" />
|
||
|
|
</q-th>
|
||
|
|
<q-th auto-width />
|
||
|
|
</q-tr>
|
||
|
|
</template> -->
|
||
|
|
<!-- <template v-slot:body="props">
|
||
|
|
<q-tr :props="props" class="cursor-pointer">
|
||
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||
|
|
<div>
|
||
|
|
{{ col.value }}
|
||
|
|
</div>
|
||
|
|
</q-td>
|
||
|
|
</q-tr>
|
||
|
|
</template> -->
|
||
|
|
</q-table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.custom-header-table {
|
||
|
|
height: auto;
|
||
|
|
.q-table tr:nth-child(odd) td {
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
.q-table tr:nth-child(even) td {
|
||
|
|
background: #f8f8f8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.q-table thead tr {
|
||
|
|
background: #ecebeb;
|
||
|
|
}
|
||
|
|
|
||
|
|
.q-table thead tr th {
|
||
|
|
position: sticky;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
/* this will be the loading indicator */
|
||
|
|
.q-table thead tr:last-child th {
|
||
|
|
/* height of all previous header rows */
|
||
|
|
top: 48px;
|
||
|
|
}
|
||
|
|
.q-table thead tr:first-child th {
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|