#Basic

name	age
Alice	19
Bob	25

<Table>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</Table>

#No border

Set bordered to false.

name	age
Alice	19
Bob	25

<Table bordered={false}>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</Table>

#No hover

Set hover to false.

name	age
Alice	19
Bob	25

<Table hover={false}>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</Table>

#Striped

Set striped to true and bordered to false.

Discussions of utilizing zebra stripes:https://ux.stackexchange.com/q/3562/39046, https://ux.stackexchange.com/q/60715/39046.

name	age
Alice	19
Bob	25
Carol	22
Dave	34

<Table striped bordered={false}>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Carol</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Dave</td>
      <td>34</td>
    </tr>
  </tbody>
</Table>

#Striped with border

Set striped to true.

name	age
Alice	19
Bob	25
Carol	22
Dave	34

<Table striped>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Carol</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Dave</td>
      <td>34</td>
    </tr>
  </tbody>
</Table>

#Sticky header

Set stickyHeader to true.

Making the header sticky is helpful when the user needs to cross-reference and avoid losing context.

<Table stickyHeader>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</Table>

#Sticky first column

Set stickyFirstColumn to true.

Making the first column sticky is helpful when the user needs to cross-reference and avoid losing context.

name	age
Alice	19
Bob	25

<Table stickyFirstColumn>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</Table>

#Sticky header and first column

Set stickyHeader to true and stickyFirstColumn to true.

<Table stickyHeader>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</Table>

#Condensed

Set condensed to true.

name	age
Alice	19
Bob	25

<Table condensed>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</Table>

#Props

bordered

Required

false

Type

boolean

Default

true

hover

Required

false

Type

boolean

Default

true

striped

Required

false

Type

boolean

Default

false

Notes

Discussions of utilizing zebra stripes: https://ux.stackexchange.com/q/3562/39046, https://ux.stackexchange.com/q/60715/39046.

condensed

Required

false

Type

boolean

Default

false

stickyHeader

Required

false

Type

boolean

Default

false

Notes

Making the header sticky is helpful when the user needs to cross-reference and avoid losing context.

stickyFirstColumn

Required

false

Type

boolean

Default

false

Notes

Making the first column sticky is helpful when the user needs to cross-reference and avoid losing context.

children^*

Required

true

Type

ComponentChild

Default

none

...rest

Required

false

Type

ComponentProps<"table">

Default

none

Notes

See the docs for rest parameters. For Table, you could pass anything you normally would pass to <table> because the return value looks something like this:

<table
  class={className}
  {...restWithoutClass}
>
  {children}
</table>