@soft-stech/bootsman-ui-shadcn 2.0.20 → 2.0.22

package/src/lib/useResizeColumns.ts

@@ -1,20 +1,31 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import BuiTableHeader from '@/components/table/BuiTableHeader.vue'
+import BuiTable from '@/components/table/BuiTable.vue'
 import { useEventListener } from '@vueuse/core'
 
+const MIN_CELL_WIDTH = 90
+const LAST_CELL_EXTRA_SPACE = 56
+const ACTIONS_CELL_MIN_WIDTH = 10
+
 export function useResizeColumns() {
   type CELL = {
-    [key: string]: { cell: HTMLTableCellElement; initialWidth: number; minWidth: number }
+    [key: string]: {
+      cell: HTMLTableCellElement
+      initialWidth: number
+      minWidth: number
+      baseWidth: number
+      isLast: boolean
+    }
   }
   const isResizing = ref<boolean>(false)
   const resizingCellId = ref<string>('')
   const neighborCellId = ref<string>('')
   const cells = ref<CELL | undefined>(undefined)
-  const MIN_CELL_WIDTH = 90
-  const LAST_CELL_EXTRA_SPACE = 56
-  const ACTIONS_CELL_MIN_WIDTH = 10
   const calculatedColumnSizing = ref<Record<string, number> | undefined>(undefined)
   const tableHeaderElement = ref<InstanceType<typeof BuiTableHeader> | null>(null)
+  const tableElement = ref<InstanceType<typeof BuiTable> | null>(null)
+  const initialTableWidth = ref<number>(0)
+  const minTableWidth = ref<number>(0)
   const unregisterMouseMove = ref<(() => void) | undefined>(undefined)
 
   const setProvidedCellWidths = (columnSizing: Record<string, number> | undefined) => {
@@ -25,31 +36,57 @@ export function useResizeColumns() {
       headerCells.forEach((cell) => {
         const cellId = getCellId(cell)
 
-        if (columnSizing && columnSizing[cellId]) {
-          cell.style.width = columnSizing[cellId] + 'px'
-        }
+        cell.style.width = columnSizing && columnSizing[cellId] ? columnSizing[cellId] + 'px' : ''
       })
     }
   }
 
   const getCells = () => {
-    if (tableHeaderElement.value && tableHeaderElement.value.headRef) {
+    if (
+      tableHeaderElement.value &&
+      tableHeaderElement.value.headRef &&
+      tableElement.value &&
+      tableElement.value?.tableRef
+    ) {
       const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
-      const headerCellsWidths: CELL = headerCells.reduce((acc, cell) => {
+      const tableInitialWidth = getTableWidth()
+
+      tableElement.value.tableRef.style.width = 'min-content'
+
+      const headerCellsWidths: CELL = headerCells.reduce((acc, cell, index, array) => {
         const cellId = getCellId(cell)
+
         return {
           ...acc,
           [cellId]: {
             cell: cell,
-            initialWidth: cell.offsetWidth,
+            isLast: index === array.length - 1,
+            initialWidth: Math.floor(cell.offsetWidth),
+            baseWidth: Math.floor(cell.offsetWidth),
             minWidth:
               cellId === 'actions'
                 ? ACTIONS_CELL_MIN_WIDTH
-                : Math.min(cell.offsetWidth, MIN_CELL_WIDTH)
+                : cell.offsetWidth < MIN_CELL_WIDTH
+                  ? MIN_CELL_WIDTH
+                  : cell.offsetWidth
           }
         }
       }, {})
 
+      tableElement.value.tableRef.style.width = ''
+
+      Object.values(headerCellsWidths).forEach((cellElement) => {
+        cellElement.baseWidth = Math.floor(cellElement.cell.offsetWidth)
+      })
+
+      setProvidedCellWidths(calculatedColumnSizing.value)
+      tableElement.value.tableRef.style.width =
+        (calculatedColumnSizing.value?.['table'] || tableInitialWidth) + 'px'
+
+      Object.values(headerCellsWidths).forEach((cellElement) => {
+        cellElement.initialWidth = Math.floor(cellElement.cell.offsetWidth)
+      })
+
       return headerCellsWidths
     }
 
@@ -109,6 +146,10 @@ export function useResizeColumns() {
         updatedColumnSizingValue[cell] = newWidth
       }
 
+      if (tableElement.value && tableElement.value?.tableRef) {
+        updatedColumnSizingValue['table'] = tableElement.value.tableRef.offsetWidth
+      }
+
       calculatedColumnSizing.value = updatedColumnSizingValue
     }
   }
@@ -121,16 +162,20 @@ export function useResizeColumns() {
     return 0
   }
 
+  const lastCell = computed(() => {
+    if (cells.value) {
+      return Object.values(cells.value).find((cell) => cell.isLast)
+    }
+
+    return undefined
+  })
+
   const getCellId = (cell: HTMLTableCellElement) => {
     return cell.id.split('_')[0]
   }
 
-  const resizeCells = (
-    cell: HTMLTableCellElement | null,
-    neighborCell: HTMLTableCellElement | null,
-    e: MouseEvent
-  ) => {
-    if (!cell || !neighborCell) {
+  const resizeCells = (cell: HTMLTableCellElement | null, e: MouseEvent) => {
+    if (!cell || !tableElement.value?.tableRef || !lastCell.value) {
       resizingCellId.value = ''
       neighborCellId.value = ''
 
@@ -140,7 +185,9 @@ export function useResizeColumns() {
     const movementX = e.movementX
     const direction: 'left' | 'right' = movementX < 0 ? 'left' : 'right'
     const newCellWidth = Math.floor(parseInt(cell.style.width)) + movementX
-    const newNeighborCellWidth = Math.floor(parseInt(neighborCell.style.width)) - movementX
+    const newTableWidth =
+      Math.floor(parseInt(tableElement.value?.tableRef?.style.width)) + movementX
+    const newLastCellWidth = Math.floor(parseInt(lastCell.value.cell.style.width)) - movementX
 
     if (direction === 'left') {
       const min =
@@ -148,29 +195,35 @@ export function useResizeColumns() {
           ? cells.value[getCellId(cell)].minWidth
           : MIN_CELL_WIDTH
 
-      if (newCellWidth <= min || !cell.hasAttribute('can-resize')) {
-        const nextCell = cell.previousElementSibling as HTMLTableCellElement | null
+      if (newCellWidth >= min) {
+        cell.style.width = newCellWidth + 'px'
 
-        resizeCells(nextCell, neighborCell, e)
+        if (newTableWidth >= minTableWidth.value) {
+          tableElement.value.tableRef.style.width = newTableWidth + 'px'
+        } else {
+          tableElement.value.tableRef.style.width = minTableWidth.value + 'px'
+          lastCell.value.cell.style.width = newLastCellWidth + 'px'
+        }
       } else {
-        cell.style.width = newCellWidth + 'px'
-        neighborCell.style.width = newNeighborCellWidth + 'px'
+        return
       }
     } else {
       const min =
-        cells.value && cells.value[getCellId(neighborCell)]
-          ? cells.value[getCellId(neighborCell)].minWidth +
-            getLastCellOnTheRightExtraSpace(neighborCell)
+        cells.value && cells.value[getCellId(lastCell.value.cell)]
+          ? cells.value[getCellId(lastCell.value.cell)].minWidth +
+            getLastCellOnTheRightExtraSpace(lastCell.value.cell)
           : MIN_CELL_WIDTH
 
-      if (newNeighborCellWidth <= min || !neighborCell.hasAttribute('can-resize')) {
-        const nextNeighborCell = neighborCell.nextElementSibling as HTMLTableCellElement | null
-
-        resizeCells(cell, nextNeighborCell, e)
+      if (
+        newLastCellWidth >= min &&
+        tableElement.value.tableRef.offsetWidth <= minTableWidth.value
+      ) {
+        lastCell.value.cell.style.width = newLastCellWidth + 'px'
       } else {
-        cell.style.width = newCellWidth + 'px'
-        neighborCell.style.width = newNeighborCellWidth + 'px'
+        tableElement.value.tableRef.style.width = newTableWidth + 'px'
       }
+
+      cell.style.width = newCellWidth + 'px'
     }
   }
 
@@ -179,27 +232,66 @@ export function useResizeColumns() {
 
     if (cells.value) {
       const resizingCell = cells.value[resizingCellId.value]?.cell
-      const neighborCell = cells.value[neighborCellId.value]?.cell
 
-      resizeCells(resizingCell, neighborCell, e)
+      resizeCells(resizingCell, e)
     }
   }
 
   const resetCells = () => {
-    if (cells.value) {
-      const updatedColumnSizingValue: Record<string, number> = {}
+    if (cells.value && tableElement.value && tableElement.value?.tableRef) {
+      tableElement.value.tableRef.style.width = ''
 
-      for (const cell in cells.value) {
-        const inititalWidth = cells.value[cell].initialWidth
+      calculatedColumnSizing.value = {}
+      setInitialColumnWidths()
+    }
+  }
 
-        cells.value[cell].cell.style.width = inititalWidth + 'px'
-        updatedColumnSizingValue[cell] = inititalWidth
+  const resetCell = (cellId: string) => {
+    if (
+      cells.value &&
+      calculatedColumnSizing.value &&
+      lastCell.value &&
+      tableElement.value &&
+      tableElement.value?.tableRef
+    ) {
+      const thisCellBaseWidth = cells.value[cellId].baseWidth
+      const thisCellCurrentWidth = calculatedColumnSizing.value[cellId]
+      const diff = thisCellBaseWidth - thisCellCurrentWidth
+
+      let newTableWidth = calculatedColumnSizing.value['table'] + diff
+
+      if (newTableWidth < minTableWidth.value) {
+        const tableWidthDiff = minTableWidth.value - newTableWidth
+        const newLastCellWidth =
+          calculatedColumnSizing.value[getCellId(lastCell.value.cell)] + tableWidthDiff
+
+        lastCell.value.cell.style.width = newLastCellWidth + 'px'
+        newTableWidth = minTableWidth.value
       }
 
-      calculatedColumnSizing.value = updatedColumnSizingValue
+      cells.value[cellId].cell.style.width = thisCellBaseWidth + 'px'
+      tableElement.value.tableRef.style.width = newTableWidth + 'px'
+      calculatedColumnSizing.value[cellId] = thisCellBaseWidth
+      calculatedColumnSizing.value['table'] = newTableWidth
     }
   }
 
+  const getTableWrapperWidth = () => {
+    if (tableElement.value && tableElement.value.scrollAreaElementRef?.tableWrapperRef) {
+      return tableElement.value.scrollAreaElementRef?.tableWrapperRef.$el.offsetWidth - 3
+    }
+
+    return 0
+  }
+
+  const getTableWidth = () => {
+    if (tableElement.value && tableElement.value?.tableRef) {
+      return tableElement.value.tableRef.offsetWidth
+    }
+
+    return 0
+  }
+
   const setInitialColumnWidths = () => {
     cells.value = getCells()
 
@@ -211,21 +303,38 @@ export function useResizeColumns() {
           cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
         }
 
+        cells.value[cell].cell.style.minWidth = cells.value[cell].minWidth + 'px'
+
         updatedColumnSizingValue[cell] = cells.value[cell].cell.offsetWidth
       }
 
+      if (tableElement.value && tableElement.value?.tableRef) {
+        const tableOffsetWidth = getTableWidth()
+
+        if (calculatedColumnSizing.value?.['table'] && !tableElement.value.tableRef.style.width) {
+          tableElement.value.tableRef.style.width = calculatedColumnSizing.value['table'] + 'px'
+        } else {
+          initialTableWidth.value = tableOffsetWidth
+          tableElement.value.tableRef.style.width = tableOffsetWidth + 'px'
+          updatedColumnSizingValue['table'] = tableOffsetWidth
+        }
+      }
+
+      minTableWidth.value = getTableWrapperWidth()
       calculatedColumnSizing.value = updatedColumnSizingValue
     }
   }
 
   return {
     cells,
+    tableElement,
     tableHeaderElement,
     calculatedColumnSizing,
     isResizing,
     resizingCellId,
     handleResizeControlMouseDown,
     handleResizeControlMouseUp,
+    resetCell,
     resetCells,
     setInitialColumnWidths,
     setProvidedCellWidths,

package/src/stories/BuiDataTable.stories.ts

@@ -1,5 +1,6 @@
 import { BuiDataTable } from '@/components/table'
 import BuiDataTableStory from '@/stories/components/BuiDataTableStory.vue'
+import BuiDataTableWithScrollStory from '@/stories/components/BuiDataTableWithScrollStory.vue'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 const meta = {
@@ -24,3 +25,15 @@ export const Default: Story = {
     template: `<BuiDataTableStory v-bind="args" />`
   })
 }
+
+export const WithScroll: Story = {
+  // @ts-expect-error no need to describe all args, see BuiDataTableStory
+  args: {},
+  render: (args) => ({
+    components: { BuiDataTableWithScrollStory },
+    setup() {
+      return { args }
+    },
+    template: `<BuiDataTableWithScrollStory v-bind="args" />`
+  })
+}

package/src/stories/components/BuiDataTableStory.vue

@@ -3,7 +3,6 @@ import { BuiDataTable } from '@/components/table'
 import RowActionsMenuContent from './ActionsMenuContent.vue'
 import type {
   ColumnDef,
-  PaginationState,
   Row,
   RowSelectionState,
   VisibilityState,
@@ -25,6 +24,7 @@ import { BuiCheckbox } from '@/components/checkbox'
 import { tableColumnSortCommon } from '@/lib/utils'
 import { BuiButton } from '@/components/button'
 import { BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/components/tabs'
+import type { PaginationAutoState } from '@/components/table/BuiDataTable.vue'
 
 const taskSchema = z.object({
   id: z.string(),
@@ -102,7 +102,7 @@ function onGroupAction(group: string | number, action: string) {
 
 type TaskSortingState = { id: keyof Task; desc: boolean }
 const sorting = ref<TaskSortingState[]>([{ id: 'id', desc: false }])
-const pagination = ref<PaginationState>({
+const pagination = ref<PaginationAutoState>({
   pageIndex: 0,
   pageSize: 10
 })
@@ -115,7 +115,7 @@ function updateSelection(val?: RowSelectionState) {
 }
 
 const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
-const columnSizing = ref<Record<string, number>>({ title: 450 })
+const columnSizing = ref<Record<string, number>>({})
 const columnOrder = ref<ColumnOrderState>()
 
 type GroupBy = 'none' | 'status' | 'priority'
@@ -202,7 +202,6 @@ function groupName(group: string | number) {
         v-model:column-order="columnOrder"
         @update:selection="updateSelection"
         :total-items="totalItems"
-        class="caption-top"
         :manualPagination="false"
         :getRowId="(row) => row.id"
         :groupBy="groupBy === 'none' ? undefined : groupBy"
@@ -212,6 +211,7 @@ function groupName(group: string | number) {
         :enable-group-folding="true"
         :pagination-translations="{
           itemsPerPage: 'Tasks per page',
+          itemsPerPageAuto: 'Auto',
           page: 'Page',
           of: 'of'
         }"

package/src/stories/components/BuiDataTableWithScrollStory.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { BuiDataTable } from '@/components/table'
+import RowActionsMenuContent from './ActionsMenuContent.vue'
+import type {
+  ColumnDef,
+  PaginationState,
+  Row,
+  RowSelectionState,
+  VisibilityState,
+  ColumnOrderState
+} from '@tanstack/vue-table'
+import { sort, type ISortByObjectSorter } from 'fast-sort'
+import {
+  AlignJustifyIcon,
+  ArrowUpNarrowWideIcon,
+  FolderIcon,
+  SignalHighIcon,
+  SignalMediumIcon,
+  SignalLowIcon
+} from 'lucide-vue-next'
+import { computed, h, ref, withModifiers } from 'vue'
+import { z } from 'zod'
+import tasks from '@/stories/data/tasks.json'
+import { BuiCheckbox } from '@/components/checkbox'
+import { tableColumnSortCommon } from '@/lib/utils'
+import { BuiButton } from '@/components/button'
+import { BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/components/tabs'
+
+const taskSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  status: z.string().nullable().optional(),
+  label: z.string(),
+  priority: z.string(),
+  errorMessage: z.string().optional(),
+  age: z.string().optional()
+})
+type Task = z.infer<typeof taskSchema>
+
+const columns: ColumnDef<Task>[] = [
+  {
+    id: 'id',
+    accessorKey: 'id',
+    header: ({ table, column }) => {
+      return h('div', { class: 'flex items-center gap-2' }, [
+        h(BuiCheckbox, {
+          modelValue: table.getIsSomePageRowsSelected()
+            ? 'indeterminate'
+            : table.getIsAllPageRowsSelected(),
+          'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
+            table.getIsSomePageRowsSelected()
+              ? table.toggleAllPageRowsSelected(false)
+              : table.toggleAllPageRowsSelected(!!value),
+          ariaLabel: 'Select row',
+          onClick: withModifiers(() => {}, ['stop'])
+        }),
+        tableColumnSortCommon(column, 'ID')
+      ])
+    },
+    cell: ({ row }) =>
+      h('div', { class: 'flex items-center gap-2' }, [
+        h(BuiCheckbox, {
+          modelValue: row.getIsSelected(),
+          'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
+          ariaLabel: 'Select row'
+        }),
+        `${row.getValue('id')}`
+      ]),
+    enableHiding: false,
+    meta: { title: 'ID', pinLeft: true }
+  },
+  {
+    accessorKey: 'title',
+    header: 'Title',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => tableColumnSortCommon(column, 'Очень длинный заголовок для статуса'),
+    meta: { title: 'Статус таска' }
+  },
+  {
+    accessorKey: 'priority',
+    header: ({ column }) => tableColumnSortCommon(column, 'Priorities')
+  },
+  {
+    accessorKey: 'age',
+    header: ({ column }) => tableColumnSortCommon(column, 'Age')
+  },
+  { id: 'hiddenColumn', header: 'Hidden Column', cell: 'secret info' }
+]
+const data = ref<Task[]>(tasks)
+
+function onRowAction(row: Task, action: string) {
+  const str = `${action}: ${row.id}`
+  alert(str)
+}
+function onGroupAction(group: string | number, action: string) {
+  const str = `${action}: ${group}`
+  alert(str)
+}
+
+type TaskSortingState = { id: keyof Task; desc: boolean }
+const sorting = ref<TaskSortingState[]>([{ id: 'id', desc: false }])
+const pagination = ref<PaginationState>({
+  pageIndex: 0,
+  pageSize: 10
+})
+const totalItems = tasks.length
+
+const selection = ref<RowSelectionState | undefined>({})
+function updateSelection(val?: RowSelectionState) {
+  console.log('selection was changed', val)
+  selection.value = val
+}
+
+const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
+const columnSizing = ref<Record<string, number>>({ title: 450 })
+const columnOrder = ref<ColumnOrderState>()
+
+type GroupBy = 'none' | 'status' | 'priority'
+const groupBy = ref<GroupBy>('none')
+const groupLabels = {
+  status: ['Status', 'Not in any status'],
+  priority: ['Priority', 'Not in any priorities']
+}
+
+const sortedData = computed(() => {
+  const sortDirection = (sorting.value[0].desc ? 'desc' : 'asc') as 'asc'
+  const sortColumn = sorting.value[0].id
+  const groupByStr = groupBy.value
+
+  const sortBy: ISortByObjectSorter<Task> | ISortByObjectSorter<Task>[] = [
+    {
+      [sortDirection]: sortColumn
+    }
+  ]
+
+  // sort by grouping column first, but not when manually sorting by it
+  if (groupByStr !== 'none' && sortColumn !== groupByStr) {
+    sortBy.unshift({
+      asc: groupByStr
+    })
+  }
+
+  // sort by ID when possible
+  if (sortColumn !== 'id') {
+    sortBy.push({
+      asc: 'id'
+    })
+  }
+
+  return sort(data.value).by([...sortBy])
+})
+
+function renderSubComponent(row: Row<Task>) {
+  if (row.original.errorMessage) {
+    return () => h('span', { style: 'color: red' }, `Subrow: ${row.original.errorMessage}`)
+  } else {
+    return undefined
+  }
+}
+
+function deleteRow() {
+  data.value = data.value.map((a) => a)
+}
+function updateRows() {
+  data.value.shift()
+}
+
+function groupName(group: string | number) {
+  if (groupBy.value === 'priority') {
+    if (group === 'high') {
+      return () => h(SignalHighIcon, { class: 'size-4 inline-block' })
+    }
+
+    if (group === 'medium') {
+      return () => h(SignalMediumIcon, { class: 'size-4 inline-block' })
+    }
+
+    if (group === 'low') {
+      return () => h(SignalLowIcon, { class: 'size-4 inline-block' })
+    }
+
+    return () => group
+  }
+
+  return () => group
+}
+</script>
+
+<template>
+  <Story title="BuiDataTable" autoPropsDisabled :layout="{ type: 'grid', width: '95%' }">
+    <Variant key="variant" title="Sorting, Pagination, Grouping, Subrow">
+      <div class="page-wrapper">
+        <div class="table-wrapper">
+          <BuiDataTable
+            :columns="columns"
+            :data="sortedData"
+            v-model:sorting="sorting"
+            v-model:pagination="pagination"
+            v-model:column-visibility="columnVisibility"
+            v-model:column-sizing="columnSizing"
+            v-model:column-order="columnOrder"
+            @update:selection="updateSelection"
+            :total-items="totalItems"
+            class="caption-top"
+            :manualPagination="false"
+            :getRowId="(row) => row.id"
+            :groupBy="groupBy === 'none' ? undefined : groupBy"
+            :groupLabels="groupLabels"
+            :renderSubComponent="renderSubComponent"
+            :freeze-header="true"
+            enable-column-list-control
+            :enable-group-folding="true"
+            :pagination-translations="{
+              itemsPerPage: 'Tasks per page',
+              itemsPerPageAuto: 'Auto',
+              page: 'Page',
+              of: 'of'
+            }"
+          >
+            <template #caption="{ table }">
+              <div class="flex h-fit items-center justify-between">
+                <div class="flex h-full flex-row items-center gap-3">
+                  <BuiButton variant="outline">Download YAML</BuiButton>
+                  <BuiButton variant="outline" @click="updateRows"> Delete row </BuiButton>
+                  <BuiButton variant="outline" @click="deleteRow"> Update rows </BuiButton>
+                </div>
+
+                <div class="flex h-full flex-row items-center gap-3">
+                  <BuiTabs v-model="groupBy">
+                    <BuiTabsList class="grid w-full grid-cols-3" variant="default">
+                      <BuiTabsTrigger value="none" variant="default">
+                        <AlignJustifyIcon :size="14" />
+                      </BuiTabsTrigger>
+                      <BuiTabsTrigger value="status" variant="default">
+                        <FolderIcon :size="14" />
+                      </BuiTabsTrigger>
+                      <BuiTabsTrigger value="priority" variant="default">
+                        <ArrowUpNarrowWideIcon :size="14" />
+                      </BuiTabsTrigger>
+                    </BuiTabsList>
+                  </BuiTabs>
+
+                  <span>
+                    {{ table.getFilteredSelectedRowModel().rows?.length }} of
+                    {{ table.getFilteredRowModel().rows?.length }} row(s) selected
+                  </span>
+                </div>
+              </div>
+            </template>
+            <template #nodata>No data</template>
+            <template #groupByRow="{ group }"> Optional slot for: `{{ group }}` </template>
+            <template #groupName="{ group }">
+              <component :is="groupName(group)"></component>
+            </template>
+            <template #groupActions="{ group }">
+              <RowActionsMenuContent
+                :actions="['Group action']"
+                @select="(action) => onGroupAction(group, action)"
+              />
+            </template>
+            <template #rowActions="{ row }">
+              <RowActionsMenuContent
+                :actions="['action 1', 'action 2']"
+                @select="(action) => onRowAction(row, action)"
+              />
+            </template>
+            <template #numberOfItems>{{ data.length }} tasks</template>
+          </BuiDataTable>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.page-wrapper {
+  height: 95vh;
+  flex-direction: column;
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden auto;
+}
+
+.table-wrapper {
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+</style>