Compact Theme

<template>
  <NuGrid
    theme="compact"
    :data="data"
    :columns="columns"
  />
</template>

<script setup lang="ts">
import type { NuGridColumn } from '#nu-grid/types'

interface StockData {
  symbol: string
  company: string
  price: number
  change: number
  volume: number
}

const data = ref<StockData[]>([
  { symbol: 'AAPL', company: 'Apple Inc.', price: 178.42, change: 2.34, volume: 52847123 },
  { symbol: 'MSFT', company: 'Microsoft', price: 378.91, change: -1.23, volume: 21456789 },
  { symbol: 'GOOGL', company: 'Alphabet', price: 141.80, change: 0.87, volume: 18923456 },
  // ... more data
])

const columns: NuGridColumn<StockData>[] = [
  { accessorKey: 'symbol', header: 'Symbol', size: 80 },
  { accessorKey: 'company', header: 'Company', size: 150 },
  {
    accessorKey: 'price',
    header: 'Price',
    size: 90,
    cell: ({ row }) => `$${row.original.price.toFixed(2)}`,
  },
  {
    accessorKey: 'change',
    header: 'Change',
    size: 80,
    cell: ({ row }) => {
      const change = row.original.change
      const color = change >= 0 ? 'text-green-500' : 'text-red-500'
      const sign = change >= 0 ? '+' : ''
      return h('span', { class: color }, `${sign}${change.toFixed(2)}`)
    },
  },
  {
    accessorKey: 'volume',
    header: 'Volume',
    size: 100,
    cell: ({ row }) => row.original.volume.toLocaleString(),
  },
]
</script>

<template>
  <NuGrid
    theme="compact"
    :data="data"
    :columns="columns"
    :focus="{ mode: 'cell' }"
    selection="multi"
    resize-columns
  />
</template>