Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Table

Data tables with zebra rows, hover rows, compact cells, cell borders, a pinned header and first column, inside a scroll wrapper.

Data display and layout8 classesNo JavaScriptLight and dark

Example

Full

Classes

8 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the table. On a <table> in the example. Sets width, border, text size, padding, text style and background, and --table-py and --table-px.
CSS
.table tbody tr:last-child > * {
  border-bottom: 0;
}

.table :is(th, td) {
  padding: var(--table-py) var(--table-px);
  border-bottom: var(--m-border-width) solid var(--border);
  text-align: start;
  vertical-align: middle;
}
Part Part of the table. On a <div> in the example. Sets overflow, border, corner radius and background.
CSS
.table-wrap {
  overflow: auto;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-xl);
  background: var(--surface);
}
Modifier Modifier, combined with the table class. On a <table> in the example. Sets background.
CSS
.table-zebra tbody tr:nth-child(even) > * {
  background: var(--surface-2);
}
Modifier Modifier, combined with the table class. On a <table> in the example. Sets background.
CSS
.table-hover tbody tr:hover > * {
  background: color-mix(in oklab, var(--primary) 7%, var(--surface));
}
Modifier Modifier, combined with the table class. Not used in the example above. Sets --table-py and --table-px.
CSS
.table-compact {
  --table-py: 0.4rem;
  --table-px: 0.75rem;
}
Modifier Modifier, combined with the table class. Not used in the example above. Sets border.
CSS
.table-bordered :is(th, td) + :is(th, td) {
  border-inline-start: var(--m-border-width) solid var(--border);
}
Modifier Modifier, combined with the table class. On a <table> in the example. Sets sticky position, offsets and stacking order.
CSS
.table-pin-header thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
Modifier Modifier, combined with the table class. On a <table> in the example. Sets sticky position, offsets, stacking order, background and shadow.
CSS
.table-pin-col thead th:first-child {
  z-index: 3;
  background: var(--surface-2);
}

.table-pin-col :is(th, td):first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: inset -1px 0 var(--border);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Table: start from the base class, then add modifiers -->
<div class="table-wrap max-h-72"><table class="table table-zebra table-hover table-pin-header table-pin-col"><thead><tr><th>Invoice</th><th>Customer</th><th>Status</th><th>Amount</th></tr></thead><tbody><tr><td>INV-1042</td><td>Northwind</td><td class="text-success">Paid</td><td>$1,250.00</td></tr><tr><td>INV-1043</td><td>Globex</td><td class="text-muted-foreground">Pending</td><td>$860.00</td></tr><tr><td>INV-1044</td><td>Initech</td><td class="text-danger">Overdue</td><td>$2,410.00</td></tr><tr><td>INV-1045</td><td>Umbrella</td><td class="text-success">Paid</td><td>$395.00</td></tr></tbody></table></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Keep real table markup with th scope headers and a caption (visually hidden if needed) so screen readers can navigate by row and column.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
InteractiveData tableSorting by column (numbers, money and dates sort as such), a filter box, pagination, row selection with checkboxes and Shift for ranges, a column menu and a sticky header, on top of an existing table. Needs monsoon.js.Data display and layoutAvatar groupOverlapping avatars with a count for the rest.Data display and layoutListRows with leading media, text and a trailing action, optionally divided, bordered and hoverable.Data display and layoutTimelineEvents on a line with dots or icons, vertical, horizontal or alternating sides.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.