TRMNL

Base Structure

Tables are built using standard HTML table elements with additional classes for styling. The base structure includes headers and data cells with consistent spacing and typography.

Default Table

The table class provides the standard table styling with comfortable spacing and clear visual hierarchy.

	Employee	Role	Pranks	Sales	Score	Fun Fact
1	Dwight Schrute	Assistant to the Regional Manager	24	44	12.91	Owns a beet farm
2	Jim Halpert	Sales Rep	42	21	8.69	Dwight hates him
3	Stanley Hudson	Sales Rep	0	28	5.83	Only smiles on Pretzel Day
4	Phyllis Vance	Sales Rep	0	18	3.79	Married to Bob Vance
5	Andy Bernard	Sales Rep	2	14	3.18	Cornell graduate
6	Creed Bratton	Quality Assurance	???	???	???	???
7	Karen Filippelli	Sales / Utica Manager	0	12	2.57	Jim’s ex from Stamford
8	Michael Scott	Regional Manager	15	0	1.65	World’s Best Boss mug
9	Todd Packer	Traveling Salesman	0	6	1.34	Terrible human being
10	Ryan Howard	Temp / VP / Janitor	1	2	0.63	Pitched the Sabre Pyramid
11	Pam Beesly	Receptionist / Office Admin	3	0	0.43	Art school dreamer
12	Meredith Palmer	Supplier Relations	0	1	0.32	Exchanged paper for steak
13	Holly Flax	HR (Nashua)	2	0	0.32	Michael’s soulmate
14	Darryl Philbin	Warehouse Foreman	1	0	0.22	Started a band
15	Kevin Malone	Accountant	1	0	0.22	Spilled the chili
16	Erin Hannon	Receptionist	1	0	0.22	Dates Gabe, then Andy
17	Kelly Kapoor	Customer Service	0	0	0.00	Obsessed with Ryan
18	Angela Martin	Accountant	0	0	0.00	Owns 12 cats
19	Oscar Martinez	Accountant	0	0	0.00	“Actually...” guy
20	Roy Anderson	Warehouse	0	0	0.00	Pam’s ex-fiancé
21	Toby Flenderson	HR	0	0	0.00	Michael hates him
22	Jan Levinson	Corporate	0	0	0.00	Serenity by Jan
23	David Wallace	CFO	0	0	0.00	Invented “Suck It”
24	Robert California	CEO	0	0	0.00	The Lizard King
25	Nellie Bertram	Special Projects Manager	0	0	0.00	Took Andy’s job
26	Deangelo Vickers	Regional Manager	0	0	0.00	Juggled invisible balls
27	Charles Miner	Corporate VP	0	0	0.00	Hated Jim’s pranks
28	Gabe Lewis	Sabre Liaison	0	0	0.00	Tall, awkward, hates horror movies
29	Clark Green	Sales	0	0	0.00	Mini Dwight
30	Pete Miller	Sales	0	0	0.00	Nickname: Plop

Table Regular

<table class="table" data-table-limit="true">
  <thead>
    <tr>
      <th><span class="title">#</span></th>
      <th><span class="title">Employee</span></th>
      <th><span class="title">Role</span></th>
      <th><span class="title">Pranks</span></th>
      <th><span class="title">Sales</span></th>
      <th><span class="title">Score</span></th>
      <th><span class="title">Fun Fact</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="label label--small">Row 1, Cell 1</span></td>
      <td><span class="label">Row 1, Cell 2</span></td>
      <td><span class="label label--small">Row 1, Cell 3</span></td>
    </tr>
  </tbody>
</table>

Size Variants

Tables support four sizes: Large, Regular (default), Small, and XSmall. Use modifier classes to change row heights.

Large Table

Use table--large to increase row heights for more spacious tables.

	Employee	Role	Pranks	Sales	Score	Fun Fact
1	Dwight Schrute	Assistant to the Regional Manager	24	44	12.91	Owns a beet farm
2	Jim Halpert	Sales Rep	42	21	8.69	Dwight hates him
3	Stanley Hudson	Sales Rep	0	28	5.83	Only smiles on Pretzel Day
4	Phyllis Vance	Sales Rep	0	18	3.79	Married to Bob Vance
5	Andy Bernard	Sales Rep	2	14	3.18	Cornell graduate
6	Creed Bratton	Quality Assurance	???	???	???	???
7	Karen Filippelli	Sales / Utica Manager	0	12	2.57	Jim’s ex from Stamford
8	Michael Scott	Regional Manager	15	0	1.65	World’s Best Boss mug
9	Todd Packer	Traveling Salesman	0	6	1.34	Terrible human being
10	Ryan Howard	Temp / VP / Janitor	1	2	0.63	Pitched the Sabre Pyramid
11	Pam Beesly	Receptionist / Office Admin	3	0	0.43	Art school dreamer
12	Meredith Palmer	Supplier Relations	0	1	0.32	Exchanged paper for steak
13	Holly Flax	HR (Nashua)	2	0	0.32	Michael’s soulmate
14	Darryl Philbin	Warehouse Foreman	1	0	0.22	Started a band
15	Kevin Malone	Accountant	1	0	0.22	Spilled the chili
16	Erin Hannon	Receptionist	1	0	0.22	Dates Gabe, then Andy
17	Kelly Kapoor	Customer Service	0	0	0.00	Obsessed with Ryan
18	Angela Martin	Accountant	0	0	0.00	Owns 12 cats
19	Oscar Martinez	Accountant	0	0	0.00	“Actually...” guy
20	Roy Anderson	Warehouse	0	0	0.00	Pam’s ex-fiancé
21	Toby Flenderson	HR	0	0	0.00	Michael hates him
22	Jan Levinson	Corporate	0	0	0.00	Serenity by Jan
23	David Wallace	CFO	0	0	0.00	Invented “Suck It”
24	Robert California	CEO	0	0	0.00	The Lizard King
25	Nellie Bertram	Special Projects Manager	0	0	0.00	Took Andy’s job
26	Deangelo Vickers	Regional Manager	0	0	0.00	Juggled invisible balls
27	Charles Miner	Corporate VP	0	0	0.00	Hated Jim’s pranks
28	Gabe Lewis	Sabre Liaison	0	0	0.00	Tall, awkward, hates horror movies
29	Clark Green	Sales	0	0	0.00	Mini Dwight
30	Pete Miller	Sales	0	0	0.00	Nickname: Plop

Table Large

<table class="table table--large" data-table-limit="true">
  <thead>
    <tr>
      <th><span class="title">#</span></th>
      <th><span class="title">Employee</span></th>
      <th><span class="title">Role</span></th>
      <th><span class="title">Pranks</span></th>
      <th><span class="title">Sales</span></th>
      <th><span class="title">Score</span></th>
      <th><span class="title">Fun Fact</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="label label--small">Row 1, Cell 1</span></td>
      <td><span class="label">Row 1, Cell 2</span></td>
      <td><span class="label label--small">Row 1, Cell 3</span></td>
    </tr>
  </tbody>
</table>

Small Table

Use table--small for a compact table with reduced row heights. The older table--condensed class remains supported as a backward-compatible alias.

	Employee	Role	Pranks	Sales	Score	Fun Fact
1	Dwight Schrute	Assistant to the Regional Manager	24	44	12.91	Owns a beet farm
2	Jim Halpert	Sales Rep	42	21	8.69	Dwight hates him
3	Stanley Hudson	Sales Rep	0	28	5.83	Only smiles on Pretzel Day
4	Phyllis Vance	Sales Rep	0	18	3.79	Married to Bob Vance
5	Andy Bernard	Sales Rep	2	14	3.18	Cornell graduate
6	Creed Bratton	Quality Assurance	???	???	???	???
7	Karen Filippelli	Sales / Utica Manager	0	12	2.57	Jim’s ex from Stamford
8	Michael Scott	Regional Manager	15	0	1.65	World’s Best Boss mug
9	Todd Packer	Traveling Salesman	0	6	1.34	Terrible human being
10	Ryan Howard	Temp / VP / Janitor	1	2	0.63	Pitched the Sabre Pyramid
11	Pam Beesly	Receptionist / Office Admin	3	0	0.43	Art school dreamer
12	Meredith Palmer	Supplier Relations	0	1	0.32	Exchanged paper for steak
13	Holly Flax	HR (Nashua)	2	0	0.32	Michael’s soulmate
14	Darryl Philbin	Warehouse Foreman	1	0	0.22	Started a band
15	Kevin Malone	Accountant	1	0	0.22	Spilled the chili
16	Erin Hannon	Receptionist	1	0	0.22	Dates Gabe, then Andy
17	Kelly Kapoor	Customer Service	0	0	0.00	Obsessed with Ryan
18	Angela Martin	Accountant	0	0	0.00	Owns 12 cats
19	Oscar Martinez	Accountant	0	0	0.00	“Actually...” guy
20	Roy Anderson	Warehouse	0	0	0.00	Pam’s ex-fiancé
21	Toby Flenderson	HR	0	0	0.00	Michael hates him
22	Jan Levinson	Corporate	0	0	0.00	Serenity by Jan
23	David Wallace	CFO	0	0	0.00	Invented “Suck It”
24	Robert California	CEO	0	0	0.00	The Lizard King
25	Nellie Bertram	Special Projects Manager	0	0	0.00	Took Andy’s job
26	Deangelo Vickers	Regional Manager	0	0	0.00	Juggled invisible balls
27	Charles Miner	Corporate VP	0	0	0.00	Hated Jim’s pranks
28	Gabe Lewis	Sabre Liaison	0	0	0.00	Tall, awkward, hates horror movies
29	Clark Green	Sales	0	0	0.00	Mini Dwight
30	Pete Miller	Sales	0	0	0.00	Nickname: Plop

Table Small

<table class="table table--small" data-table-limit="true">
  <thead>
    <tr>
      <th><span class="title title--small">#</span></th>
      <th><span class="title title--small">Employee</span></th>
      <th><span class="title title--small">Role</span></th>
      <th><span class="title title--small">Pranks</span></th>
      <th><span class="title title--small">Sales</span></th>
      <th><span class="title title--small">Score</span></th>
      <th><span class="title title--small">Fun Fact</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="label label--small">Row 1, Cell 1</span></td>
      <td><span class="label">Row 1, Cell 2</span></td>
      <td><span class="label label--small">Row 1, Cell 3</span></td>
    </tr>
  </tbody>
</table>

XSmall Table

Use table--xsmall for the most compact row heights.

	Employee	Role	Pranks	Sales	Score	Fun Fact
1	Dwight Schrute	Assistant to the Regional Manager	24	44	12.91	Owns a beet farm
2	Jim Halpert	Sales Rep	42	21	8.69	Dwight hates him
3	Stanley Hudson	Sales Rep	0	28	5.83	Only smiles on Pretzel Day
4	Phyllis Vance	Sales Rep	0	18	3.79	Married to Bob Vance
5	Andy Bernard	Sales Rep	2	14	3.18	Cornell graduate
6	Creed Bratton	Quality Assurance	???	???	???	???
7	Karen Filippelli	Sales / Utica Manager	0	12	2.57	Jim’s ex from Stamford
8	Michael Scott	Regional Manager	15	0	1.65	World’s Best Boss mug
9	Todd Packer	Traveling Salesman	0	6	1.34	Terrible human being
10	Ryan Howard	Temp / VP / Janitor	1	2	0.63	Pitched the Sabre Pyramid
11	Pam Beesly	Receptionist / Office Admin	3	0	0.43	Art school dreamer
12	Meredith Palmer	Supplier Relations	0	1	0.32	Exchanged paper for steak
13	Holly Flax	HR (Nashua)	2	0	0.32	Michael’s soulmate
14	Darryl Philbin	Warehouse Foreman	1	0	0.22	Started a band
15	Kevin Malone	Accountant	1	0	0.22	Spilled the chili
16	Erin Hannon	Receptionist	1	0	0.22	Dates Gabe, then Andy
17	Kelly Kapoor	Customer Service	0	0	0.00	Obsessed with Ryan
18	Angela Martin	Accountant	0	0	0.00	Owns 12 cats
19	Oscar Martinez	Accountant	0	0	0.00	“Actually...” guy
20	Roy Anderson	Warehouse	0	0	0.00	Pam’s ex-fiancé
21	Toby Flenderson	HR	0	0	0.00	Michael hates him
22	Jan Levinson	Corporate	0	0	0.00	Serenity by Jan
23	David Wallace	CFO	0	0	0.00	Invented “Suck It”
24	Robert California	CEO	0	0	0.00	The Lizard King
25	Nellie Bertram	Special Projects Manager	0	0	0.00	Took Andy’s job
26	Deangelo Vickers	Regional Manager	0	0	0.00	Juggled invisible balls
27	Charles Miner	Corporate VP	0	0	0.00	Hated Jim’s pranks
28	Gabe Lewis	Sabre Liaison	0	0	0.00	Tall, awkward, hates horror movies
29	Clark Green	Sales	0	0	0.00	Mini Dwight
30	Pete Miller	Sales	0	0	0.00	Nickname: Plop

Table XSmall

<table class="table table--xsmall" data-table-limit="true">
  <thead>
    <tr>
      <th><span class="title title--small">#</span></th>
      <th><span class="title title--small">Employee</span></th>
      <th><span class="title title--small">Role</span></th>
      <th><span class="title title--small">Pranks</span></th>
      <th><span class="title title--small">Sales</span></th>
      <th><span class="title title--small">Score</span></th>
      <th><span class="title title--small">Fun Fact</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="label label--small">Row 1, Cell 1</span></td>
      <td><span class="label label--small">Row 1, Cell 2</span></td>
      <td><span class="label label--small">Row 1, Cell 3</span></td>
    </tr>
  </tbody>
</table>

Overflow Engine

Demonstrates the overflow behavior and trailing “and X more” row when content exceeds the height budget.

	Employee	Role	Pranks	Sales	Score	Fun Fact
1	Dwight Schrute	Assistant to the Regional Manager	24	44	12.91	Owns a beet farm
2	Jim Halpert	Sales Rep	42	21	8.69	Dwight hates him
3	Stanley Hudson	Sales Rep	0	28	5.83	Only smiles on Pretzel Day
4	Phyllis Vance	Sales Rep	0	18	3.79	Married to Bob Vance
5	Andy Bernard	Sales Rep	2	14	3.18	Cornell graduate
6	Creed Bratton	Quality Assurance	???	???	???	???
7	Karen Filippelli	Sales / Utica Manager	0	12	2.57	Jim’s ex from Stamford
8	Michael Scott	Regional Manager	15	0	1.65	World’s Best Boss mug
9	Todd Packer	Traveling Salesman	0	6	1.34	Terrible human being
10	Ryan Howard	Temp / VP / Janitor	1	2	0.63	Pitched the Sabre Pyramid
11	Pam Beesly	Receptionist / Office Admin	3	0	0.43	Art school dreamer
12	Meredith Palmer	Supplier Relations	0	1	0.32	Exchanged paper for steak
13	Holly Flax	HR (Nashua)	2	0	0.32	Michael’s soulmate
14	Darryl Philbin	Warehouse Foreman	1	0	0.22	Started a band
15	Kevin Malone	Accountant	1	0	0.22	Spilled the chili
16	Erin Hannon	Receptionist	1	0	0.22	Dates Gabe, then Andy
17	Kelly Kapoor	Customer Service	0	0	0.00	Obsessed with Ryan
18	Angela Martin	Accountant	0	0	0.00	Owns 12 cats
19	Oscar Martinez	Accountant	0	0	0.00	“Actually...” guy
20	Roy Anderson	Warehouse	0	0	0.00	Pam’s ex-fiancé
21	Toby Flenderson	HR	0	0	0.00	Michael hates him
22	Jan Levinson	Corporate	0	0	0.00	Serenity by Jan
23	David Wallace	CFO	0	0	0.00	Invented “Suck It”
24	Robert California	CEO	0	0	0.00	The Lizard King
25	Nellie Bertram	Special Projects Manager	0	0	0.00	Took Andy’s job
26	Deangelo Vickers	Regional Manager	0	0	0.00	Juggled invisible balls
27	Charles Miner	Corporate VP	0	0	0.00	Hated Jim’s pranks
28	Gabe Lewis	Sabre Liaison	0	0	0.00	Tall, awkward, hates horror movies
29	Clark Green	Sales	0	0	0.00	Mini Dwight
30	Pete Miller	Sales	0	0	0.00	Nickname: Plop

Table Overflow

<table class="table" data-table-limit="true">
  <thead>
    <tr>
      <th><span class="title">#</span></th>
      <th><span class="title">Employee</span></th>
      <th><span class="title">Role</span></th>
      <th><span class="title">Pranks</span></th>
      <th><span class="title">Sales</span></th>
      <th><span class="title">Score</span></th>
      <th><span class="title">Fun Fact</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="label label--small">Row 1, Cell 1</span></td>
      <td><span class="label">Row 1, Cell 2</span></td>
      <td><span class="label label--small">Row 1, Cell 3</span></td>
    </tr>
  </tbody>
</table>

Clamp Engine

Apply data-clamp to each cell’s content to ensure consistent single-line truncation with ellipsis. This works with the Table Overflow behavior and is handled by the Clamp engine.

	Employee	Role	Pranks	Sales	Score	Fun Fact
1	Dwight Schrute	Assistant to the Regional Manager	24	44	12.91	Owns a beet farm
2	Jim Halpert	Sales Rep	42	21	8.69	Dwight hates him
3	Stanley Hudson	Sales Rep	0	28	5.83	Only smiles on Pretzel Day
4	Phyllis Vance	Sales Rep	0	18	3.79	Married to Bob Vance
5	Andy Bernard	Sales Rep	2	14	3.18	Cornell graduate
6	Creed Bratton	Quality Assurance	???	???	???	???
7	Karen Filippelli	Sales / Utica Manager	0	12	2.57	Jim’s ex from Stamford
8	Michael Scott	Regional Manager	15	0	1.65	World’s Best Boss mug
9	Todd Packer	Traveling Salesman	0	6	1.34	Terrible human being
10	Ryan Howard	Temp / VP / Janitor	1	2	0.63	Pitched the Sabre Pyramid
11	Pam Beesly	Receptionist / Office Admin	3	0	0.43	Art school dreamer
12	Meredith Palmer	Supplier Relations	0	1	0.32	Exchanged paper for steak
13	Holly Flax	HR (Nashua)	2	0	0.32	Michael’s soulmate
14	Darryl Philbin	Warehouse Foreman	1	0	0.22	Started a band
15	Kevin Malone	Accountant	1	0	0.22	Spilled the chili
16	Erin Hannon	Receptionist	1	0	0.22	Dates Gabe, then Andy
17	Kelly Kapoor	Customer Service	0	0	0.00	Obsessed with Ryan
18	Angela Martin	Accountant	0	0	0.00	Owns 12 cats
19	Oscar Martinez	Accountant	0	0	0.00	“Actually...” guy
20	Roy Anderson	Warehouse	0	0	0.00	Pam’s ex-fiancé
21	Toby Flenderson	HR	0	0	0.00	Michael hates him
22	Jan Levinson	Corporate	0	0	0.00	Serenity by Jan
23	David Wallace	CFO	0	0	0.00	Invented “Suck It”
24	Robert California	CEO	0	0	0.00	The Lizard King
25	Nellie Bertram	Special Projects Manager	0	0	0.00	Took Andy’s job
26	Deangelo Vickers	Regional Manager	0	0	0.00	Juggled invisible balls
27	Charles Miner	Corporate VP	0	0	0.00	Hated Jim’s pranks
28	Gabe Lewis	Sabre Liaison	0	0	0.00	Tall, awkward, hates horror movies
29	Clark Green	Sales	0	0	0.00	Mini Dwight
30	Pete Miller	Sales	0	0	0.00	Nickname: Plop

Table Clamp: 1 line

<table class="table" data-table-limit="true">
  <thead>
    <tr>
      <th><span class="title">#</span></th>
      <th><span class="title">Employee</span></th>
      <th><span class="title">Role</span></th>
      <th><span class="title">Pranks</span></th>
      <th><span class="title">Sales</span></th>
      <th><span class="title">Score</span></th>
      <th><span class="title">Fun Fact</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="label label--small" data-clamp="1">Row 1, Cell 1</span></td>
      <td><span class="label" data-clamp="1">Row 1, Cell 2</span></td>
      <td><span class="label label--small" data-clamp="1">Row 1, Cell 3</span></td>
    </tr>
  </tbody>
</table>

Guides

Utilities

Modulations

Base

Elements

Components

Table