@delightui/components 0.1.105 → 0.1.107

package/docs/components/organisms/TableRow.md

@@ -0,0 +1,715 @@
+# TableRow
+
+## Description
+
+A table row component that represents individual rows within table structures. TableRow provides a semantic container for table cells with consistent styling, hover effects, and accessibility features. It extends the standard HTML table row element with enhanced functionality for data presentation and user interactions.
+
+## Aliases
+
+- TableRow
+- Table Row
+- TR Element
+- Row Container
+- Data Row
+
+## Props Breakdown
+
+**Extends:** `HTMLAttributes<HTMLTableRowElement>`
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | - | No | Content to display in the row (typically TableCell components) |
+| `className` | `string` | - | No | Additional CSS class names |
+
+Plus all standard HTML tr attributes (onClick, onMouseOver, role, etc.).
+
+## Examples
+
+### Basic Table Row
+
+```tsx
+import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell } from '@delightui/components';
+
+function BasicTableRowExample() {
+  const users = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Moderator' }
+  ];
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>ID</TableHeaderCell>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>Email</TableHeaderCell>
+          <TableHeaderCell>Role</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(user => (
+          <TableRow key={user.id}>
+            <TableCell>{user.id}</TableCell>
+            <TableCell>{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>{user.role}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Interactive Table Rows
+
+```tsx
+import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Button, Text } from '@delightui/components';
+
+function InteractiveTableRowExample() {
+  const [selectedRow, setSelectedRow] = useState<number | null>(null);
+  
+  const products = [
+    { id: 1, name: 'Wireless Headphones', price: 199.99, stock: 25, category: 'Electronics' },
+    { id: 2, name: 'Coffee Maker', price: 89.99, stock: 12, category: 'Appliances' },
+    { id: 3, name: 'Desk Lamp', price: 45.99, stock: 30, category: 'Furniture' },
+    { id: 4, name: 'Notebook Set', price: 15.99, stock: 100, category: 'Stationery' }
+  ];
+
+  const handleRowClick = (productId: number) => {
+    setSelectedRow(selectedRow === productId ? null : productId);
+  };
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Product</TableHeaderCell>
+          <TableHeaderCell>Price</TableHeaderCell>
+          <TableHeaderCell>Stock</TableHeaderCell>
+          <TableHeaderCell>Category</TableHeaderCell>
+          <TableHeaderCell>Actions</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {products.map(product => (
+          <TableRow
+            key={product.id}
+            onClick={() => handleRowClick(product.id)}
+            style={{
+              backgroundColor: selectedRow === product.id ? '#e3f2fd' : 'transparent',
+              cursor: 'pointer',
+              transition: 'background-color 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              if (selectedRow !== product.id) {
+                (e.target as HTMLElement).style.backgroundColor = '#f5f5f5';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (selectedRow !== product.id) {
+                (e.target as HTMLElement).style.backgroundColor = 'transparent';
+              }
+            }}
+          >
+            <TableCell>
+              <Text weight={selectedRow === product.id ? 'Bold' : 'Medium'}>
+                {product.name}
+              </Text>
+            </TableCell>
+            <TableCell>${product.price.toFixed(2)}</TableCell>
+            <TableCell>{product.stock}</TableCell>
+            <TableCell>{product.category}</TableCell>
+            <TableCell>
+              <div style={{ display: 'flex', gap: '8px' }}>
+                <Button size="Small" type="Outlined">Edit</Button>
+                <Button size="Small" style="Destructive">Delete</Button>
+              </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Expandable Table Rows
+
+```tsx
+import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Button, Text } from '@delightui/components';
+
+function ExpandableTableRowExample() {
+  const [expandedRows, setExpandedRows] = useState<Set<number>>(new Set());
+  
+  const orders = [
+    {
+      id: 1001,
+      customer: 'Alice Johnson',
+      date: '2024-01-15',
+      total: 299.99,
+      status: 'Shipped',
+      items: [
+        { name: 'Wireless Headphones', quantity: 1, price: 199.99 },
+        { name: 'Phone Case', quantity: 2, price: 50.00 }
+      ]
+    },
+    {
+      id: 1002,
+      customer: 'Bob Wilson',
+      date: '2024-01-16',
+      total: 156.50,
+      status: 'Processing',
+      items: [
+        { name: 'Coffee Mug', quantity: 3, price: 15.99 },
+        { name: 'Notebook', quantity: 5, price: 18.99 }
+      ]
+    }
+  ];
+
+  const toggleExpanded = (orderId: number) => {
+    const newExpanded = new Set(expandedRows);
+    if (newExpanded.has(orderId)) {
+      newExpanded.delete(orderId);
+    } else {
+      newExpanded.add(orderId);
+    }
+    setExpandedRows(newExpanded);
+  };
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Order ID</TableHeaderCell>
+          <TableHeaderCell>Customer</TableHeaderCell>
+          <TableHeaderCell>Date</TableHeaderCell>
+          <TableHeaderCell>Total</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell>Actions</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {orders.map(order => (
+          <React.Fragment key={order.id}>
+            <TableRow>
+              <TableCell>#{order.id}</TableCell>
+              <TableCell>{order.customer}</TableCell>
+              <TableCell>{order.date}</TableCell>
+              <TableCell>${order.total.toFixed(2)}</TableCell>
+              <TableCell>{order.status}</TableCell>
+              <TableCell>
+                <Button
+                  size="Small"
+                  type="Outlined"
+                  onClick={() => toggleExpanded(order.id)}
+                >
+                  {expandedRows.has(order.id) ? 'Hide Details' : 'Show Details'}
+                </Button>
+              </TableCell>
+            </TableRow>
+            {expandedRows.has(order.id) && (
+              <TableRow style={{ backgroundColor: '#f8f9fa' }}>
+                <TableCell colSpan={6}>
+                  <div style={{ padding: '16px' }}>
+                    <Text weight="Bold" style={{ marginBottom: '12px' }}>
+                      Order Items:
+                    </Text>
+                    <Table style={{ marginBottom: '0' }}>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHeaderCell>Item</TableHeaderCell>
+                          <TableHeaderCell>Quantity</TableHeaderCell>
+                          <TableHeaderCell>Price</TableHeaderCell>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {order.items.map((item, index) => (
+                          <TableRow key={index}>
+                            <TableCell>{item.name}</TableCell>
+                            <TableCell>{item.quantity}</TableCell>
+                            <TableCell>${item.price.toFixed(2)}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+          </React.Fragment>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Striped Table Rows
+
+```tsx
+import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell } from '@delightui/components';
+
+function StripedTableRowExample() {
+  const employees = [
+    { name: 'Alice Brown', department: 'Engineering', salary: 75000, startDate: '2023-01-15' },
+    { name: 'Bob Davis', department: 'Marketing', salary: 65000, startDate: '2023-02-20' },
+    { name: 'Carol Evans', department: 'Design', salary: 70000, startDate: '2023-03-10' },
+    { name: 'David Wilson', department: 'Sales', salary: 60000, startDate: '2023-04-05' },
+    { name: 'Emma Johnson', department: 'HR', salary: 58000, startDate: '2023-05-12' }
+  ];
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Employee Name</TableHeaderCell>
+          <TableHeaderCell>Department</TableHeaderCell>
+          <TableHeaderCell>Salary</TableHeaderCell>
+          <TableHeaderCell>Start Date</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {employees.map((employee, index) => (
+          <TableRow
+            key={index}
+            style={{
+              backgroundColor: index % 2 === 0 ? '#ffffff' : '#f8f9fa'
+            }}
+          >
+            <TableCell>{employee.name}</TableCell>
+            <TableCell>{employee.department}</TableCell>
+            <TableCell>${employee.salary.toLocaleString()}</TableCell>
+            <TableCell>{employee.startDate}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Conditional Row Styling
+
+```tsx
+import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Chip } from '@delightui/components';
+
+function ConditionalStyledRowExample() {
+  const projects = [
+    { name: 'Website Redesign', status: 'Completed', progress: 100, priority: 'High', dueDate: '2024-01-15' },
+    { name: 'Mobile App', status: 'In Progress', progress: 75, priority: 'High', dueDate: '2024-02-28' },
+    { name: 'Database Migration', status: 'Overdue', progress: 40, priority: 'Critical', dueDate: '2024-01-20' },
+    { name: 'Security Audit', status: 'Not Started', progress: 0, priority: 'Medium', dueDate: '2024-03-15' },
+    { name: 'Performance Optimization', status: 'In Progress', progress: 60, priority: 'Low', dueDate: '2024-04-01' }
+  ];
+
+  const getRowStyle = (project: any) => {
+    if (project.status === 'Overdue') {
+      return {
+        backgroundColor: '#ffebee',
+        borderLeft: '4px solid #f44336'
+      };
+    }
+    if (project.status === 'Completed') {
+      return {
+        backgroundColor: '#e8f5e8',
+        borderLeft: '4px solid #4caf50'
+      };
+    }
+    if (project.priority === 'Critical') {
+      return {
+        backgroundColor: '#fff3e0',
+        borderLeft: '4px solid #ff9800'
+      };
+    }
+    return {};
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'Completed': return 'success';
+      case 'In Progress': return 'primary';
+      case 'Overdue': return 'error';
+      case 'Not Started': return 'neutral';
+      default: return 'neutral';
+    }
+  };
+
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+      case 'Critical': return 'error';
+      case 'High': return 'warning';
+      case 'Medium': return 'primary';
+      case 'Low': return 'neutral';
+      default: return 'neutral';
+    }
+  };
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Project Name</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell>Progress</TableHeaderCell>
+          <TableHeaderCell>Priority</TableHeaderCell>
+          <TableHeaderCell>Due Date</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {projects.map((project, index) => (
+          <TableRow
+            key={index}
+            style={getRowStyle(project)}
+          >
+            <TableCell style={{ fontWeight: 'bold' }}>
+              {project.name}
+            </TableCell>
+            <TableCell>
+              <Chip color={getStatusColor(project.status)}>
+                {project.status}
+              </Chip>
+            </TableCell>
+            <TableCell>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <div style={{
+                  width: '100px',
+                  height: '8px',
+                  backgroundColor: '#e0e0e0',
+                  borderRadius: '4px',
+                  overflow: 'hidden'
+                }}>
+                  <div style={{
+                    width: `${project.progress}%`,
+                    height: '100%',
+                    backgroundColor: project.progress === 100 ? '#4caf50' : '#2196f3',
+                    transition: 'width 0.3s ease'
+                  }} />
+                </div>
+                <span>{project.progress}%</span>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Chip color={getPriorityColor(project.priority)}>
+                {project.priority}
+              </Chip>
+            </TableCell>
+            <TableCell>{project.dueDate}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Draggable Table Rows
+
+```tsx
+import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Button, Icon } from '@delightui/components';
+
+function DraggableTableRowExample() {
+  const [tasks, setTasks] = useState([
+    { id: 1, name: 'Review code changes', priority: 1, status: 'To Do' },
+    { id: 2, name: 'Update documentation', priority: 2, status: 'In Progress' },
+    { id: 3, name: 'Fix responsive issues', priority: 3, status: 'To Do' },
+    { id: 4, name: 'Optimize database queries', priority: 4, status: 'Done' }
+  ]);
+  
+  const [draggedRow, setDraggedRow] = useState<number | null>(null);
+
+  const handleDragStart = (e: React.DragEvent, taskId: number) => {
+    setDraggedRow(taskId);
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDrop = (e: React.DragEvent, targetTaskId: number) => {
+    e.preventDefault();
+    if (draggedRow === null || draggedRow === targetTaskId) return;
+
+    const draggedIndex = tasks.findIndex(task => task.id === draggedRow);
+    const targetIndex = tasks.findIndex(task => task.id === targetTaskId);
+    
+    const newTasks = [...tasks];
+    const [draggedTask] = newTasks.splice(draggedIndex, 1);
+    newTasks.splice(targetIndex, 0, draggedTask);
+    
+    // Update priorities
+    const updatedTasks = newTasks.map((task, index) => ({
+      ...task,
+      priority: index + 1
+    }));
+    
+    setTasks(updatedTasks);
+    setDraggedRow(null);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedRow(null);
+  };
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Priority</TableHeaderCell>
+          <TableHeaderCell>Task</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell>Actions</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {tasks.map(task => (
+          <TableRow
+            key={task.id}
+            draggable
+            onDragStart={(e) => handleDragStart(e, task.id)}
+            onDragOver={handleDragOver}
+            onDrop={(e) => handleDrop(e, task.id)}
+            onDragEnd={handleDragEnd}
+            style={{
+              opacity: draggedRow === task.id ? 0.5 : 1,
+              cursor: 'move',
+              backgroundColor: draggedRow === task.id ? '#e3f2fd' : 'transparent',
+              transition: 'opacity 0.2s ease, background-color 0.2s ease'
+            }}
+          >
+            <TableCell>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <Icon name="DragOutlined" style={{ cursor: 'grab' }} />
+                {task.priority}
+              </div>
+            </TableCell>
+            <TableCell>{task.name}</TableCell>
+            <TableCell>{task.status}</TableCell>
+            <TableCell>
+              <Button size="Small" type="Outlined">
+                Edit
+              </Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Grouped Table Rows
+
+```tsx
+import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Text } from '@delightui/components';
+
+function GroupedTableRowExample() {
+  const salesData = [
+    { region: 'North America', country: 'USA', sales: 125000, target: 120000 },
+    { region: 'North America', country: 'Canada', sales: 45000, target: 50000 },
+    { region: 'Europe', country: 'Germany', sales: 85000, target: 80000 },
+    { region: 'Europe', country: 'France', sales: 65000, target: 70000 },
+    { region: 'Europe', country: 'UK', sales: 75000, target: 75000 },
+    { region: 'Asia', country: 'Japan', sales: 95000, target: 90000 },
+    { region: 'Asia', country: 'China', sales: 110000, target: 100000 }
+  ];
+
+  const groupedData = salesData.reduce((acc, item) => {
+    if (!acc[item.region]) {
+      acc[item.region] = [];
+    }
+    acc[item.region].push(item);
+    return acc;
+  }, {} as Record<string, typeof salesData>);
+
+  const getRegionTotals = (regionData: typeof salesData) => {
+    return {
+      sales: regionData.reduce((sum, item) => sum + item.sales, 0),
+      target: regionData.reduce((sum, item) => sum + item.target, 0)
+    };
+  };
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Region/Country</TableHeaderCell>
+          <TableHeaderCell>Sales</TableHeaderCell>
+          <TableHeaderCell>Target</TableHeaderCell>
+          <TableHeaderCell>Achievement</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Object.entries(groupedData).map(([region, countries]) => {
+          const totals = getRegionTotals(countries);
+          const achievement = ((totals.sales / totals.target) * 100).toFixed(1);
+          
+          return (
+            <React.Fragment key={region}>
+              <TableRow style={{ 
+                backgroundColor: '#f5f5f5', 
+                fontWeight: 'bold',
+                borderTop: '2px solid #ddd'
+              }}>
+                <TableCell>
+                  <Text weight="Bold" size="Medium">
+                    {region}
+                  </Text>
+                </TableCell>
+                <TableCell>
+                  <Text weight="Bold">
+                    ${totals.sales.toLocaleString()}
+                  </Text>
+                </TableCell>
+                <TableCell>
+                  <Text weight="Bold">
+                    ${totals.target.toLocaleString()}
+                  </Text>
+                </TableCell>
+                <TableCell>
+                  <Text 
+                    weight="Bold"
+                    style={{ 
+                      color: parseFloat(achievement) >= 100 ? '#4caf50' : '#f44336' 
+                    }}
+                  >
+                    {achievement}%
+                  </Text>
+                </TableCell>
+              </TableRow>
+              {countries.map((country, index) => (
+                <TableRow key={`${region}-${country.country}`}>
+                  <TableCell style={{ paddingLeft: '32px' }}>
+                    {country.country}
+                  </TableCell>
+                  <TableCell>${country.sales.toLocaleString()}</TableCell>
+                  <TableCell>${country.target.toLocaleString()}</TableCell>
+                  <TableCell>
+                    {((country.sales / country.target) * 100).toFixed(1)}%
+                  </TableCell>
+                </TableRow>
+              ))}
+            </React.Fragment>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Accessible Table Rows
+
+```tsx
+import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Button } from '@delightui/components';
+
+function AccessibleTableRowExample() {
+  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+  
+  const invoices = [
+    { id: 1, invoice: 'INV-001', client: 'Acme Corp', amount: 2500.00, status: 'Paid', date: '2024-01-15' },
+    { id: 2, invoice: 'INV-002', client: 'Global Solutions', amount: 1800.00, status: 'Pending', date: '2024-01-18' },
+    { id: 3, invoice: 'INV-003', client: 'Tech Innovations', amount: 3200.00, status: 'Overdue', date: '2024-01-10' }
+  ];
+
+  const toggleRowSelection = (invoiceId: number) => {
+    const newSelection = new Set(selectedRows);
+    if (newSelection.has(invoiceId)) {
+      newSelection.delete(invoiceId);
+    } else {
+      newSelection.add(invoiceId);
+    }
+    setSelectedRows(newSelection);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, invoiceId: number) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleRowSelection(invoiceId);
+    }
+  };
+
+  return (
+    <Table 
+      role="table" 
+      aria-label="Invoice management table"
+    >
+      <TableHeader>
+        <TableRow role="row">
+          <TableHeaderCell scope="col">Invoice</TableHeaderCell>
+          <TableHeaderCell scope="col">Client</TableHeaderCell>
+          <TableHeaderCell scope="col">Amount</TableHeaderCell>
+          <TableHeaderCell scope="col">Status</TableHeaderCell>
+          <TableHeaderCell scope="col">Date</TableHeaderCell>
+          <TableHeaderCell scope="col">Actions</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map(invoice => (
+          <TableRow
+            key={invoice.id}
+            role="row"
+            tabIndex={0}
+            aria-selected={selectedRows.has(invoice.id)}
+            onClick={() => toggleRowSelection(invoice.id)}
+            onKeyDown={(e) => handleKeyDown(e, invoice.id)}
+            style={{
+              backgroundColor: selectedRows.has(invoice.id) ? '#e3f2fd' : 'transparent',
+              cursor: 'pointer',
+              outline: 'none'
+            }}
+            onFocus={(e) => {
+              (e.target as HTMLElement).style.boxShadow = '0 0 0 2px #2196f3';
+            }}
+            onBlur={(e) => {
+              (e.target as HTMLElement).style.boxShadow = 'none';
+            }}
+            aria-label={`Invoice ${invoice.invoice} for ${invoice.client}, amount $${invoice.amount}, status ${invoice.status}`}
+          >
+            <TableCell role="cell">
+              <strong>{invoice.invoice}</strong>
+            </TableCell>
+            <TableCell role="cell">{invoice.client}</TableCell>
+            <TableCell role="cell" aria-label={`Amount: ${invoice.amount} dollars`}>
+              ${invoice.amount.toFixed(2)}
+            </TableCell>
+            <TableCell role="cell">
+              <span 
+                style={{
+                  padding: '4px 8px',
+                  borderRadius: '4px',
+                  fontSize: '12px',
+                  fontWeight: 'bold',
+                  backgroundColor: 
+                    invoice.status === 'Paid' ? '#4caf50' : 
+                    invoice.status === 'Pending' ? '#ff9800' : '#f44336',
+                  color: 'white'
+                }}
+                aria-label={`Status: ${invoice.status}`}
+              >
+                {invoice.status}
+              </span>
+            </TableCell>
+            <TableCell role="cell">{invoice.date}</TableCell>
+            <TableCell role="cell">
+              <Button 
+                size="Small" 
+                type="Outlined"
+                aria-label={`View details for invoice ${invoice.invoice}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  console.log('View invoice:', invoice.id);
+                }}
+              >
+                View
+              </Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```