70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<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: 'UiPlainTable',
|
|
})
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const table = useVueTable({
|
|
get data() {
|
|
return props.data
|
|
},
|
|
get columns() {
|
|
return props.columns
|
|
},
|
|
getCoreRowModel: getCoreRowModel(),
|
|
})
|
|
</script>
|