Fixed Header Table

A Fixed Header DataTable is an enhanced HTML table that keeps the header row visible at the top of the viewport while scrolling through large datasets. This provides a better user experience by ensuring column labels remain visible regardless of how far down the user scrolls.

ID Project Name Status Due Date Priority
P001Website Redesign Q1Complete2025-01-30High
P002Mobile App Feature XIn Progress2025-03-15High
P003Data Migration Phase 2Pending Review2025-02-28Medium
P004Marketing Campaign LaunchOn Hold2025-04-01High
P005Internal Tool UpgradeIn Progress2025-05-20Medium
P006Vendor Contract RenewalComplete2025-01-10Low
P007Security Audit 2025Pending Start2025-06-01Critical
P008Employee Training ModuleIn Progress2025-03-05Medium
P009Cloud Server OptimizationPending Review2025-04-10High
P010New Market ResearchComplete2025-02-15Low
P011SEO Strategy UpdateIn Progress2025-03-22Medium
P012Financial Report AutomationPending Start2025-07-01High
P013Client Onboarding FlowIn Progress2025-04-20Medium
P014Legacy System DecommissionOn Hold2025-08-01Critical
P015HR System IntegrationComplete2025-01-25High
P016UX/UI Testing Cycle 3Pending Review2025-05-05Medium
P017Content Library ExpansionIn Progress2025-06-15Low
P018Partner Program RelaunchPending Start2025-09-01Medium
P019Network Infrastructure UpgradeIn Progress2025-03-30Critical
P020Sales Enablement ToolsComplete2025-02-01High
P021A/B Testing FrameworkPending Review2025-07-20Medium
P022GDPR Compliance UpdateIn Progress2025-04-15Critical
P023Office Relocation PlanningOn Hold2025-10-01Low
P024Customer Feedback SystemComplete2025-03-01Medium
P025API Documentation RefactorPending Start2025-08-20High
P026Disaster Recovery PlanIn Progress2025-05-10Critical
P027Social Media Strategy 2025Pending Review2025-06-05Low
P028Subscription Model UpdateIn Progress2025-04-25High
P029Internal Comms PlatformPending Start2025-11-01Medium
P030IT Hardware RefreshComplete2025-03-10High

Example Code 
  <div style="width: fit-content; height: 500px; overflow-y: auto; margin-left: 1rem;">
        <table class="fixed-header">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Project Name</th>
                    <th>Status</th>
                    <th>Due Date</th>
                    <th>Priority</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>P001</td><td>Website Redesign Q1</td><td>Complete</td><td>2025-01-30</td><td>High</td></tr>
                <tr><td>P002</td><td>Mobile App Feature X</td><td>In Progress</td><td>2025-03-15</td><td>High</td></tr>
                <tr><td>P003</td><td>Data Migration Phase 2</td><td>Pending Review</td><td>2025-02-28</td><td>Medium</td></tr>
                <tr><td>P004</td><td>Marketing Campaign Launch</td><td>On Hold</td><td>2025-04-01</td><td>High</td></tr>
                <tr><td>P005</td><td>Internal Tool Upgrade</td><td>In Progress</td><td>2025-05-20</td><td>Medium</td></tr>
                <tr><td>P006</td><td>Vendor Contract Renewal</td><td>Complete</td><td>2025-01-10</td><td>Low</td></tr>
                <tr><td>P007</td><td>Security Audit 2025</td><td>Pending Start</td><td>2025-06-01</td><td>Critical</td></tr>
                <tr><td>P008</td><td>Employee Training Module</td><td>In Progress</td><td>2025-03-05</td><td>Medium</td></tr>
                <tr><td>P009</td><td>Cloud Server Optimization</td><td>Pending Review</td><td>2025-04-10</td><td>High</td></tr>
                <tr><td>P010</td><td>New Market Research</td><td>Complete</td><td>2025-02-15</td><td>Low</td></tr>
                <tr><td>P011</td><td>SEO Strategy Update</td><td>In Progress</td><td>2025-03-22</td><td>Medium</td></tr>
                <tr><td>P012</td><td>Financial Report Automation</td><td>Pending Start</td><td>2025-07-01</td><td>High</td></tr>
                <tr><td>P013</td><td>Client Onboarding Flow</td><td>In Progress</td><td>2025-04-20</td><td>Medium</td></tr>
                <tr><td>P014</td><td>Legacy System Decommission</td><td>On Hold</td><td>2025-08-01</td><td>Critical</td></tr>
                <tr><td>P015</td><td>HR System Integration</td><td>Complete</td><td>2025-01-25</td><td>High</td></tr>
                <tr><td>P016</td><td>UX/UI Testing Cycle 3</td><td>Pending Review</td><td>2025-05-05</td><td>Medium</td></tr>
                <tr><td>P017</td><td>Content Library Expansion</td><td>In Progress</td><td>2025-06-15</td><td>Low</td></tr>
                <tr><td>P018</td><td>Partner Program Relaunch</td><td>Pending Start</td><td>2025-09-01</td><td>Medium</td></tr>
                <tr><td>P019</td><td>Network Infrastructure Upgrade</td><td>In Progress</td><td>2025-03-30</td><td>Critical</td></tr>
                <tr><td>P020</td><td>Sales Enablement Tools</td><td>Complete</td><td>2025-02-01</td><td>High</td></tr>
                <tr><td>P021</td><td>A/B Testing Framework</td><td>Pending Review</td><td>2025-07-20</td><td>Medium</td></tr>
                <tr><td>P022</td><td>GDPR Compliance Update</td><td>In Progress</td><td>2025-04-15</td><td>Critical</td></tr>
                <tr><td>P023</td><td>Office Relocation Planning</td><td>On Hold</td><td>2025-10-01</td><td>Low</td></tr>
                <tr><td>P024</td><td>Customer Feedback System</td><td>Complete</td><td>2025-03-01</td><td>Medium</td></tr>
                <tr><td>P025</td><td>API Documentation Refactor</td><td>Pending Start</td><td>2025-08-20</td><td>High</td></tr>
                <tr><td>P026</td><td>Disaster Recovery Plan</td><td>In Progress</td><td>2025-05-10</td><td>Critical</td></tr>
                <tr><td>P027</td><td>Social Media Strategy 2025</td><td>Pending Review</td><td>2025-06-05</td><td>Low</td></tr>
                <tr><td>P028</td><td>Subscription Model Update</td><td>In Progress</td><td>2025-04-25</td><td>High</td></tr>
                <tr><td>P029</td><td>Internal Comms Platform</td><td>Pending Start</td><td>2025-11-01</td><td>Medium</td></tr>
                <tr><td>P030</td><td>IT Hardware Refresh</td><td>Complete</td><td>2025-03-10</td><td>High</td></tr>
            </tbody>
        </table>
    </div>