58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
columns: {
|
|
type: Array as () => any[],
|
|
require: true,
|
|
},
|
|
row: {
|
|
type: Array as () => any[],
|
|
require: true,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-pa-sm row col-12">
|
|
<d-table
|
|
ref="table"
|
|
flat
|
|
bordered
|
|
:columns="props.columns"
|
|
:rows="props.row"
|
|
dense
|
|
:rows-per-page-options="[10, 25, 50, 100]"
|
|
virtual-scroll
|
|
class="row col-12"
|
|
:style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
|
|
>
|
|
</d-table>
|
|
</div>
|
|
</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;
|
|
}
|
|
/* 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>
|