@mikestools/usetable 0.0.1 → 0.0.2

package/showcase/examples/BasicExample.vue

@@ -0,0 +1,474 @@
+<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>