Table

Source code

name	age
Alice	19
Bob	25

import { Table, ThWithHelpTooltip } from "rfui-package";

#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

It is generally a good practice to highlight rows when users hover over them. If you don't want to do this, 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.

Note: The example below won't actually be sticky but it will work elsewhere.

<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 and stickyFirstColumn to true.

<Table stickyHeader 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>

#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>

#With help icon

name	age
Alice	19
Bob	25

<Table>
  <thead>
    <tr>
      <ThWithHelpTooltip
        cellContent="name"
        tooltipContent="Some help text to explain something"
      />
      <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 className={className} {...restWithoutClass} > {children} </table>`

`ThWithHelpTooltip`

Prop	Required	Default	Type and notes
`cellContent`		-	`ReactNode`
`tooltipContent`		-	`string`