Cell Data Types

// No cellDataType needed - types are inferred automatically!
const columns = [
  { accessorKey: 'name', header: 'Name' },           // Inferred: 'text'
  { accessorKey: 'price', header: 'Price' },         // Inferred: 'currency' (2 decimals + "price")
  { accessorKey: 'discountRate', header: 'Rate' },   // Inferred: 'percentage' (0-1 + "rate")
  { accessorKey: 'inStock', header: 'In Stock' },    // Inferred: 'boolean'
  { accessorKey: 'orderDate', header: 'Date' },      // Inferred: 'date' (Date object)
]

const data = [
  {
    name: 'Laptop',
    price: 1299.99,          // Currency: 2 decimals + column name
    discountRate: 0.15,      // Percentage: 0-1 + column name
    inStock: true,           // Boolean
    orderDate: new Date(),   // Date object
  },
]

<NuGrid
  :data="data"
  :columns="columns"
  :data-type-inference="false"
/>

{
  accessorKey: 'price',
  header: 'Price',
  cellDataType: false,  // No inference, use default text rendering
}

{
  accessorKey: 'amount',
  header: 'Amount',
  cellDataType: 'number',  // Use number, not currency
}

const columns: NuGridColumn<Product>[] = [
  { accessorKey: 'name', header: 'Name', cellDataType: 'text' },
  { accessorKey: 'price', header: 'Price', cellDataType: 'currency' },
  { accessorKey: 'quantity', header: 'Qty', cellDataType: 'number' },
  { accessorKey: 'active', header: 'Active', cellDataType: 'boolean' },
  { accessorKey: 'createdAt', header: 'Created', cellDataType: 'date' },
]

{
  accessorKey: 'name',
  header: 'Name',
  cellDataType: 'text',
}

{
  accessorKey: 'quantity',
  header: 'Quantity',
  cellDataType: 'number',
  cellDataTypeOptions: {
    locale: 'en-US',
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
  },
}

{
  accessorKey: 'price',
  header: 'Price',
  cellDataType: 'currency',
  cellDataTypeOptions: {
    currency: 'USD',
    locale: 'en-US',
  },
}

{
  accessorKey: 'discountRate',
  header: 'Discount',
  cellDataType: 'percentage',
}

// Stored as decimal (0.15 displays as "15.0%")
{
  accessorKey: 'rate',
  cellDataType: 'percentage',
  percentageStorage: 'decimal',  // Default
}

// Stored as whole number (15 displays as "15.0%")
{
  accessorKey: 'rate',
  cellDataType: 'percentage',
  percentageStorage: 'percent',
}

{
  accessorKey: 'active',
  header: 'Active',
  cellDataType: 'boolean',
}

{
  accessorKey: 'createdAt',
  header: 'Created',
  cellDataType: 'date',
  cellDataTypeOptions: {
    format: 'MMM dd, yyyy',
    locale: 'en-US',
  },
}

{
  accessorKey: 'rating',
  header: 'Rating',
  cellDataType: 'rating',
  cellDataTypeOptions: {
    max: 5,
    color: 'yellow',
  },
}

{
  accessorKey: 'status',
  header: 'Status',
  cellDataType: 'selection',
  cellDataTypeOptions: {
    options: [
      { label: 'Active', value: 'active' },
      { label: 'Pending', value: 'pending' },
      { label: 'Inactive', value: 'inactive' },
    ],
  },
}

{
  accessorKey: 'category',
  header: 'Category',
  cellDataType: 'selection',
  cellDataTypeOptions: {
    options: ['Electronics', 'Clothing', 'Food', 'Other'],
  },
}

const users = ref([
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' },
])

const columns = [
  {
    accessorKey: 'assigneeId',
    header: 'Assignee',
    cellDataType: 'lookup',
    cellDataTypeOptions: {
      options: users,
      labelKey: 'name',
      valueKey: 'id',
    },
  },
]

{
  id: 'actions',
  header: 'Actions',
  cellDataType: 'action-menu',
}

{
  accessorKey: 'status',
  header: 'Status',
  cellDataType: 'selection',
  cellDataTypeOptions: {
    options: ['active', 'pending', 'inactive'],
  },
  // Custom display while keeping selection editor
  cell: ({ row }) => {
    const colors = {
      active: 'success',
      pending: 'warning',
      inactive: 'error',
    }
    return h(UBadge, {
      color: colors[row.original.status],
      label: row.original.status,
    })
  },
}

// plugins/custom-cell-types.ts
import { useNuGridCellTypeRegistry } from '#nu-grid'

export default defineNuxtPlugin(() => {
  const registry = useNuGridCellTypeRegistry()

  registry.register('percentage', {
    display: ({ value }) => `${(value * 100).toFixed(1)}%`,
    editor: defineComponent({
      // Custom editor component
    }),
  })
})

{
  accessorKey: 'completion',
  header: 'Progress',
  cellDataType: 'percentage',
}

<script setup lang="ts">
interface Product {
  id: number
  name: string
  category: string
  price: number
  stock: number
  active: boolean
  rating: number
  createdAt: Date
}

const columns: NuGridColumn<Product>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
    cellDataType: 'text',
  },
  {
    accessorKey: 'category',
    header: 'Category',
    cellDataType: 'selection',
    cellDataTypeOptions: {
      options: ['Electronics', 'Clothing', 'Food', 'Home'],
    },
  },
  {
    accessorKey: 'price',
    header: 'Price',
    cellDataType: 'currency',
    cellDataTypeOptions: { currency: 'USD' },
  },
  {
    accessorKey: 'stock',
    header: 'Stock',
    cellDataType: 'number',
  },
  {
    accessorKey: 'active',
    header: 'Active',
    cellDataType: 'boolean',
  },
  {
    accessorKey: 'rating',
    header: 'Rating',
    cellDataType: 'rating',
    cellDataTypeOptions: { max: 5 },
  },
  {
    accessorKey: 'createdAt',
    header: 'Created',
    cellDataType: 'date',
    cellDataTypeOptions: { format: 'PP' },
  },
]
</script>

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :editing="{ enabled: true }"
  />
</template>