# TableCell

## Description

A table cell component that represents individual data cells within table rows. TableCell provides a standardized way to display content in table structures with consistent styling and accessibility features. It extends the standard HTML table cell element with additional functionality for data presentation.

## Aliases

- TableCell
- Data Cell
- Table Data
- TD Cell

## Props Breakdown

**Extends:** `TdHTMLAttributes<HTMLTableCellElement>`

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `children` | `ReactNode` | - | No | Content to display in the cell |
| `className` | `string` | - | No | Additional CSS class names |

Plus all standard HTML td attributes (scope, headers, colSpan, rowSpan, etc.).

## Examples

### Basic Table Cell

```tsx
import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell } from '@delightui/components';

function BasicTableCellExample() {
  const data = [
    { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { name: 'Bob Johnson', email: 'bob@example.com', role: 'Moderator' }
  ];

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>Email</TableHeaderCell>
          <TableHeaderCell>Role</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((user, index) => (
          <TableRow key={index}>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell>{user.role}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
```

### Table with Different Data Types

```tsx
import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Button, Chip } from '@delightui/components';

function DataTypesTableExample() {
  const orders = [
    { id: 1001, customer: 'Alice Brown', amount: 299.99, status: 'Completed', date: '2024-01-15' },
    { id: 1002, customer: 'Charlie Davis', amount: 156.50, status: 'Pending', date: '2024-01-16' },
    { id: 1003, customer: 'Diana Evans', amount: 89.99, status: 'Cancelled', date: '2024-01-17' }
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'Completed': return 'success';
      case 'Pending': return 'warning';
      case 'Cancelled': return 'error';
      default: return 'neutral';
    }
  };

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Order ID</TableHeaderCell>
          <TableHeaderCell>Customer</TableHeaderCell>
          <TableHeaderCell>Amount</TableHeaderCell>
          <TableHeaderCell>Status</TableHeaderCell>
          <TableHeaderCell>Date</TableHeaderCell>
          <TableHeaderCell>Actions</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {orders.map(order => (
          <TableRow key={order.id}>
            <TableCell>
              <strong>#{order.id}</strong>
            </TableCell>
            <TableCell>{order.customer}</TableCell>
            <TableCell>${order.amount.toFixed(2)}</TableCell>
            <TableCell>
              <Chip color={getStatusColor(order.status)}>
                {order.status}
              </Chip>
            </TableCell>
            <TableCell>{order.date}</TableCell>
            <TableCell>
              <Button size="Small" type="Outlined">
                View
              </Button>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
```

### Table with Complex Cell Content

```tsx
import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Image, Text, Button } from '@delightui/components';

function ComplexContentTableExample() {
  const products = [
    {
      id: 1,
      image: '/images/product-1.jpg',
      name: 'Wireless Headphones',
      description: 'High-quality wireless headphones with noise cancellation',
      price: 199.99,
      stock: 25,
      rating: 4.5
    },
    {
      id: 2,
      image: '/images/product-2.jpg',
      name: 'Smart Watch',
      description: 'Fitness tracking smartwatch with heart rate monitor',
      price: 299.99,
      stock: 12,
      rating: 4.2
    }
  ];

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Product</TableHeaderCell>
          <TableHeaderCell>Price</TableHeaderCell>
          <TableHeaderCell>Stock</TableHeaderCell>
          <TableHeaderCell>Rating</TableHeaderCell>
          <TableHeaderCell>Actions</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {products.map(product => (
          <TableRow key={product.id}>
            <TableCell>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <Image
                  src={product.image}
                  alt={product.name}
                  width={50}
                  height={50}
                  fit="Cover"
                  style={{ borderRadius: '4px' }}
                />
                <div>
                  <Text weight="Bold">{product.name}</Text>
                  <Text size="Small" color="secondary">
                    {product.description}
                  </Text>
                </div>
              </div>
            </TableCell>
            <TableCell>
              <Text weight="Bold">${product.price}</Text>
            </TableCell>
            <TableCell>
              <Text color={product.stock > 20 ? 'success' : product.stock > 10 ? 'warning' : 'error'}>
                {product.stock} units
              </Text>
            </TableCell>
            <TableCell>
              <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                <span>⭐</span>
                <Text>{product.rating}</Text>
              </div>
            </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>
  );
}
```

### Responsive Table Cells

```tsx
import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Text } from '@delightui/components';

function ResponsiveTableExample() {
  const users = [
    { name: 'John Doe', email: 'john@example.com', phone: '+1-555-0123', department: 'Engineering' },
    { name: 'Jane Smith', email: 'jane@example.com', phone: '+1-555-0124', department: 'Marketing' }
  ];

  return (
    <div style={{ overflowX: 'auto' }}>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell className="hide-mobile">Email</TableHeaderCell>
            <TableHeaderCell className="hide-mobile">Phone</TableHeaderCell>
            <TableHeaderCell>Department</TableHeaderCell>
          </TableRow>
        </TableHeader>
        <TableBody>
          {users.map((user, index) => (
            <TableRow key={index}>
              <TableCell>
                <div>
                  <Text weight="Bold">{user.name}</Text>
                  <Text size="Small" className="show-mobile-only">
                    {user.email}
                  </Text>
                </div>
              </TableCell>
              <TableCell className="hide-mobile">{user.email}</TableCell>
              <TableCell className="hide-mobile">{user.phone}</TableCell>
              <TableCell>{user.department}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}
```

### Table with Merged Cells

```tsx
import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell } from '@delightui/components';

function MergedCellsExample() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Product</TableHeaderCell>
          <TableHeaderCell colSpan={2}>Pricing</TableHeaderCell>
          <TableHeaderCell>Stock</TableHeaderCell>
        </TableRow>
        <TableRow>
          <TableHeaderCell></TableHeaderCell>
          <TableHeaderCell>Regular</TableHeaderCell>
          <TableHeaderCell>Sale</TableHeaderCell>
          <TableHeaderCell></TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell rowSpan={2}>Wireless Mouse</TableCell>
          <TableCell>$29.99</TableCell>
          <TableCell>$24.99</TableCell>
          <TableCell>50</TableCell>
        </TableRow>
        <TableRow>
          <TableCell colSpan={2}>
            <Text size="Small" color="secondary">
              Special offer: 15% off until end of month
            </Text>
          </TableCell>
          <TableCell>In Stock</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}
```

### Editable Table Cells

```tsx
import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell, Input, Button } from '@delightui/components';

function EditableTableExample() {
  const [data, setData] = useState([
    { id: 1, name: 'Item 1', quantity: 5, price: 10.99, editing: false },
    { id: 2, name: 'Item 2', quantity: 3, price: 15.99, editing: false }
  ]);

  const handleEdit = (id: number) => {
    setData(data.map(item => 
      item.id === id ? { ...item, editing: true } : item
    ));
  };

  const handleSave = (id: number) => {
    setData(data.map(item => 
      item.id === id ? { ...item, editing: false } : item
    ));
  };

  const handleChange = (id: number, field: string, value: any) => {
    setData(data.map(item => 
      item.id === id ? { ...item, [field]: value } : item
    ));
  };

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>Quantity</TableHeaderCell>
          <TableHeaderCell>Price</TableHeaderCell>
          <TableHeaderCell>Actions</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map(item => (
          <TableRow key={item.id}>
            <TableCell>
              {item.editing ? (
                <Input
                  value={item.name}
                  onValueChange={(value) => handleChange(item.id, 'name', value)}
                />
              ) : (
                item.name
              )}
            </TableCell>
            <TableCell>
              {item.editing ? (
                <Input
                  inputType="Number"
                  value={item.quantity.toString()}
                  onValueChange={(value) => handleChange(item.id, 'quantity', parseInt(value))}
                />
              ) : (
                item.quantity
              )}
            </TableCell>
            <TableCell>
              {item.editing ? (
                <Input
                  inputType="Number"
                  value={item.price.toString()}
                  onValueChange={(value) => handleChange(item.id, 'price', parseFloat(value))}
                />
              ) : (
                `$${item.price.toFixed(2)}`
              )}
            </TableCell>
            <TableCell>
              {item.editing ? (
                <Button size="Small" onClick={() => handleSave(item.id)}>
                  Save
                </Button>
              ) : (
                <Button size="Small" type="Outlined" onClick={() => handleEdit(item.id)}>
                  Edit
                </Button>
              )}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
```

### Styled Table Cells

```tsx
import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell } from '@delightui/components';

function StyledTableCellExample() {
  const financialData = [
    { metric: 'Revenue', q1: 100000, q2: 120000, q3: 110000, q4: 140000 },
    { metric: 'Expenses', q1: 80000, q2: 85000, q3: 90000, q4: 95000 },
    { metric: 'Profit', q1: 20000, q2: 35000, q3: 20000, q4: 45000 }
  ];

  const getCellStyle = (value: number, isProfit: boolean) => {
    if (isProfit) {
      return {
        backgroundColor: value > 30000 ? '#d4edda' : value > 20000 ? '#fff3cd' : '#f8d7da',
        fontWeight: 'bold' as const
      };
    }
    return {};
  };

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Metric</TableHeaderCell>
          <TableHeaderCell>Q1</TableHeaderCell>
          <TableHeaderCell>Q2</TableHeaderCell>
          <TableHeaderCell>Q3</TableHeaderCell>
          <TableHeaderCell>Q4</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {financialData.map((row, index) => (
          <TableRow key={index}>
            <TableCell style={{ fontWeight: 'bold' }}>
              {row.metric}
            </TableCell>
            <TableCell style={getCellStyle(row.q1, row.metric === 'Profit')}>
              ${row.q1.toLocaleString()}
            </TableCell>
            <TableCell style={getCellStyle(row.q2, row.metric === 'Profit')}>
              ${row.q2.toLocaleString()}
            </TableCell>
            <TableCell style={getCellStyle(row.q3, row.metric === 'Profit')}>
              ${row.q3.toLocaleString()}
            </TableCell>
            <TableCell style={getCellStyle(row.q4, row.metric === 'Profit')}>
              ${row.q4.toLocaleString()}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
```

### Accessibility Features

```tsx
import { Table, TableBody, TableRow, TableCell, TableHeader, TableHeaderCell } from '@delightui/components';

function AccessibleTableExample() {
  return (
    <Table role="table" aria-label="Employee data">
      <TableHeader>
        <TableRow>
          <TableHeaderCell id="name" scope="col">Employee Name</TableHeaderCell>
          <TableHeaderCell id="salary" scope="col">Annual Salary</TableHeaderCell>
          <TableHeaderCell id="department" scope="col">Department</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell headers="name">John Smith</TableCell>
          <TableCell headers="salary" aria-label="75,000 dollars">
            $75,000
          </TableCell>
          <TableCell headers="department">Engineering</TableCell>
        </TableRow>
        <TableRow>
          <TableCell headers="name">Sarah Johnson</TableCell>
          <TableCell headers="salary" aria-label="85,000 dollars">
            $85,000
          </TableCell>
          <TableCell headers="department">Marketing</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}
```