initial

layers/ui/components/plain-table/index.vue

@@ -0,0 +1,69 @@
+<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>