Tables

If you wish to build a simple data table that does not need any advanced features, it's often simpler to do it declaratively, rather than using a code-first 3rd party grid library. The BlueWater Design System offers basic styling classes for the native table element for these scenarios.

Basic Usage

Apply the .bw-table class to any HTML table element to get the BlueWater styling:

Account	Type	Name	Amount
0000-00000-001	I	Doe, John	$76.83
0000-00000-002	I	Doe, jane	$58.92
0000-00000-003	I	Bob, Jergle	$22.47

<table class="bw-table">
  <thead>
    <tr>
      <th>Account</th>
      <th>Type</th>
      <th>Name</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0000-00000-001</td>
      <td>I</td>
      <td>Doe, John</td>
      <td>$76.83</td>
    </tr>
    <tr>
      <td>0000-00000-002</td>
      <td>I</td>
      <td>Doe, jane</td>
      <td>$58.92</td>
    </tr>
    <tr>
      <td>0000-00000-003</td>
      <td>I</td>
      <td>Bob, Jergle</td>
      <td>$22.47</td>
    </tr>
  </tbody>
</table>

Features

Note: More features may be added in the future.

Hover Effects

Add the .bw-table--hover class to table rows to enable hover effects:

<tr class="bw-table--hover">
  <td>Content</td>
</tr>

Customization

The table system uses CSS custom properties that can be overridden to customize the appearance:

Color Variables

Variable	Default Value	Description
--bw-table-header-bg	#1971b6	Header background color
--bw-table-header-text	rgb(253, 253, 253)	Header text color
--bw-table-odd-row-bg	#e3f3e3	Odd row background color
--bw-table-even-row-bg	#ffffff	Even row background color
--bw-table-text-color	rgb(24, 29, 39)	Body text color
--bw-table-border-color	#E9EAEB	Border color
--bw-table-hover-bg	rgba(25, 113, 182, 0.1)	Hover background color

Typography Variables

Variable	Default Value	Description
--bw-table-header-font-size	10px	Header font size
--bw-table-body-font-size	12px	Body font size
--bw-table-header-font-weight	700	Header font weight
--bw-table-body-font-weight	400	Body font weight

Spacing Variables

Variable	Default Value	Description
--bw-table-header-padding-y	9px	Header vertical padding
--bw-table-header-padding-x	8px	Header horizontal padding
--bw-table-cell-padding-y	7px	Cell vertical padding
--bw-table-cell-padding-x	8px	Cell horizontal padding

Layout Variables

Variable	Default Value	Description
--bw-table-border-width	1px	Border width

Customization Example

To customize the table colors for a specific use case:

.custom-table {
  --bw-table-header-bg: #2c3e50;
  --bw-table-odd-row-bg: #f8f9fa;
  --bw-table-even-row-bg: #ffffff;
  --bw-table-hover-bg: rgba(44, 62, 80, 0.1);
}

<table class="bw-table custom-table">
  <!-- table content -->
</table>