113 lines
2.2 KiB
Vue
113 lines
2.2 KiB
Vue
<template>
|
|
<table class="settings-table">
|
|
<thead>
|
|
<tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
|
<th
|
|
v-for="header in headerGroup.headers"
|
|
:key="header.id"
|
|
:colSpan="header.colSpan"
|
|
:class="[header.id]"
|
|
:style="{
|
|
width: `${header.getSize()}px`,
|
|
}"
|
|
>
|
|
<template v-if="!header.isPlaceholder">
|
|
<FlexRender
|
|
:render="header.column.columnDef.header"
|
|
:props="header.getContext()"
|
|
/>
|
|
</template>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<slot>
|
|
<tbody>
|
|
<tr v-for="row in table.getRowModel().rows" :key="row.id">
|
|
<td
|
|
v-for="cell in row.getVisibleCells()"
|
|
:key="cell.id"
|
|
:class="[cell.column.id]"
|
|
>
|
|
<slot :name="`cell(${cell.column.id})`" v-bind="cell.getContext()">
|
|
<FlexRender
|
|
:render="cell.column.columnDef.cell"
|
|
:props="cell.getContext()"
|
|
/>
|
|
</slot>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</slot>
|
|
</table>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { FlexRender, getCoreRowModel, useVueTable } from '@tanstack/vue-table'
|
|
import type { ColumnDef } from '@tanstack/vue-table'
|
|
|
|
export interface Props {
|
|
columns: ColumnDef<unknown>[]
|
|
data: unknown[]
|
|
}
|
|
|
|
defineOptions({
|
|
name: 'SettingsTable',
|
|
})
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const table = useVueTable({
|
|
get data() {
|
|
return props.data
|
|
},
|
|
get columns() {
|
|
return props.columns
|
|
},
|
|
getCoreRowModel: getCoreRowModel(),
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.settings-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0 8px;
|
|
|
|
margin-block: -8px;
|
|
|
|
th {
|
|
@include h5;
|
|
|
|
background-color: $clr-grey-100;
|
|
color: $clr-grey-500;
|
|
|
|
&:first-child {
|
|
|
|
border-top-left-radius: 12px;
|
|
border-bottom-left-radius: 12px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-right-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
}
|
|
}
|
|
|
|
td{
|
|
|
|
}
|
|
|
|
td,
|
|
th {
|
|
padding: 16px 24px;
|
|
|
|
&:first-child {
|
|
width: 300px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|