# 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>
  );
}
```