initial

apps/client/components/settings/raw-table.vue

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