A data table that gets out of the way

A data table is where people spend their working day in a product: scanning, sorting, picking rows, acting on them. This is how we designed the Koala UI DataTable to stay out of the way.

Six decisions and the reasons behind each, with the real component running on this page.

1. No box around the table

The first instinct is to frame a table: a card with padding, then the table inside with its own border. That draws two frames around one thing, and every row rule stops short of the edge it should reach.

Koala tables take variant="full-bleed" for this. In a card or straight on an app page, the rules run to the edges while the first cell stays on the same line as the title and the search field above it. The table brings its own structure; it does not need a box to have one.

2. Rules or chips, never both

A rounded hover or selected fill looks friendly on its own. Put it between two straight row rules and it reads as a mistake: a soft shape sliced by hard lines above and below.

So a Koala table picks one language. The default draws straight rules on the cells and fills a row flat, edge to edge. The rounded, inset and separated variants drop the rules altogether and turn the fill into a padded chip.

3. Quiet hover and selection

Hover and selection fills are where tables most often feel heavy. A fill that reads darker than the content around it, or one that presses against the first cell's text, makes the whole screen look unfinished.

Koala builds both from the surface itself. The default table hovers with half a step of the muted tone mixed into the surface and selects with one full step. The chip variants mix 4% of the ink for hover and 5% for selected. Either way it is enough to follow the pointer and keep your place, and quiet enough to read straight through.

4. Reorder by lifting, not by ghosting

When people drag a row, the row should come with them. The grabbed row follows the pointer and the rows it passes step aside, so the gap itself shows where it will land. There is no insertion line to aim at.

That rules out the browser's HTML5 drag and drop. It is unreliable on touch, it drags a washed-out snapshot instead of the real row, it takes over the cursor, and it cannot ease the drop into place.

The table tracks the gesture with pointer events instead, from row geometry measured at grab time. Escape cancels, the view scrolls when the row nears its edges, and a press that moves less than 4px is still a click.

Two details took the longest. The lifted row has no drop shadow: on a table row a shadow paints under the next row, and moved onto the cells it leaves a seam at every cell boundary. It rises with a slightly raised fill and a hairline on its top edge instead.

And the drag barely touches React: the offset lives in a CSS variable, so the table re-renders once for each row the drag passes, not sixty times a second.

// pointermove: no React render, just one CSS variable
scroller.style.setProperty("--row-drag", `${dy}px`)

// the lifted row reads it on the compositor
liftedRow.style.transform = "translate3d(0, var(--row-drag), 0)"

// React only hears about it when the target slot changes
if (slot !== toIndex) setToIndex(slot)

5. Selecting rows never moves the page

Bulk actions usually arrive as a bar that pushes the table down the moment you tick a box, so the row you were about to tick next is no longer under your pointer. Koala's selection bar floats over the last rows instead, out of the layout, centered in the visible width even when the table scrolls sideways, and announced to screen readers as a status.

6. Remember the view, and let density be a choice

People shape a table to their work: they hide columns, sort, reorder and pick a page size. With a persistKey the table keeps all of it between visits.

Density is one prop, compact or comfortable, shared with the rest of the system, so a table matches the screen around it.

<DataTable
  variant="full-bleed"
  columns={columns}
  data={orders}
  onRowReorder={({ fromIndex, toIndex }) =>
    setOrders((rows) => moveItem(rows, fromIndex, toIndex))
  }
  enableRowSelection
  renderSelectionActions={() => <Button variant="ghost" size="sm">Archive</Button>}
  density="compact"
  persistKey="orders"
/>

Use the DataTable

The DataTable docs cover filtering, grouping, sticky columns, server-side data, loading and empty states, with every example live. And the status pills in every table above are the badges we rebuilt for light mode.