# 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 `` element that groups header content together. ## Aliases - TableHeader - TableHead - THead - HeaderSection - TableHeaderGroup ## Props Breakdown **Extends:** `HTMLAttributes` | 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 ( Name Email Role John Doe john@example.com Admin
); } ``` ### Multi-Row Header ```tsx function MultiRowHeaderExample() { return ( Employee Contact Info Employment Email Phone Department Start Date John Doe john@example.com +1-555-0123 Engineering 2023-01-15
); } ``` ### 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 ; } return sortConfig.direction === 'asc' ? : ; }; return ( handleSort('name')} className="sortable-header" >
Name {getSortIcon('name')}
handleSort('department')} className="sortable-header" >
Department {getSortIcon('department')}
handleSort('salary')} className="sortable-header" >
Salary {getSortIcon('salary')}
Actions Alice Johnson Engineering $95,000
); } ``` ### Header with Filters ```tsx function FilterHeaderExample() { const [filters, setFilters] = useState({ status: '', priority: '', assignee: '' }); const handleFilterChange = (field, value) => { setFilters(prev => ({ ...prev, [field]: value })); }; return (
Task Title
Status
Priority
Assignee handleFilterChange('assignee', e.target.value)} size="Small" />
Implement new feature In Progress High John Doe
); } ``` ### 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 (
{showBulkActions && (
{selectedItems.size} items selected
)} 0 && selectedItems.size < items.length} onChange={(e) => handleSelectAll(e.target.checked)} /> Name Status Actions {items.map(item => ( {item.name} Active ))}
); } ``` ### Grouped Column Headers ```tsx function GroupedHeaderExample() { return ( Product Q1 Sales Q2 Sales Total Jan Feb Mar Apr May Jun Product A $12,000 $15,000 $18,000 $20,000 $22,000 $25,000 $112,000
); } ``` ### Sticky Header with Actions ```tsx function StickyHeaderActionsExample() { const [searchTerm, setSearchTerm] = useState(''); return (
User Management Manage your team members
setSearchTerm(e.target.value)} leadingIcon={} size="Small" />
Name Email Role Actions {Array.from({ length: 20 }, (_, i) => ( User {i + 1} user{i + 1}@example.com Member ))}
); } ``` ### Header with Custom Styling ```tsx function CustomStyledHeaderExample() { return (
User
Contact
Role
Actions
John Doe john@example.com Administrator
); } ``` ### Responsive Header ```tsx function ResponsiveHeaderExample() { return (
Transaction ID & Details
Amount USD
Date Transaction Date
Status Current State
#TX001 $99.99 • 2023-10-15
$99.99 2023-10-15 Completed
); } ```