Designing Better Tables: Using Popovers for Extra Data

When working with large data tables, displaying all available information at once can often make the table overwhelming and hard to read. As a result, it’s common to hide secondary information and use a design pattern to reveal more details only when needed.

Data table design is central to good user experience (UX), especially when handling high-volume or complex data. According to articles like Why does table design UX matter? and Design better data tables, there’s a consensus on three main ways to manage these hidden details:

• Expandable Rows – Expands table rows inline to reveal additional details.
• Modal Views – Opens a modal dialog with more in-depth information.
• Quick View (Sidebar) – Displays extra details in a sidebar that can slide in from the edge.

In this article, I’ll show you how to set up these three options flexibly, so you can switch between them without needing to rewrite the table’s markup.

For this, we’ll use popovers, which are ideal for easily attaching information directly to specific rows.

---

Setting Up the Basic Table

To start, we’ll use the same markup and styles as in A Guide to Styling Tables:

In the last cell, after the text content, we’ve added a simple button (the icon is from tabler), that will trigger a popover:

<button type="button" popovertarget="p1"></button>

Next, we add the popover somewhere in the document to display the additional content when triggered:

<div id="p1" popover>
  ... content ...   
</div>

Styling the Popover

For the popover styling, we’ll use the template from Adam Argyle’s Steal this popover code. This template includes smooth transitions for the popover’s appearance and disappearance:

.selector {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      inset .5s,
      scale .5s,
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: #0002;
  }

  &:popover-open {
    opacity: 1;
    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

Modal View

For the modal layout, we’ll add a --modal modifier class to define the modal’s size and center it on the screen:

&.--modal {
  block-size: calc(100dvh - 2em);
  inline-size: calc(100dvw - 2em);
  inset-block-start: 1em;
  inset-inline: 1em;
  transform-origin: 50% 50%;

  @starting-style {
    &:popover-open{
      scale: 0;
    }
  }
}

---

Quick View (Sidebar)

To create a quick view sidebar, we'll add a new modifier class, --inline-start, to the popover. This sidebar slides in from the side of the viewport and can be closed with a smooth animation. Here’s the setup:

&.--inline-start {
  --width: clamp(220px, 33vw, 350px);
  block-size: calc(100dvh - 2em);
  inline-size: var(--width);
  inset-block-start: 1em;
  inset-inline: 1em;

  @starting-style {
    &:popover-open {
      inset-inline: calc(0px - var(--width));
    }
  }
  &[popover]:not(:popover-open) { 
    inset-inline: calc(0px - var(--ui-width));
  }
}

With this setup, the popover slides in from the left. The line &[popover]:not(:popover-open) ensures that it slides back out when closed.

We can apply similar adjustments to create slide-in effects from the right or from above and below:

Inline End (--inline-end)

Block End (--block-end)

---

Expandable Rows

And finally, let’s look at expandable rows. Unlike modals and sidebars, expandable rows integrate directly within the table layout. Traditionally, this approach involves a hidden with a spanning all columns, and a JavaScript function to toggle its visibility.

But can we reuse the existing popover to expand rows inline? Not directly — but we can fake it by positioning the popover to appear just below the row, creating a similar effect.

---

First, we attach the popover to the bottom left of the table row by setting anchor-name on the and applying the following CSS:

<button type="button" popovertarget="p1"></button>

Next, we need two features that, unfortunately, are currently Chrome-only:

<div id="p1" popover>
  ... content ...   
</div>

The interpolate-size property allows the popover to animate smoothly to its final height, while anchor-size lets it match the row’s width (or height, using anchor-size(height)).

So far, so good — but the expanded row covers the next rows.

We can fix this by adding the popover height to the padding-block-end of the table cells within the expanded row:

Cool. The illusion is complete!

To animate the height, we'll add a few extra declarations to the CSS:

.selector {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      inset .5s,
      scale .5s,
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: #0002;
  }

  &:popover-open {
    opacity: 1;
    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

Automating the Padding Adjustment

To avoid manually updating padding, we can use a script that dynamically updates the padding based on the popover’s height:

&.--modal {
  block-size: calc(100dvh - 2em);
  inline-size: calc(100dvw - 2em);
  inset-block-start: 1em;
  inset-inline: 1em;
  transform-origin: 50% 50%;

  @starting-style {
    &:popover-open{
      scale: 0;
    }
  }
}

This script listens for the popover’s toggle event, dynamically updating a custom property, --row, to match the popover height when open.

---

Demo

You can view a demo at browser.style/ui/table-expand, where you’ll also find the original table demo styles.

The above is the detailed content of Designing Better Tables: Using Popovers for Extra Data. For more information, please follow other related articles on the PHP Chinese website!