How to make Data Table header sticky?

[CarlosGTrejo]

I've tried adding the classes sticky top-0 to Table.Header and that didn't work so I tried adding those classes to each Table.Head and it still didn't work:

    <Table.Header>
        <Table.Row>
            <Table.Head class="sticky top-0">Recipient</Table.Head>
            <Table.Head class="sticky top-0">Status</Table.Head>
            <Table.Head class="sticky top-0">Type</Table.Head>
            <Table.Head class="sticky top-0">Attendees</Table.Head>
            <Table.Head class="sticky top-0">Phone Number</Table.Head>
        </Table.Row>
    </Table.Header>

Does anyone have any suggestions/solutions?

[frederikaalund]

For what it is worth, this is what worked for me for a scrolling table body with a stick header:

<Table.Root>
  <ScrollArea class="h-100">
    <Table.Header class="sticky top-0 bg-card">
      <Table.Row>
        <Table.Head>Starred</Table.Head>
        <Table.Head>Order</Table.Head>
        <Table.Head class="w-full">Name</Table.Head>
        <Table.Head>Size</Table.Head>
        <Table.Head class="min-w-40">Last modified</Table.Head>
        <Table.Head>Actions</Table.Head>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      {#if book !== undefined}
        {#each book.ruleSets as ruleSet (ruleSet.file.name)}
          <RuleSetRow bind:draft={book} {ruleSet}></RuleSetRow>
        {/each}
      {/if}
    </Table.Body>
  </ScrollArea>
</Table.Root>

Note that <ScrollArea> is inside <Table.Root>, which avoids the issue mentioned in #2050.