BambitTestTask/components/UiTable.vue

<template>
  <div
    ref="tableContainerRef"
    class="table-wrapper"
    :style="{ height, width }"
  >
    <div :style="{ height: `${totalSize}px` }">
      <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"
              :style="[
                header?.column?.columnDef?.meta?.style,
                { width: `${header?.getSize()}px` },
              ]"
              @click="header?.column?.getToggleSortingHandler()?.($event)"
            >
              <FlexRender
                v-if="!header?.isPlaceholder"
                :render="header?.column?.columnDef?.header"
                :props="header?.getContext()"
              />

              {{ { asc: ' 🔼', desc: ' 🔽' }[header.column.getIsSorted() as string] }}
            </th>
          </tr>
        </thead>

        <tbody :style="{ height: `${totalSize}px` }">
          <tr
            v-for="vRow in virtualRows"
            :ref="measureElement"
            :key="rows[vRow?.index]?.id"
            :data-index=" vRow?.index"
            :style="{ transform: `translateY(${vRow?.start}px)` }"
          >
            <td
              v-for="cell in rows[vRow?.index]?.getVisibleCells()"
              :key="cell?.id"
              :style="[
                cell?.column?.columnDef.meta?.style,
                { width: `${cell?.column?.getSize()}px` },
              ]"
            >
              <FlexRender
                :render="cell?.column?.columnDef?.cell"
                :props="cell?.getContext()"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'
import { FlexRender, getCoreRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
import { useVirtualizer } from '@tanstack/vue-virtual'

const props = defineProps<{
  tableData: any[]
  columns: ColumnDef<any>[]
  height: string
  width: string
}>()

const table = useVueTable({
  get data() {
    return props?.tableData
  },
  columns: props?.columns,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

const rows = computed(() => table?.getRowModel()?.rows)
const tableContainerRef = ref<HTMLDivElement | null>(null)

const rowVirtualizerOptions = computed(() => {
  return {
    count: rows?.value?.length,
    estimateSize: () => 50,
    getScrollElement: () => tableContainerRef?.value,
    overscan: 5,
  }
})

const rowVirtualizer = useVirtualizer(rowVirtualizerOptions)

const virtualRows = computed(() => rowVirtualizer?.value?.getVirtualItems())
const totalSize = computed(() => rowVirtualizer?.value?.getTotalSize())

function measureElement(el?: Element) {
  if (!el) {
    return
  }

  rowVirtualizer?.value?.measureElement(el)

  return undefined
}
</script>

<style lang="scss">
/* -------------------- TABLE WRAPPER -------------------- */
.table-wrapper {
  position: relative;
  margin-top: calc(40px + 10px);
  border-radius: 14px;
  overflow: auto;

  @include mobile {
    height: 500px;
  }
}

table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  background: var(--ui-bg-elevated);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

/* -------------------- HEADER -------------------- */

thead {
  display: grid;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ui-bg-accented);
}

thead tr {
  display: flex;
  width: 100%;
}

thead th {
  background: var(--ui-bg-accented);
  color: var(--ui-text);
  padding: 12px 14px;

  border-bottom: 1px solid var(--ui-border);
  user-select: none;

  transition: background 0.15s ease;
}

thead th:hover {
  cursor: pointer;
}

/* -------------------- BODY -------------------- */

tbody {
  display: grid;
  position: relative;
}

tbody tr {
  display: flex;
  position: absolute;
  width: 100%;
  height: 50px;
  transition: background 0.2s ease;
}

tbody tr:nth-child(odd) {
  background: var(--ui-bg-subtle);
}

tbody tr:hover {
  background: var(--ui-bg-accented);
}

tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ui-border-subtle);
}

tbody tr:last-child td {
  border-bottom: none;
}
</style>