Table

cds-table

The table component is designed to style basic HTML tables, applying global design styles consistently across your project. Use this component to easily integrate table styling into your application with minimal effort.

Default

Name	Age	Role	Location
John Doe	28	Developer	New York
Jane Smith	34	UX Designer	Los Angeles
Sam Green	38	Product Owner	Chicago
Total: 3 rows

<table class="cds-table">
  <thead>
    <tr>...</tr>
  </thead>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tfoot>
    <tr>...</tr>
  </tfoot>
</table>

---

Elements

Element	Code	Parent	Required
thead	<thead>	HTML Element: <table>	optional
tbody	<tbody>	HTML Element: <table>	required
tfoot	<tfoot>	HTML Element: <table>	optional

John Doe	28	Developer	New York
Jane Smith	34	UX Designer	Los Angeles
Sam Green	38	Product Owner	Chicago

---

Modifiers

Modifier	Options
Alternate	--alternate

Name	Age	Role	Location
John Doe	28	Developer	New York
Jane Smith	34	UX Designer	Los Angeles
Sam Green	38	Product Owner	Chicago
Alice Brown	30	Writer	San Francisco
Michael White	45	Product Manager	Boston
Total: 5 rows

<table class="cds-table cds-table--alternate">
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>

---

States

Modifier	Options
States	is-disabled, is-loading, is-selected

Is disabled

Name	Age	Role	Location
John Doe	28	Developer	New York
Jane Smith	34	UX Designer	Los Angeles
Disabled row	39	UX Designer	Barcelona
Sam Green	38	Product Owner	Chicago
Total: 3 rows

Example

...
<tr class="is-disabled">
...

Is loading

Name	Age	Role	Location
John Doe	28	Developer	New York
Jane Smith	34	UX Designer	Los Angeles
Loading row	39	UX Designer	Barcelona
Sam Green	38	Product Owner	Chicago
Total: 3 rows

Example

...
<tr class="is-loading">
...

Is selected

Name	Age	Role	Location
John Doe	28	Developer	New York
Jane Smith	34	UX Designer	Los Angeles
Selected row	39	UX Designer	Barcelona
Sam Green	38	Product Owner	Chicago
Total: 3 rows

Example

...
<tr class="is-selected">
...