@mikestools/usetable 0.0.3 → 0.0.4

package/showcase/examples/BasicExample.vue

@@ -1,474 +1,382 @@
-<template>
-	<section id="basicTable">
-		<h2 class="h4 mb-3">
-			<IconTable class="me-2" />
-			Product Inventory Dashboard
-		</h2>
-		<p class="text-muted mb-4">
-			A comprehensive example demonstrating useTable's core features: sorting, filtering, selection,
-			inline editing, aggregation, and undo/redo — all reactive and type-safe.
-		</p>
-
-		<!-- Toolbar -->
-		<div class="card shadow-sm mb-3">
-			<div class="card-body py-2">
-				<div class="row g-2 align-items-center">
-					<!-- Search -->
-					<div class="col-lg-3">
-						<div class="input-group input-group-sm">
-							<span class="input-group-text">
-								<IconSearch />
-							</span>
-							<input
-								v-model="searchQuery"
-								type="text"
-								class="form-control"
-								placeholder="Search products..."
-								@input="handleSearch"
-							>
-							<button
-								v-if="searchQuery"
-								class="btn btn-outline-secondary"
-								type="button"
-								@click="clearSearch"
-							>
-								<IconX />
-							</button>
-						</div>
-					</div>
-
-					<!-- Category Filter -->
-					<div class="col-lg-2">
-						<select
-							v-model="categoryFilter"
-							class="form-select form-select-sm"
-							@change="handleCategoryFilter"
-						>
-							<option value="">
-								All Categories
-							</option>
-							<option
-								v-for="cat in categories"
-								:key="cat"
-								:value="cat"
-							>
-								{{ cat }}
-							</option>
-						</select>
-					</div>
-
-					<!-- Actions -->
-					<div class="col-lg-7">
-						<div class="d-flex gap-2 justify-content-end flex-wrap">
-							<button
-								class="btn btn-primary btn-sm"
-								@click="addProduct"
-							>
-								<IconPlus class="me-1" />
-								Add Product
-							</button>
-							<button
-								class="btn btn-outline-danger btn-sm"
-								:disabled="selectedCount === 0"
-								@click="deleteSelected"
-							>
-								<IconTrash class="me-1" />
-								Delete ({{ selectedCount }})
-							</button>
-							<div class="btn-group">
-								<button
-									class="btn btn-outline-secondary btn-sm"
-									:disabled="!canUndo"
-									title="Undo (Ctrl+Z)"
-									@click="handleUndo"
-								>
-									<IconArrowCounterclockwise />
-								</button>
-								<button
-									class="btn btn-outline-secondary btn-sm"
-									:disabled="!canRedo"
-									title="Redo (Ctrl+Y)"
-									@click="handleRedo"
-								>
-									<IconArrowClockwise />
-								</button>
-							</div>
-							<button
-								class="btn btn-outline-secondary btn-sm"
-								@click="resetTable"
-							>
-								<IconArrowRepeat class="me-1" />
-								Reset
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Table -->
-		<div class="card shadow-sm mb-3">
-			<div class="table-responsive">
-				<table
-					ref="tableRef"
-					class="table table-hover table-striped mb-0 align-middle"
-				>
-					<!-- Table structure built via useTable -->
-				</table>
-			</div>
-		</div>
-
-		<!-- Footer Stats -->
-		<div class="card shadow-sm mb-4">
-			<div class="card-body py-2">
-				<div class="row text-center">
-					<div class="col">
-						<div class="small text-muted">
-							Products
-						</div>
-						<div class="fw-bold">
-							{{ rowCount }}
-						</div>
-					</div>
-					<div class="col">
-						<div class="small text-muted">
-							Total Stock
-						</div>
-						<div class="fw-bold">
-							{{ totalStock.toLocaleString() }}
-						</div>
-					</div>
-					<div class="col">
-						<div class="small text-muted">
-							Total Value
-						</div>
-						<div class="fw-bold text-success">
-							${{ totalValue.toLocaleString() }}
-						</div>
-					</div>
-					<div class="col">
-						<div class="small text-muted">
-							Avg Price
-						</div>
-						<div class="fw-bold">
-							${{ avgPrice.toFixed(2) }}
-						</div>
-					</div>
-					<div class="col">
-						<div class="small text-muted">
-							Low Stock
-						</div>
-						<div
-							class="fw-bold"
-							:class="lowStockCount > 0 ? 'text-warning' : 'text-success'"
-						>
-							{{ lowStockCount }}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Instructions -->
-		<div class="alert alert-info mb-4">
-			<strong>Try it:</strong>
-			<ul class="mb-0 small">
-				<li><strong>Sort:</strong> Click column headers</li>
-				<li><strong>Select:</strong> Click rows (Shift+click for range, Ctrl+click for multi)</li>
-				<li><strong>Edit:</strong> Double-click any cell to edit inline</li>
-				<li><strong>Search:</strong> Filter products in real-time</li>
-				<li><strong>Undo/Redo:</strong> Ctrl+Z / Ctrl+Y or toolbar buttons</li>
-			</ul>
-		</div>
-
-		<!-- Code Example -->
-		<CodeBlock :code="codeExample" />
-	</section>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { useTable } from '@mikestools/usetable'
-
-import CodeBlock from '@mikestools/usetools/components/CodeBlock.vue'
-import IconTable from 'bootstrap-icons/icons/table.svg?component'
-import IconSearch from 'bootstrap-icons/icons/search.svg?component'
-import IconX from 'bootstrap-icons/icons/x-lg.svg?component'
-import IconPlus from 'bootstrap-icons/icons/plus-lg.svg?component'
-import IconTrash from 'bootstrap-icons/icons/trash.svg?component'
-import IconArrowCounterclockwise from 'bootstrap-icons/icons/arrow-counterclockwise.svg?component'
-import IconArrowClockwise from 'bootstrap-icons/icons/arrow-clockwise.svg?component'
-import IconArrowRepeat from 'bootstrap-icons/icons/arrow-repeat.svg?component'
-
-const tableRef = ref<HTMLTableElement>()
-
-// Reactive state
-const rowCount = ref(0)
-const selectedCount = ref(0)
-const canUndo = ref(false)
-const canRedo = ref(false)
-const searchQuery = ref('')
-const categoryFilter = ref('')
-
-// Aggregation computed values
-const totalStock = ref(0)
-const totalValue = ref(0)
-const avgPrice = ref(0)
-const lowStockCount = ref(0)
-
-// Sample data
-const categories = ['Electronics', 'Accessories', 'Audio', 'Storage', 'Display']
-
-const sampleProducts = [
-	['PRD-001', 'MacBook Pro 14"', 'Electronics', 1999.99, 25, 'Active'],
-	['PRD-002', 'Magic Keyboard', 'Accessories', 99.99, 150, 'Active'],
-	['PRD-003', 'AirPods Pro', 'Audio', 249.99, 75, 'Active'],
-	['PRD-004', 'USB-C Hub', 'Accessories', 79.99, 200, 'Active'],
-	['PRD-005', 'Studio Display', 'Display', 1599.99, 12, 'Low Stock'],
-	['PRD-006', 'Magic Mouse', 'Accessories', 79.99, 180, 'Active'],
-	['PRD-007', 'HomePod Mini', 'Audio', 99.99, 90, 'Active'],
-	['PRD-008', 'iPad Pro 12.9"', 'Electronics', 1099.99, 35, 'Active'],
-	['PRD-009', 'External SSD 1TB', 'Storage', 149.99, 8, 'Low Stock'],
-	['PRD-010', 'Thunderbolt Cable', 'Accessories', 49.99, 300, 'Active'],
-]
-
-let productCounter = 10
-let table: ReturnType<typeof useTable> | undefined
-let cleanupEditing: (() => void) | undefined
-let cleanupKeyboard: (() => void) | undefined
-
-onMounted(() => {
-	const element = tableRef.value
-	if (!element) return
-
-	table = useTable(ref(element))
-
-	// Set up table structure
-	table.setCaption('Product Inventory')
-	table.setHeaders(['SKU', 'Product Name', 'Category', 'Price ($)', 'Stock', 'Status'])
-	table.setData(sampleProducts)
-
-	// Add footer with totals
-	updateFooter()
-
-	// Enable features
-	cleanupEditing = table.enableEditing()
-	cleanupKeyboard = table.enableKeyboardNavigation()
-
-	// Set row key function for identification (using SKU)
-	table.setRowKeyFunction((row) => String(row[0]))
-
-	// Watch for changes
-	table.onDataChange(() => {
-		updateStats()
-		updateFooter()
-	})
-
-	table.onRowSelectionChange((selected) => {
-		selectedCount.value = selected.size
-	})
-
-	table.onSortChange(() => {
-		updateStats()
-	})
-
-	// Initial stats
-	updateStats()
-
-	// Add keyboard shortcuts
-	document.addEventListener('keydown', handleKeyDown)
-})
-
-onUnmounted(() => {
-	cleanupEditing?.()
-	cleanupKeyboard?.()
-	document.removeEventListener('keydown', handleKeyDown)
-})
-
-function handleKeyDown(event: KeyboardEvent) {
-	if (event.ctrlKey || event.metaKey) {
-		if (event.key === 'z') {
-			event.preventDefault()
-			handleUndo()
-		} else if (event.key === 'y') {
-			event.preventDefault()
-			handleRedo()
-		}
-	}
-}
-
-function updateStats() {
-	if (!table) return
-
-	rowCount.value = table.rowCount.value
-	canUndo.value = table.canUndo()
-	canRedo.value = table.canRedo()
-
-	// Aggregations
-	totalStock.value = table.sum(4)
-	const priceSum = table.sum(3)
-	avgPrice.value = rowCount.value > 0 ? priceSum / rowCount.value : 0
-	totalValue.value = calculateTotalValue()
-	lowStockCount.value = table.count(5, (val) => val === 'Low Stock')
-}
-
-function calculateTotalValue(): number {
-	if (!table) return 0
-	const data = table.data.value
-	return data.reduce((sum, row) => {
-		const price = Number(row[3]) || 0
-		const stock = Number(row[4]) || 0
-		return sum + price * stock
-	}, 0)
-}
-
-function updateFooter() {
-	if (!table) return
-	const priceSum = table.sum(3)
-	const stockSum = table.sum(4)
-	table.setFooter(['', 'TOTALS', '', `$${priceSum.toFixed(2)}`, stockSum.toString(), ''])
-}
-
-function addProduct() {
-	if (!table) return
-	productCounter++
-	const newProduct = [
-		`PRD-${String(productCounter).padStart(3, '0')}`,
-		`New Product ${productCounter}`,
-		categories[Math.floor(Math.random() * categories.length)],
-		(Math.random() * 500 + 50).toFixed(2),
-		Math.floor(Math.random() * 100 + 10),
-		'Active',
-	]
-	table.addRow(newProduct)
-	updateStats()
-}
-
-function deleteSelected() {
-	if (!table) return
-	const selected = Array.from(table.selectedRows.value).sort((a, b) => b - a)
-	table.transaction(() => {
-		for (const index of selected) {
-			table!.removeRow(index)
-		}
-	})
-	table.clearSelection()
-	updateStats()
-}
-
-function handleUndo() {
-	if (!table) return
-	table.undo()
-	updateStats()
-}
-
-function handleRedo() {
-	if (!table) return
-	table.redo()
-	updateStats()
-}
-
-function handleSearch() {
-	if (!table) return
-	if (searchQuery.value) {
-		table.filterRows((row) => {
-			const query = searchQuery.value.toLowerCase()
-			return row.some((cell) => String(cell).toLowerCase().includes(query))
-		})
-	} else {
-		table.clearFilters()
-	}
-	updateStats()
-}
-
-function clearSearch() {
-	searchQuery.value = ''
-	handleSearch()
-}
-
-function handleCategoryFilter() {
-	if (!table) return
-	if (categoryFilter.value) {
-		table.filterColumnByValue(2, categoryFilter.value)
-	} else {
-		table.clearFilters()
-	}
-	updateStats()
-}
-
-function resetTable() {
-	if (!table) return
-	table.setData(sampleProducts)
-	table.clearSelection()
-	table.clearFilters()
-	searchQuery.value = ''
-	categoryFilter.value = ''
-	productCounter = 10
-	updateStats()
-}
-
-// Watch for filter changes to clear search when category changes
-watch(categoryFilter, () => {
-	if (categoryFilter.value && searchQuery.value) {
-		searchQuery.value = ''
-	}
-})
-
-const codeExample = `import { ref, onMounted, onUnmounted } from 'vue'
-import { useTable } from '@mikestools/usetable'
-
-const tableRef = ref<HTMLTableElement>()
-let table: ReturnType<typeof useTable>
-
-onMounted(() => {
-  table = useTable(ref(tableRef.value!))
-
-  // Set up structure
-  table.setHeaders(['SKU', 'Product', 'Category', 'Price', 'Stock', 'Status'])
-  table.setData([
-    ['PRD-001', 'MacBook Pro', 'Electronics', 1999.99, 25, 'Active'],
-    ['PRD-002', 'Magic Keyboard', 'Accessories', 99.99, 150, 'Active'],
-  ])
-
-  // Enable inline editing (double-click to edit)
-  const cleanupEdit = table.enableEditing()
-
-  // Enable keyboard navigation (arrow keys)
-  const cleanupNav = table.enableKeyboardNavigation()
-
-  // Set row key for identification
-  table.setRowKeyFunction((row) => String(row[0]))
-
-  // React to changes
-  table.onDataChange((data) => {
-    console.log('Data changed:', data)
-    // Save to database, localStorage, etc.
-  })
-
-  // Aggregations
-  const totalStock = table.sum(4)        // Sum of Stock column
-  const avgPrice = table.average(3)      // Average of Price column
-  const lowStock = table.count(5, (v) => v === 'Low Stock')
-
-  // Sorting
-  table.sortColumnAscending(1)           // Sort by Product name
-
-  // Filtering
-  table.filterColumnByValue(2, 'Electronics')  // Show only Electronics
-
-  // Selection
-  table.selectRow(0)
-  table.selectRowRange(0, 2)             // Select rows 0-2
-
-  // Undo/Redo
-  table.setCell(0, 4, 30)                // Change stock
-  table.undo()                            // Revert change
-
-  // Transactions (atomic operations)
-  table.transaction(() => {
-    table.addRow(['PRD-003', 'New', 'Audio', 199.99, 50, 'Active'])
-    table.setCell(0, 4, 20)
-    // If any fails, all changes roll back
-  })
-})`
-</script>
+<template>
+	<section id="basicTable">
+		<h2 class="h4 mb-3">
+			<IconTable class="me-2" />
+			Basic Table Operations
+		</h2>
+		<p class="text-muted mb-4">
+			A comprehensive product inventory example showing core table operations:
+			headers, rows, cells, and reactive data binding.
+		</p>
+
+		<!-- Toolbar -->
+		<div class="card shadow-sm mb-3">
+			<div class="card-body py-2">
+				<div class="d-flex gap-2 flex-wrap align-items-center">
+					<button
+						class="btn btn-success btn-sm"
+						@click="addProduct"
+					>
+						<IconPlus class="me-1" />
+						Add Product
+					</button>
+					<button
+						class="btn btn-outline-warning btn-sm"
+						:disabled="rowCount === 0"
+						@click="updateRandomPrice"
+					>
+						<IconPencil class="me-1" />
+						Update Random Price
+					</button>
+					<button
+						class="btn btn-outline-danger btn-sm"
+						:disabled="rowCount === 0"
+						@click="removeLastRow"
+					>
+						<IconTrash class="me-1" />
+						Remove Last
+					</button>
+					<button
+						class="btn btn-outline-secondary btn-sm"
+						@click="resetTable"
+					>
+						<IconArrowRepeat class="me-1" />
+						Reset
+					</button>
+					<div class="vr mx-2" />
+					<div class="form-check form-switch mb-0">
+						<input
+							id="showFooter"
+							v-model="showFooter"
+							class="form-check-input"
+							type="checkbox"
+							@change="toggleFooter"
+						>
+						<label
+							class="form-check-label small"
+							for="showFooter"
+						>
+							Show Totals
+						</label>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Table -->
+		<div class="card shadow-sm mb-3">
+			<div class="table-responsive">
+				<table
+					ref="tableRef"
+					class="table table-hover table-striped mb-0 align-middle"
+				>
+					<!-- Table structure built via useTable -->
+				</table>
+			</div>
+		</div>
+
+		<!-- Stats Panel -->
+		<div class="row g-3 mb-4">
+			<div class="col-md-3">
+				<div class="card bg-primary text-white">
+					<div class="card-body py-2 text-center">
+						<div class="small opacity-75">
+							Total Products
+						</div>
+						<div class="h4 mb-0">
+							{{ rowCount }}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-3">
+				<div class="card bg-success text-white">
+					<div class="card-body py-2 text-center">
+						<div class="small opacity-75">
+							Total Value
+						</div>
+						<div class="h4 mb-0">
+							${{ totalValue.toLocaleString('en-US', { minimumFractionDigits: 2 }) }}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-3">
+				<div class="card bg-info text-white">
+					<div class="card-body py-2 text-center">
+						<div class="small opacity-75">
+							Total Stock
+						</div>
+						<div class="h4 mb-0">
+							{{ totalStock }} units
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-3">
+				<div class="card bg-warning text-dark">
+					<div class="card-body py-2 text-center">
+						<div class="small opacity-75">
+							Columns
+						</div>
+						<div class="h4 mb-0">
+							{{ columnCount }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Instructions -->
+		<div class="alert alert-info mb-4">
+			<h6 class="alert-heading">
+				<IconInfoCircle class="me-1" />
+				What this demonstrates
+			</h6>
+			<ul class="mb-0 small">
+				<li><strong>Reactive Data:</strong> Stats automatically update when data changes</li>
+				<li><strong>Row Operations:</strong> Add, update, and remove rows dynamically</li>
+				<li><strong>Cell Operations:</strong> Update individual cell values</li>
+				<li><strong>Footer:</strong> Optional summary row with totals</li>
+				<li><strong>Computed Values:</strong> Calculate totals from table data</li>
+			</ul>
+		</div>
+
+		<!-- Code Example -->
+		<CodeBlock :code="codeExample" />
+	</section>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { useTable, type UseTableReturn } from '@mikestools/usetable'
+
+import CodeBlock from '@mikestools/usetools/components/CodeBlock.vue'
+import IconTable from 'bootstrap-icons/icons/table.svg?component'
+import IconPlus from 'bootstrap-icons/icons/plus-lg.svg?component'
+import IconPencil from 'bootstrap-icons/icons/pencil.svg?component'
+import IconTrash from 'bootstrap-icons/icons/trash.svg?component'
+import IconArrowRepeat from 'bootstrap-icons/icons/arrow-repeat.svg?component'
+import IconInfoCircle from 'bootstrap-icons/icons/info-circle.svg?component'
+
+const tableRef = ref<HTMLTableElement>()
+const showFooter = ref(true)
+
+// Tracked state - updated via onDataChange callback
+const rowCount = ref(0)
+const columnCount = ref(0)
+const totalValue = ref(0)
+const totalStock = ref(0)
+
+// Table instance stored for method access
+let table: UseTableReturn | undefined
+
+// Sample product data
+const sampleProducts: (string | number)[][] = [
+	['PRD-001', 'MacBook Pro 14"', 'Electronics', 1999.99, 25],
+	['PRD-002', 'Magic Keyboard', 'Accessories', 99.99, 150],
+	['PRD-003', 'AirPods Pro 2', 'Audio', 249.99, 75],
+	['PRD-004', 'USB-C Hub 7-in-1', 'Accessories', 79.99, 200],
+	['PRD-005', 'Studio Display 27"', 'Displays', 1599.99, 12],
+]
+
+const categories = ['Electronics', 'Accessories', 'Audio', 'Displays', 'Storage', 'Peripherals']
+const productNames = ['Wireless Mouse', 'Webcam HD', 'External SSD', 'Monitor Stand', 'Desk Lamp', 'Cable Kit']
+
+let productCounter = 5
+
+/**
+ * Update all tracked stats from the table
+ */
+function updateStats() {
+	if (!table) return
+
+	rowCount.value = table.rowCount.value
+	columnCount.value = table.columnCount.value
+
+	// Calculate totals from table data
+	let valueSum = 0
+	let stockSum = 0
+
+	for (const row of table.data.value) {
+		const price = Number(row[3]) || 0
+		const stock = Number(row[4]) || 0
+		valueSum += price * stock
+		stockSum += stock
+	}
+
+	totalValue.value = valueSum
+	totalStock.value = stockSum
+}
+
+/**
+ * Update footer with current totals
+ */
+function updateFooter() {
+	if (!table) return
+
+	table.setFooter([
+		'',
+		`${rowCount.value} Products`,
+		'',
+		`$${totalValue.value.toLocaleString('en-US', { minimumFractionDigits: 2 })}`,
+		`${totalStock.value} units`
+	])
+
+	// Style the footer
+	const element = tableRef.value
+	if (element) {
+		const tfoot = element.tFoot
+		if (tfoot) {
+			tfoot.classList.add('table-dark')
+			const row = tfoot.rows[0]
+			if (row) {
+				row.classList.add('fw-bold')
+			}
+		}
+	}
+}
+
+onMounted(() => {
+	const element = tableRef.value
+	if (!element) return
+
+	// Create table instance
+	table = useTable(ref(element), sampleProducts, {
+		headers: ['SKU', 'Product Name', 'Category', 'Price ($)', 'Stock'],
+		caption: 'Product Inventory',
+	})
+
+	// Initial stats calculation
+	updateStats()
+
+	// Set initial footer if enabled
+	if (showFooter.value) {
+		updateFooter()
+	}
+
+	// Subscribe to data changes to keep stats in sync
+	table.onDataChange(() => {
+		updateStats()
+		if (showFooter.value) {
+			updateFooter()
+		}
+	})
+})
+
+// Watch for footer toggle
+watch(showFooter, (show) => {
+	if (show) {
+		updateFooter()
+	} else {
+		table?.clearFooter()
+	}
+})
+
+function addProduct() {
+	if (!table) return
+	productCounter++
+
+	const category = categories[Math.floor(Math.random() * categories.length)]
+	const name = productNames[Math.floor(Math.random() * productNames.length)]
+	const price = (Math.random() * 300 + 29.99).toFixed(2)
+	const stock = Math.floor(Math.random() * 100 + 5)
+
+	table.addRow([
+		`PRD-${String(productCounter).padStart(3, '0')}`,
+		name,
+		category,
+		price,
+		stock
+	])
+}
+
+function updateRandomPrice() {
+	if (!table || rowCount.value === 0) return
+
+	const randomRow = Math.floor(Math.random() * rowCount.value)
+	const currentPrice = Number(table.getCell(randomRow, 3)) || 0
+	const change = (Math.random() - 0.5) * 100 // -50 to +50
+	const newPrice = Math.max(9.99, currentPrice + change).toFixed(2)
+
+	table.setCell(randomRow, 3, newPrice)
+
+	// Flash the row to show the change
+	const element = tableRef.value
+	if (element) {
+		const tbody = element.tBodies[0]
+		if (tbody) {
+			const row = tbody.rows[randomRow]
+			if (row) {
+				row.classList.add('table-warning')
+				setTimeout(() => row.classList.remove('table-warning'), 500)
+			}
+		}
+	}
+}
+
+function removeLastRow() {
+	if (!table || rowCount.value === 0) return
+	table.removeRow(rowCount.value - 1)
+}
+
+function resetTable() {
+	if (!table) return
+	table.setData(sampleProducts)
+	productCounter = 5
+}
+
+function toggleFooter() {
+	// Handled by watcher
+}
+
+const codeExample = `import { ref, onMounted } from 'vue'
+import { useTable, type CellValue } from '@mikestools/usetable'
+
+const tableRef = ref<HTMLTableElement>()
+
+// Tracked stats - updated via callback
+const rowCount = ref(0)
+const totalValue = ref(0)
+
+// Table instance
+let table
+
+onMounted(() => {
+  // Initialize table with data and options
+  table = useTable(ref(tableRef.value!), [
+    ['PRD-001', 'MacBook Pro', 'Electronics', 1999.99, 25],
+    ['PRD-002', 'Magic Keyboard', 'Accessories', 99.99, 150],
+  ], {
+    headers: ['SKU', 'Product', 'Category', 'Price', 'Stock'],
+    caption: 'Product Inventory'
+  })
+
+  // Calculate stats
+  function updateStats() {
+    rowCount.value = table.rowCount.value
+    totalValue.value = table.data.value.reduce((sum, row) => {
+      return sum + (Number(row[3]) * Number(row[4]))
+    }, 0)
+  }
+
+  // Initial calculation
+  updateStats()
+
+  // Subscribe to data changes
+  table.onDataChange(() => updateStats())
+
+  // Add a new row
+  table.addRow(['PRD-003', 'AirPods', 'Audio', 249.99, 75])
+
+  // Update a cell value
+  table.setCell(0, 3, 1899.99)
+
+  // Remove a row
+  table.removeRow(1)
+
+  // Set footer with totals
+  table.setFooter(['', 'Total', '', '', totalStock.value])
+})`
+</script>
+