@delightui/components 0.1.105 → 0.1.107

package/docs/components/organisms/TableCell.md

@@ -0,0 +1,482 @@
+# 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>
+  );
+}
+```