Data Table System

<UxTableList>
  <template #header>
    <tr>
      <UxTableListColumnHeader
        v-for="metric in sortMetrics"
        :key="metric.name"
        :metric="metric"
        :sortBy="sortBy"
        @sortUp="onSort(metric.name, 'up')"
        @sortDown="onSort(metric.name, 'down')"
      />
    </tr>
    <tr><th class="h-[5px] p-0 bg-black" colspan="100%"></th></tr>
    <UxTableListTotals>
      <td>{{ vendorCount }} vendors</td>
      <td>{{ totalRequests }}</td>
    </UxTableListTotals>
    <tr><th class="h-[2px] p-0 bg-grey-200" colspan="100%"></th></tr>
  </template>

  <UxTableListExpandRow v-for="item in items" :key="item.id">
    <td>{{ item.domain }}</td>
    <td>{{ item.requests }}</td>

    <template #details>
      <div class="p-6 bg-white shadow-lg rounded-12">
        Detail content here
      </div>
    </template>
  </UxTableListExpandRow>
</UxTableList>

<script setup>
const sortMetrics = [
  { name: 'vendor', width: '200px', search: (needle) => { search.value = needle } },
  { name: 'requests', width: '120px' },
]
</script>

<!-- connections/index.vue -->
<template>
  <NuxtLayout name="global" left-nav="traffic">
    <template #filter>
      <FilterDatasetView @ready="datasetViewReady = true" />
      <TrafficFilter @ready="filtersReady = true" />
    </template>

    <PageTitle :breadcrumb="['Traffic']">Connections</PageTitle>

    <!-- Only render once filters are ready -->
    <TrafficConnectionsList v-if="filterContextReady" />
  </NuxtLayout>
</template>

<script setup>
const filtersReady = ref(false)
const datasetViewReady = ref(false)
const filterContextReady = computed(() => filtersReady.value && datasetViewReady.value)
</script>

<!-- list/Index.vue — owns data + state -->
<template>
  <TrafficConnectionsListUI
    v-bind="{ defaultSortMetrics, isEndpointContext }"
    v-model:search="search"
    @scrollAtTop="onScrollAtTop"
    @scrollingDown="onScrollingDown"
    @scrollAtBottom="onScrollAtBottom"
    :isLoadingNewLogs
    :isLoadingOldLogs
  >
    <TrafficConnectionsListItemUI
      v-for="log in auditLogs"
      :key="log.id"
      :auditLog="log"
      @detailsOpen="onItemOpen"
      @detailsClose="onItemClose"
    />
  </TrafficConnectionsListUI>
</template>

<script setup>
// Data composable — provides items, load, loadMore, search
const { items: auditLogs, load, loadMore, search } = useAuditList(orgId, {
  autoload: true,
  limit: 100,
  ...trafficQuery,
})

// Column definitions
const defaultSortMetrics = ref([
  { name: 'executable' },
  { name: 'type',        width: '0.1%' },
  { name: 'source',      width: '0.5%' },
  { name: 'action',      width: '10%' },
  { name: 'destination', width: '15%' },
  { name: 'timestamp',   width: '0.1%' },
])

// Auto-refresh every 10s when at top + no items expanded
const atTop = ref(true)
const totalOpenItems = ref(0)

setInterval(() => {
  if (atTop.value && totalOpenItems.value === 0) load()
}, 10000)

const onItemOpen = () => totalOpenItems.value++
const onItemClose = () => totalOpenItems.value--
const onScrollAtTop = () => { atTop.value = true }
const onScrollAtBottom = () => { loadMore() }
</script>

<!-- list/UI.vue — wraps UxTableList -->
<template>
  <UxTableList
    @scrollAtTop="emit('scrollAtTop')"
    @scrollingDown="emit('scrollingDown')"
    @scrollAtBottom="emit('scrollAtBottom')"
    :isLoadingTop="isLoadingNewLogs"
    :isLoadingBottom="isLoadingOldLogs"
  >
    <template #header>
      <TrafficConnectionsListSortHeader
        v-bind="{ isEndpointContext, defaultSortMetrics }"
        v-model:search="search"
      />
      <tr><th class="h-[5px] p-0 bg-black" colspan="100%"></th></tr>
    </template>

    <slot />
  </UxTableList>
</template>

<!-- list/SortHeader.vue -->
<template>
  <tr>
    <UxTableListSearch v-if="!isEndpointContext" width="25%">
      <input v-model="search" type="text" placeholder="Filter" />
    </UxTableListSearch>

    <UxTableListSorter
      v-for="metric in defaultSortMetrics"
      :key="metric.name"
      :sortMetric="metric.name"
      :width="metric.width"
      :disabled="true"
    />
  </tr>
</template>

<script setup>
// Debounced search pass-through (500ms)
const debouncedEmit = useDebounceFn((val) => {
  emit('update:search', val)
}, 500)

const search = computed({
  get: () => props.search,
  set: (val) => debouncedEmit(val),
})
</script>

<!-- list/ItemUI.vue -->
<template>
  <UxTableListExpandRow
    @detailsOpen="$emit('detailsOpen')"
    @detailsClose="$emit('detailsClose')"
  >
    <td>{{ auditLog.endpointId }}</td>
    <td>{{ auditLog.sourceExe }}</td>
    <td>{{ auditLog.sourceProtocol }}</td>
    <td>{{ auditLog.sourceAddress }}</td>
    <td>{{ auditLog.destinationAddress }}</td>
    <td class="text-right">{{ timestampAsDisplay(auditLog.timestamp) }}</td>

    <template #details>
      <TrafficConnectionsListItemDetails
        :auditLog="auditLog"
        class="bg-white w-full shadow-lg rounded-12"
      />
    </template>
  </UxTableListExpandRow>
</template>

<!-- list/ItemDetails.vue — decoupled from table -->
<template>
  <div class="py-12 px-6 font-bold text-13">
    <div class="grid grid-cols-3 gap-12">
      <!-- Source -->
      <div>
        <div class="hairline text-20 pb-3">Source</div>
        <UxLabelText label="Address">{{ auditLog.sourceAddress }}</UxLabelText>
        <UxLabelText label="Port">{{ auditLog.sourcePort }}</UxLabelText>
      </div>

      <!-- Destination -->
      <div>
        <div class="hairline text-20 pb-3">Destination</div>
        <UxLabelText label="Address">{{ auditLog.destinationAddress }}</UxLabelText>
        <UxLabelText label="Port">{{ auditLog.destinationPort }}</UxLabelText>
      </div>

      <!-- Meta -->
      <div>
        <div class="hairline text-20 pb-3">Meta</div>
        <div class="flex gap-1 flex-wrap">
          <UxTag v-for="tag in auditLog.tags" :key="tag" :no-x="true">{{ tag }}</UxTag>
        </div>
      </div>
    </div>

    <!-- Nested sub-table -->
    <TrafficRequestsList :connectionId :compact="true" />
  </div>
</template>