@delightui/components 0.1.104 → 0.1.106

package/docs/components/organisms/TableHeader.md

@@ -0,0 +1,513 @@
+# TableHeader
+
+## Description
+
+A semantic container component that wraps the header section of a table. TableHeader provides proper HTML structure for table headers and ensures accessibility compliance by creating the `<thead>` element that groups header content together.
+
+## Aliases
+
+- TableHeader
+- TableHead
+- THead
+- HeaderSection
+- TableHeaderGroup
+
+## Props Breakdown
+
+**Extends:** `HTMLAttributes<HTMLTableSectionElement>`
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | - | Yes | Table header content, typically TableRow components containing TableHeaderCell elements |
+
+Plus all standard HTML table section attributes (id, className, style, role, etc.).
+
+## Examples
+
+### Basic Table Header
+```tsx
+import { Table, TableHeader, TableBody, TableRow, TableHeaderCell, TableCell } from '@delightui/components';
+
+function BasicHeaderExample() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>Email</TableHeaderCell>
+          <TableHeaderCell>Role</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>John Doe</TableCell>
+          <TableCell>john@example.com</TableCell>
+          <TableCell>Admin</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Multi-Row Header
+```tsx
+function MultiRowHeaderExample() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell rowSpan={2}>Employee</TableHeaderCell>
+          <TableHeaderCell colSpan={2}>Contact Info</TableHeaderCell>
+          <TableHeaderCell colSpan={2}>Employment</TableHeaderCell>
+        </TableRow>
+        <TableRow>
+          <TableHeaderCell>Email</TableHeaderCell>
+          <TableHeaderCell>Phone</TableHeaderCell>
+          <TableHeaderCell>Department</TableHeaderCell>
+          <TableHeaderCell>Start Date</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>John Doe</TableCell>
+          <TableCell>john@example.com</TableCell>
+          <TableCell>+1-555-0123</TableCell>
+          <TableCell>Engineering</TableCell>
+          <TableCell>2023-01-15</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Sortable Header
+```tsx
+function SortableHeaderExample() {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+
+  const handleSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  const getSortIcon = (columnKey) => {
+    if (sortConfig.key !== columnKey) {
+      return <Icon icon="Sort" size="Small" />;
+    }
+    return sortConfig.direction === 'asc' 
+      ? <Icon icon="ArrowUp" size="Small" />
+      : <Icon icon="ArrowDown" size="Small" />;
+  };
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell 
+            onClick={() => handleSort('name')}
+            className="sortable-header"
+          >
+            <div className="header-content">
+              Name
+              {getSortIcon('name')}
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell 
+            onClick={() => handleSort('department')}
+            className="sortable-header"
+          >
+            <div className="header-content">
+              Department
+              {getSortIcon('department')}
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell 
+            onClick={() => handleSort('salary')}
+            className="sortable-header"
+          >
+            <div className="header-content">
+              Salary
+              {getSortIcon('salary')}
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell>Actions</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Alice Johnson</TableCell>
+          <TableCell>Engineering</TableCell>
+          <TableCell>$95,000</TableCell>
+          <TableCell>
+            <Button size="Small" type="Ghost">Edit</Button>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Header with Filters
+```tsx
+function FilterHeaderExample() {
+  const [filters, setFilters] = useState({
+    status: '',
+    priority: '',
+    assignee: ''
+  });
+
+  const handleFilterChange = (field, value) => {
+    setFilters(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>
+            <div className="header-with-filter">
+              <Text type="BodyMedium">Task Title</Text>
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell>
+            <div className="header-with-filter">
+              <Text type="BodyMedium">Status</Text>
+              <Select 
+                value={filters.status}
+                onChange={(value) => handleFilterChange('status', value)}
+                size="Small"
+              >
+                <Option value="">All</Option>
+                <Option value="todo">Todo</Option>
+                <Option value="progress">In Progress</Option>
+                <Option value="done">Done</Option>
+              </Select>
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell>
+            <div className="header-with-filter">
+              <Text type="BodyMedium">Priority</Text>
+              <Select 
+                value={filters.priority}
+                onChange={(value) => handleFilterChange('priority', value)}
+                size="Small"
+              >
+                <Option value="">All</Option>
+                <Option value="low">Low</Option>
+                <Option value="medium">Medium</Option>
+                <Option value="high">High</Option>
+                <Option value="critical">Critical</Option>
+              </Select>
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell>
+            <div className="header-with-filter">
+              <Text type="BodyMedium">Assignee</Text>
+              <Input 
+                placeholder="Filter by name..."
+                value={filters.assignee}
+                onChange={(e) => handleFilterChange('assignee', e.target.value)}
+                size="Small"
+              />
+            </div>
+          </TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Implement new feature</TableCell>
+          <TableCell>
+            <Chip style="Warning">In Progress</Chip>
+          </TableCell>
+          <TableCell>
+            <Chip style="Error">High</Chip>
+          </TableCell>
+          <TableCell>John Doe</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Header with Selection Controls
+```tsx
+function SelectionHeaderExample() {
+  const [selectedAll, setSelectedAll] = useState(false);
+  const [selectedItems, setSelectedItems] = useState(new Set());
+  const [showBulkActions, setShowBulkActions] = useState(false);
+
+  const items = [
+    { id: 1, name: 'Item 1' },
+    { id: 2, name: 'Item 2' },
+    { id: 3, name: 'Item 3' }
+  ];
+
+  const handleSelectAll = (checked) => {
+    setSelectedAll(checked);
+    if (checked) {
+      setSelectedItems(new Set(items.map(item => item.id)));
+    } else {
+      setSelectedItems(new Set());
+    }
+    setShowBulkActions(checked);
+  };
+
+  return (
+    <div>
+      {showBulkActions && (
+        <div className="bulk-actions-bar">
+          <Text>{selectedItems.size} items selected</Text>
+          <div className="bulk-actions">
+            <Button size="Small" type="Outlined">Delete</Button>
+            <Button size="Small" type="Outlined">Archive</Button>
+            <Button size="Small" type="Outlined">Export</Button>
+          </div>
+        </div>
+      )}
+      
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell>
+              <Checkbox 
+                checked={selectedAll}
+                indeterminate={selectedItems.size > 0 && selectedItems.size < items.length}
+                onChange={(e) => handleSelectAll(e.target.checked)}
+              />
+            </TableHeaderCell>
+            <TableHeaderCell>Name</TableHeaderCell>
+            <TableHeaderCell>Status</TableHeaderCell>
+            <TableHeaderCell>Actions</TableHeaderCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map(item => (
+            <TableRow key={item.id}>
+              <TableCell>
+                <Checkbox checked={selectedItems.has(item.id)} />
+              </TableCell>
+              <TableCell>{item.name}</TableCell>
+              <TableCell>Active</TableCell>
+              <TableCell>
+                <Button size="Small" type="Ghost">Edit</Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+```
+
+### Grouped Column Headers
+```tsx
+function GroupedHeaderExample() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell rowSpan={2}>Product</TableHeaderCell>
+          <TableHeaderCell colSpan={3}>Q1 Sales</TableHeaderCell>
+          <TableHeaderCell colSpan={3}>Q2 Sales</TableHeaderCell>
+          <TableHeaderCell rowSpan={2}>Total</TableHeaderCell>
+        </TableRow>
+        <TableRow>
+          <TableHeaderCell>Jan</TableHeaderCell>
+          <TableHeaderCell>Feb</TableHeaderCell>
+          <TableHeaderCell>Mar</TableHeaderCell>
+          <TableHeaderCell>Apr</TableHeaderCell>
+          <TableHeaderCell>May</TableHeaderCell>
+          <TableHeaderCell>Jun</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Product A</TableCell>
+          <TableCell>$12,000</TableCell>
+          <TableCell>$15,000</TableCell>
+          <TableCell>$18,000</TableCell>
+          <TableCell>$20,000</TableCell>
+          <TableCell>$22,000</TableCell>
+          <TableCell>$25,000</TableCell>
+          <TableCell>$112,000</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Sticky Header with Actions
+```tsx
+function StickyHeaderActionsExample() {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  return (
+    <div className="table-container" style={{ height: '400px', overflow: 'auto' }}>
+      <Table stickyHeader>
+        <TableHeader className="sticky-header-with-actions">
+          <TableRow>
+            <TableHeaderCell colSpan={4}>
+              <div className="header-actions-bar">
+                <div className="header-title">
+                  <Text type="Heading5">User Management</Text>
+                  <Text type="BodySmall">Manage your team members</Text>
+                </div>
+                <div className="header-actions">
+                  <Input 
+                    placeholder="Search users..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    leadingIcon={<Icon icon="Search" />}
+                    size="Small"
+                  />
+                  <Button size="Small">Add User</Button>
+                </div>
+              </div>
+            </TableHeaderCell>
+          </TableRow>
+          <TableRow>
+            <TableHeaderCell>Name</TableHeaderCell>
+            <TableHeaderCell>Email</TableHeaderCell>
+            <TableHeaderCell>Role</TableHeaderCell>
+            <TableHeaderCell>Actions</TableHeaderCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 20 }, (_, i) => (
+            <TableRow key={i}>
+              <TableCell>User {i + 1}</TableCell>
+              <TableCell>user{i + 1}@example.com</TableCell>
+              <TableCell>Member</TableCell>
+              <TableCell>
+                <Button size="Small" type="Ghost">Edit</Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+```
+
+### Header with Custom Styling
+```tsx
+function CustomStyledHeaderExample() {
+  return (
+    <Table>
+      <TableHeader className="custom-header-theme">
+        <TableRow>
+          <TableHeaderCell className="header-primary">
+            <div className="header-cell-content">
+              <Icon icon="Person" size="Small" />
+              <Text type="BodyMedium">User</Text>
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell className="header-secondary">
+            <div className="header-cell-content">
+              <Icon icon="Email" size="Small" />
+              <Text type="BodyMedium">Contact</Text>
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell className="header-accent">
+            <div className="header-cell-content">
+              <Icon icon="Badge" size="Small" />
+              <Text type="BodyMedium">Role</Text>
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell className="header-neutral">
+            <div className="header-cell-content">
+              <Icon icon="Settings" size="Small" />
+              <Text type="BodyMedium">Actions</Text>
+            </div>
+          </TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>John Doe</TableCell>
+          <TableCell>john@example.com</TableCell>
+          <TableCell>Administrator</TableCell>
+          <TableCell>
+            <Button size="Small" type="Ghost">
+              <Icon icon="MoreVert" size="Small" />
+            </Button>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Responsive Header
+```tsx
+function ResponsiveHeaderExample() {
+  return (
+    <Table className="responsive-table">
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>
+            <div className="responsive-header-content">
+              <Text type="BodyMedium">Transaction</Text>
+              <Text type="BodySmall" className="header-subtitle">
+                ID & Details
+              </Text>
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell className="hide-mobile">
+            <div className="responsive-header-content">
+              <Text type="BodyMedium">Amount</Text>
+              <Text type="BodySmall" className="header-subtitle">
+                USD
+              </Text>
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell className="hide-tablet">
+            <div className="responsive-header-content">
+              <Text type="BodyMedium">Date</Text>
+              <Text type="BodySmall" className="header-subtitle">
+                Transaction Date
+              </Text>
+            </div>
+          </TableHeaderCell>
+          <TableHeaderCell>
+            <div className="responsive-header-content">
+              <Text type="BodyMedium">Status</Text>
+              <Text type="BodySmall" className="header-subtitle">
+                Current State
+              </Text>
+            </div>
+          </TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <div className="transaction-cell">
+              <Text type="BodyMedium">#TX001</Text>
+              <Text type="BodySmall" className="show-mobile">
+                $99.99 • 2023-10-15
+              </Text>
+            </div>
+          </TableCell>
+          <TableCell className="hide-mobile">$99.99</TableCell>
+          <TableCell className="hide-tablet">2023-10-15</TableCell>
+          <TableCell>
+            <Chip style="Success">Completed</Chip>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```