GrTable

<script setup lang="ts">
import type { GrBadgeTone } from '@feugene/granularity'
import { GrBadge, GrTable } from '@feugene/granularity'

interface TableRow {
  campaign: string
  owner: string
  status: string
  tag: GrBadgeTone
  reach: string
}
const rows: TableRow[] = [
  { campaign: 'Spring onboarding', owner: 'Olivia', status: 'Ready', tag: 'success', reach: '18.2k' },
  { campaign: 'Card migration', owner: 'Maksim', status: 'Review', tag: 'info', reach: '9.7k' },
  { campaign: 'Payout reminder', owner: 'Anna', status: 'Paused', tag: 'warning', reach: '6.3k' },
]
</script>

<template>
  <GrTable>
    <template #header>
      <tr>
        <th class="px-4 py-3 text-left font-600">Campaign</th>
        <th class="px-4 py-3 text-left font-600">Owner</th>
        <th class="px-4 py-3 text-left font-600">Status</th>
        <th class="px-4 py-3 text-right font-600">Reach</th>
      </tr>
    </template>

    <tr
        v-for="row in rows"
        :key="row.campaign"
        class="border-t border-[var(--gr-brd)]"
    >
      <td class="px-4 py-3">{{ row.campaign }}</td>
      <td class="px-4 py-3 text-[var(--gr-muted-fg)]">{{ row.owner }}</td>
      <td class="px-4 py-3">
        <GrBadge size="sm" :tone="row.tag">
          {{ row.status }}
        </GrBadge>
      </td>
      <td class="px-4 py-3 text-right font-600">{{ row.reach }}</td>
    </tr>
  </GrTable>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { GrButton, GrTable } from '@feugene/granularity'

const loading = ref(true)

const rows = [
  { title: 'Ledger export', state: 'Completed', updated: '2 min ago' },
  { title: 'Reconciliation', state: 'Processing', updated: '5 min ago' },
  { title: 'Fraud review', state: 'Queued', updated: '12 min ago' },
]
</script>

<template>
  <div class="grid gap-3">
    <div>
      <GrButton size="sm" variant="outline" @click="loading = !loading">
        {{ loading ? 'Show resolved rows' : 'Show loading state' }}
      </GrButton>
    </div>

    <!-- Скелетоны рисует сама таблица, контейнер при этом помечен `aria-busy`. -->
    <GrTable :loading="loading" :loading-rows="3" :column-count="3">
      <template #header>
        <tr>
          <th class="px-4 py-3 text-left font-600">Task</th>
          <th class="px-4 py-3 text-left font-600">State</th>
          <th class="px-4 py-3 text-left font-600">Updated</th>
        </tr>
      </template>

      <tr v-for="row in rows" :key="row.title" class="border-t border-[var(--gr-brd)]">
        <td class="px-4 py-3">{{ row.title }}</td>
        <td class="px-4 py-3">{{ row.state }}</td>
        <td class="px-4 py-3 text-[var(--gr-muted-fg)]">{{ row.updated }}</td>
      </tr>
    </GrTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { GrButton, GrTable } from '@feugene/granularity'

const empty = ref(true)

const rows = [
  { name: 'Risk alerts', owner: 'Ops team', value: 'Enabled' },
  { name: 'Approval SLA', owner: 'Finance', value: '24 hours' },
]
</script>

<template>
  <div class="grid gap-3">
    <div>
      <GrButton size="sm" variant="outline" @click="empty = !empty">
        {{ empty ? 'Show table rows' : 'Show empty state' }}
      </GrButton>
    </div>

    <!-- Ни `v-if` вокруг строк, ни ручного `colspan`: пустоту таблица видит по слоту сама. -->
    <GrTable :column-count="3" striped hoverable>
      <template #header>
        <tr>
          <th class="px-4 py-3 text-left font-600">Preset</th>
          <th class="px-4 py-3 text-left font-600">Owner</th>
          <th class="px-4 py-3 text-left font-600">Value</th>
        </tr>
      </template>

      <tr v-for="row in (empty ? [] : rows)" :key="row.name" class="border-t border-[var(--gr-brd)]">
        <td class="px-4 py-3">{{ row.name }}</td>
        <td class="px-4 py-3 text-[var(--gr-muted-fg)]">{{ row.owner }}</td>
        <td class="px-4 py-3">{{ row.value }}</td>
      </tr>

      <template #empty>
        <div class="grid justify-items-center gap-2">
          <span>No preset rows</span>
          <GrButton size="sm" @click="empty = false">
            Load sample data
          </GrButton>
        </div>
      </template>
    </GrTable>
  </div>
</template>

<script setup lang="ts">
import { GrDelta, GrTable } from '@feugene/granularity'

interface ChannelRow {
  channel: string
  gross: number
  refunds: number
  change: number
}

const rows: ChannelRow[] = [
  { channel: 'Прямые продажи', gross: 12_400_000, refunds: 320_000, change: 8.4 },
  { channel: 'Партнёры', gross: 8_600_000, refunds: 145_000, change: 2.1 },
  { channel: 'Маркетплейсы', gross: 5_100_000, refunds: 890_000, change: -6.3 },
]

const money = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'RUB',
  maximumFractionDigits: 0,
})

const sum = (pick: (row: ChannelRow) => number) => rows.reduce((total, row) => total + pick(row), 0)

// Колонок четыре — число нужно `colspan` примечания. `columnCount` у `GrTable`
// сюда не доезжает: он обслуживает только строки loading и empty.
const COLUMN_COUNT = 4
</script>

<template>
  <GrTable>
    <template #header>
      <tr>
        <th class="px-4 py-3 text-left font-600">
          Канал
        </th>
        <th class="px-4 py-3 text-right font-600">
          Выручка
        </th>
        <th class="px-4 py-3 text-right font-600">
          Возвраты
        </th>
        <th class="px-4 py-3 text-right font-600">
          К прошлому кварталу
        </th>
      </tr>
    </template>

    <tr v-for="row in rows" :key="row.channel" class="border-t border-[var(--gr-brd)]">
      <td class="px-4 py-3">
        {{ row.channel }}
      </td>
      <td class="px-4 py-3 text-right">
        {{ money.format(row.gross) }}
      </td>
      <td class="px-4 py-3 text-right">
        {{ money.format(row.refunds) }}
      </td>
      <td class="px-4 py-3 text-right">
        <GrDelta :value="row.change" :precision="1" suffix="%" show-arrow />
      </td>
    </tr>

    <!--
      `GrTable` ячейки не оформляет принципиально, поэтому футер здесь целиком
      на потребителе: отбивка, вес, паддинги, выравнивание и число колонок для
      `colspan` пишутся руками и живут ровно до первой смены размера таблицы.
      Нужен итог, который сам встаёт по колоночной сетке тела и едет за `size`,
      шириной и закреплением, — это `summary-row` у `GrDataTable`.
    -->
    <template #footer>
      <tr class="border-t border-[var(--gr-brd)] font-600">
        <td class="px-4 py-3">
          Итого за квартал
        </td>
        <td class="px-4 py-3 text-right">
          {{ money.format(sum(row => row.gross)) }}
        </td>
        <td class="px-4 py-3 text-right text-[var(--gr-danger-text)]">
          {{ money.format(sum(row => row.refunds)) }}
        </td>
        <td class="px-4 py-3 text-right">
          <GrDelta :value="3.7" :precision="1" suffix="%" show-arrow />
        </td>
      </tr>

      <tr>
        <td :colspan="COLUMN_COUNT" class="px-4 py-3 text-[length:var(--gr-control-text-xs)] text-[var(--gr-muted-fg)]">
          Возвраты за квартал учтены отдельной строкой и в выручку не входят.
        </td>
      </tr>
    </template>
  </GrTable>
</template>

<script setup lang="ts">
import { GrTable } from '@feugene/granularity'

interface LedgerRow {
  date: string
  document: string
  counterparty: string
  account: string
  debit: string
  credit: string
  balance: string
}

const rows: LedgerRow[] = Array.from({ length: 14 }, (_, index) => ({
  date: `0${(index % 9) + 1}.03.2026`,
  document: `INV-2026-${String(index + 1).padStart(4, '0')}`,
  counterparty: ['Northwind', 'Contoso', 'Fabrikam', 'Tailspin'][index % 4],
  account: `62.0${(index % 3) + 1}`,
  debit: index % 2 === 0 ? `${(index + 1) * 1200} ₽` : '—',
  credit: index % 2 === 0 ? '—' : `${(index + 1) * 900} ₽`,
  balance: `${(index + 1) * 300} ₽`,
}))
</script>

<template>
  <GrTable
    region-label="Оборотная ведомость за март"
    max-height="260px"
    sticky-header
  >
    <template #header>
      <tr>
        <th class="px-4 py-3 text-left font-600">Дата</th>
        <th class="px-4 py-3 text-left font-600">Документ</th>
        <th class="px-4 py-3 text-left font-600">Контрагент</th>
        <th class="px-4 py-3 text-left font-600">Счёт</th>
        <th class="px-4 py-3 text-right font-600">Дебет</th>
        <th class="px-4 py-3 text-right font-600">Кредит</th>
        <th class="px-4 py-3 text-right font-600">Сальдо</th>
      </tr>
    </template>

    <tr
      v-for="row in rows"
      :key="row.document"
      class="border-t border-[var(--gr-brd)]"
    >
      <td class="px-4 py-3 whitespace-nowrap">{{ row.date }}</td>
      <td class="px-4 py-3 whitespace-nowrap">{{ row.document }}</td>
      <td class="px-4 py-3 whitespace-nowrap text-[var(--gr-muted-fg)]">{{ row.counterparty }}</td>
      <td class="px-4 py-3 whitespace-nowrap">{{ row.account }}</td>
      <td class="px-4 py-3 text-right whitespace-nowrap">{{ row.debit }}</td>
      <td class="px-4 py-3 text-right whitespace-nowrap">{{ row.credit }}</td>
      <td class="px-4 py-3 text-right font-600 whitespace-nowrap">{{ row.balance }}</td>
    </tr>
  </GrTable>
</template>

<script setup lang="ts">
import { GrTable } from '@feugene/granularity'

const sizes = ['xs', 'sm', 'md', 'lg'] as const

const rows = [
  { plan: 'Starter', seats: 3, price: '$12' },
  { plan: 'Team', seats: 25, price: '$79' },
]
</script>

<template>
  <div class="grid gap-4">
    <div v-for="size in sizes" :key="size" class="grid gap-2">
      <div class="text-xs font-semibold text-[var(--gr-muted-fg)]">
        size="{{ size }}"
      </div>

      <GrTable :size="size" aria-label="Plans">
        <template #header>
          <tr>
            <th class="px-4 py-2 text-left">
              Plan
            </th>
            <th class="px-4 py-2 text-right">
              Seats
            </th>
            <th class="px-4 py-2 text-right">
              Price
            </th>
          </tr>
        </template>

        <tr v-for="row in rows" :key="row.plan" class="border-t border-[var(--gr-brd)]">
          <td class="px-4 py-2">
            {{ row.plan }}
          </td>
          <td class="px-4 py-2 text-right">
            {{ row.seats }}
          </td>
          <td class="px-4 py-2 text-right">
            {{ row.price }}
          </td>
        </tr>
      </GrTable>
    </div>
  </div>
</template>