DataGrid Components

Two approaches to building data grids: a lightweight self-contained version and a production-ready wrapper around SVAR Grid

Database Connected
100
Total Employees
£77,080
Average Salary
7
Departments

Component Comparison

DataGridBasic

  • ✓ Zero dependencies
  • ✓ Copy-paste ready
  • ✓ ~10KB bundle size
  • ✓ Column sorting
  • ✓ Global search
  • ✓ Pagination
  • ✗ No virtual scrolling
  • ✗ No inline editing
  • ✗ Basic filtering only

Best for: Small-medium datasets (up to 500 rows), prototypes, learning

DataGridAdvanced

  • ✓ Virtual scrolling
  • ✓ Global search
  • ✓ Column sorting
  • ✓ Inline editing
  • ✓ Row selection
  • ✓ Bulk operations
  • ✓ CSV export
  • ✓ Theme support
  • ✗ Requires SVAR Grid
  • ✗ ~155KB bundle
  • ✗ Not copy-paste ready

Best for: Large datasets (1000s of rows), production apps, rich features

Live Examples

Currency Format Comparison - Choose Your Format

The same salary data displayed in three different formats. You choose which formatter to use for each column!

Three Currency Formatters Available:

  • formatCurrency - Standard with commas, no decimals (e.g., £75,000)
  • formatCurrencyDecimals - With commas AND decimals (e.g., £75,000.00)
  • formatCurrencyCompact - With K/M abbreviations (e.g., £75K)

Each column below uses a different formatter on the same salary data. You can use different formats in different columns based on your needs!

First Name Last Name Standard (No Decimals) With Decimals Compact (K/M)
GraceAllen£62,000£62,000.00£62K
LauraAnderson£70,000£70,000.00£70K
MayaAngelou£66,000£66,000.00£66K
NeilArmstrong£105,000£105,000.00£105K
EveArnold£80,000£80,000.00£80K
FelixBaumgartner£73,000£73,000.00£73K
XanderBerkeley£73,000£73,000.00£73K
ZachBraff£75,000£75,000.00£75K
EmilyBrown£72,000£72,000.00£72K
UrsulaBurns£80,000£80,000.00£80K
Showing 1–10 of 100

How to Use Different Formatters:

import { formatCurrency, formatCurrencyDecimals, formatCurrencyCompact } from '$lib/dataGridFormatters';

const columns: DataGridColumn[] = [
  {
    id: 'annualBudget',
    header: 'Annual Budget',
    formatter: formatCurrencyCompact  // ← Use compact for large numbers (£1.5M)
  },
  {
    id: 'productPrice',
    header: 'Product Price',
    formatter: formatCurrencyDecimals  // ← Use decimals for precise prices (£12.99)
  },
  {
    id: 'totalRevenue',
    header: 'Total Revenue',
    formatter: formatCurrency  // ← Use standard for whole numbers (£75,000)
  }
];

Usage Guide

Column Styling & Formatting

<script>
  import DataGridBasic from '$lib/components/DataGridBasic.svelte';
  import {
    formatCurrencyCompact,
    createGradientStyle,
    createStatusBadge,
    createIconRenderer
  } from '$lib/dataGridFormatters';

  const columns = [
    {
      id: 'salary',
      header: 'Salary',
      type: 'number',
      formatter: formatCurrencyCompact, // £75K, £1.5M
      cellStyle: createGradientStyle(30000, 150000, '#ef4444', '#22c55e')
    },
    {
      id: 'status',
      header: 'Status',
      cellRenderer: createStatusBadge({
        'active': { color: '#22c55e', label: 'Active' },
        'on-leave': { color: '#f59e0b', label: 'On Leave' }
      })
    },
    {
      id: 'performance',
      header: 'Level',
      cellRenderer: createIconRenderer([
        { max: 50000, icon: '📉', color: '#ef4444' },
        { max: 100000, icon: '📊', color: '#3b82f6' },
        { max: Infinity, icon: '📈', color: '#22c55e' }
      ])
    }
  ];
</script>

<DataGridBasic { data } { columns } />

DataGridBasic - Copy & Paste Ready

<script>
  import DataGridBasic from '$lib/components/DataGridBasic.svelte';

  const columns = [
    { id: 'name', header: 'Name', width: 150 },
    { id: 'email', header: 'Email', type: 'email' },
    {
      id: 'salary',
      header: 'Salary',
      type: 'number',
      formatter: (val) => `£${val.toLocaleString()}`
    }
  ];

  const data = [
    { name: 'John Doe', email: 'john@example.com', salary: 75000 },
    // ... more rows
  ];
</script>

<DataGridBasic
  { data }
  { columns }
  sortable={ true }
  filterable={ true }
  pageSize={ 10 }
/>

DataGridAdvanced - Production Features

<script>
  import DataGridAdvanced from '$lib/components/DataGridAdvanced.svelte';

  // Auto-generates columns from data structure
  const employees = []; // Your employee data
</script>

<DataGridAdvanced
  data={ employees }
  editable={ true }
  selectable={ true }
  exportable={ true }
  pageSize={ 20 }
  theme="willow"
/>

DataGridFilters - Advanced Filtering

<script>
  import DataGridFilters from '$lib/components/DataGridFilters.svelte';
  import DataGridAdvanced from '$lib/components/DataGridAdvanced.svelte';

  let filters = $state({
    departments: [],
    statuses: [],
    salaryMin: 30000,
    salaryMax: 150000,
    hireDateFrom: '',
    hireDateTo: ''
  });

  const filteredData = $derived.by(() => {
    return data.filter(employee => {
      // Apply filter logic
      return true;
    });
  });
</script>

<DataGridFilters
  departments={ ['Engineering', 'Sales', 'Marketing'] }
  statuses={ ['active', 'on-leave'] }
  salaryRange={ { min: 30000, max: 150000 } }
  onFiltersChange={ (newFilters) => filters = newFilters }
/>

<DataGridAdvanced
  data={ filteredData }
  editable={ false }
  selectable={ false }
  pageSize={ 20 }
  exportable={ true }
/>

Department Breakdown

Engineering
31 employees
Sales
19 employees
Marketing
14 employees
Design
12 employees
Finance
10 employees
Customer Success
7 employees
HR
7 employees