Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Data table

Sorting 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.

Interactive18 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-data-table

Options

OptionDescription
data-m-data-table-page-size="10" (0 shows every row)
data-m-data-table-select
data-m-data-table-filter="false"
data-m-data-table-columns="false"
data-sort on a cell, data-sortable="false" on a header

Methods

MethodDescription
Monsoon.dataTable(el).sort(1, "descending")
Monsoon.dataTable(el).filter("paid")
Monsoon.dataTable(el).page(2)
Monsoon.dataTable(el).selected
Monsoon.dataTable(el).selectAll()
Monsoon.dataTable(el).refresh()

Events

EventDescription
monsoon:table-sort { column, direction }
monsoon:table-filter { query, count }
monsoon:table-page { page, size }
monsoon:table-select { rows }

Classes

18 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 data table. On a <div> in the example. Sets grid display, gap, width and background, and --data-table-height.
CSS
.data-table {
  --data-table-height: none;
  display: grid;
  gap: .75rem;
  min-width: 0;
}

.data-table tr[data-selected] > td {
  background-color: color-mix(in oklab, var(--primary) 7%, var(--surface));
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets flex display, alignment and gap.
CSS
.data-table-toolbar, .data-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets alignment and width.
CSS
.data-table-filter {
  flex: 1 1 12rem;
  max-width: 20rem;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets margin, text size, font weight and text color.
CSS
.data-table-status {
  margin-inline-start: auto;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--primary);
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets fixed position, offsets, stacking order, margin, padding and overflow, and --tone and --tone-fg.
CSS
.data-table-menu:popover-open {
  display: grid;
}

.data-table-menu:not([popover]) {
  display: grid;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets flex display, alignment, gap, padding, corner radius and pointer cursor.
CSS
.data-table-menu-item:hover {
  background-color: var(--muted);
}

.data-table-menu-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .4375rem .5rem;
  border-radius: var(--m-radius-md);
  cursor: pointer;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets height, overflow, background, border, corner radius and sticky position.
CSS
.data-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  box-shadow: inset 0 -1px var(--border);
}

.data-table-scroll {
  max-height: var(--data-table-height);
  overflow: auto;
  background-color: var(--surface);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-xl);
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets inline-flex display, alignment, gap, margin, padding and text size.
CSS
.data-table-sort:hover {
  color: var(--foreground);
  background-color: var(--muted);
}

.data-table-sort:focus-visible {
  outline: var(--m-ring);
  outline-offset: calc(-1 * var(--m-ring-width));
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets width, height, background and opacity.
CSS
.data-table-sort-icon {
  width: .875rem;
  height: .875rem;
  background-color: currentColor;
  mask: var(--m-ix-sort) center / contain no-repeat;
  opacity: .4;
}

[aria-sort=ascending] > .data-table-sort > .data-table-sort-icon {
  mask-image: var(--m-ix-up);
  opacity: 1;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets width, padding and grid display.
CSS
.data-table-select > .checkbox {
  display: grid;
}

.data-table-select {
  width: 2.75rem;
  padding-inline-end: 0;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets padding, text style and text color.
CSS
.data-table-empty > td {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted-foreground);
}
Modifier Modifier, combined with the data-table class. Not used in the example above. A hook for state rules such as .data-table-info.
CSS
.data-table-info, .data-table-page {
  font-variant-numeric: tabular-nums;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets flex display, alignment, gap and width.
CSS
.data-table-pager > .select {
  width: auto;
}

.data-table-pager {
  display: flex;
  align-items: center;
  gap: .5rem;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets width and text style.
CSS
.data-table-page {
  min-width: 5.5rem;
  text-align: center;
}

.data-table-info, .data-table-page {
  font-variant-numeric: tabular-nums;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets text size.
CSS
.data-table-size {
  font-size: .8125rem;
}
Part Part of the data 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;
}
Modifier Modifier, combined with the data-table class. Not used in the example above. Sets inline-grid display, alignment, width, height, text color and background, and 9 custom properties.
CSS
.checkbox-card > .checkbox, .radio-card > .radio {
  margin-top: .0625rem;
}

.checkbox:checked::before, .checkbox:indeterminate::before {
  clip-path: inset(0);
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Data table: start from the base class, then add modifiers -->
<div class="data-table" data-m-data-table data-m-data-table-page-size="5" data-m-data-table-select>
  <table class="table table-hover">
    <thead><tr><th>Invoice</th><th>Customer</th><th>Status</th><th>Issued</th><th>Amount</th></tr></thead>
    <tbody>
      <tr><td class="font-medium">INV-1042</td><td>Northwind</td><td data-sort="Paid"><span class="badge badge-sm badge-success">Paid</span></td><td>2026-09-02</td><td class="tabular-nums">$1,250.00</td></tr>
      <tr><td class="font-medium">INV-1043</td><td>Globex</td><td data-sort="Pending"><span class="badge badge-sm badge-warning">Pending</span></td><td>2026-09-05</td><td class="tabular-nums">$860.00</td></tr>
      <tr><td class="font-medium">INV-1044</td><td>Initech</td><td data-sort="Overdue"><span class="badge badge-sm badge-danger">Overdue</span></td><td>2026-09-09</td><td class="tabular-nums">$2,410.00</td></tr>
      <tr><td class="font-medium">INV-1045</td><td>Umbrella</td><td data-sort="Paid"><span class="badge badge-sm badge-success">Paid</span></td><td>2026-09-12</td><td class="tabular-nums">$395.00</td></tr>
      <tr><td class="font-medium">INV-1046</td><td>Hooli</td><td data-sort="Paid"><span class="badge badge-sm badge-success">Paid</span></td><td>2026-09-15</td><td class="tabular-nums">$12,000.00</td></tr>
      <tr><td class="font-medium">INV-1047</td><td>Stark Industries</td><td data-sort="Pending"><span class="badge badge-sm badge-warning">Pending</span></td><td>2026-09-18</td><td class="tabular-nums">$4,780.50</td></tr>
      <tr><td class="font-medium">INV-1048</td><td>Wayne Enterprises</td><td data-sort="Paid"><span class="badge badge-sm badge-success">Paid</span></td><td>2026-09-21</td><td class="tabular-nums">$990.00</td></tr>
      <tr><td class="font-medium">INV-1049</td><td>Acme</td><td data-sort="Overdue"><span class="badge badge-sm badge-danger">Overdue</span></td><td>2026-09-24</td><td class="tabular-nums">$75.00</td></tr>
      <tr><td class="font-medium">INV-1050</td><td>Soylent</td><td data-sort="Pending"><span class="badge badge-sm badge-warning">Pending</span></td><td>2026-09-27</td><td class="tabular-nums">$3,300.00</td></tr>
      <tr><td class="font-medium">INV-1051</td><td>Cyberdyne</td><td data-sort="Paid"><span class="badge badge-sm badge-success">Paid</span></td><td>2026-10-01</td><td class="tabular-nums">$18,450.00</td></tr>
<!-- the full example is in the Code tab above -->

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.
Data display and layoutTableData tables with zebra rows, hover rows, compact cells, cell borders, a pinned header and first column, inside a scroll wrapper.InteractiveDual range sliderTwo thumbs for a minimum and a maximum over two native range inputs, which keep the values for the form. Steps, a minimum gap, formatted tooltips and the WAI-ARIA slider keys. Needs monsoon.js.InteractiveColor pickerA saturation and brightness area, hue and opacity sliders, a hex, rgb or oklch field, swatches and the eyedropper where the browser has one, over a native color input. Needs monsoon.js.InteractiveTree viewNested lists become a WAI-ARIA tree: Up and Down move, Right expands, Left collapses or goes to the parent, Home, End, type ahead and * to expand siblings. data-open starts a branch expanded. Needs monsoon.js.

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.