Table

Source code

name	age
Alice	19
Bob	25

import { Table } from "rfui";

#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

Prop	Required	Default	Type and notes
`bordered`	-	`true`	`boolean`
`hover`	-	`true`	`boolean`
`striped`	-	`false`	`boolean` Discussions of utilizing zebra stripes: https://ux.stackexchange.com/q/3562/39046, https://ux.stackexchange.com/q/60715/39046.
`condensed`	-	`false`	`boolean`
`stickyHeader`	-	`false`	`boolean` Making the header sticky is helpful when the user needs to cross-reference and avoid losing context.
`stickyFirstColumn`	-	`false`	`boolean` Making the first column sticky is helpful when the user needs to cross-reference and avoid losing context.
`children`	✔	-	`ComponentChild`
`...rest`	-	-	`ComponentProps<"table">` 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>`