feat(tables): name a filter whose column is off screen, and let its chip clear it

A tabletHidden/narrowHidden column below its width, or any column in a card
layout, took its header funnel with it: the rows were narrowed by a filter
nobody could see. The cue is shown by the inverse of the column's own
container query, so it agrees with the table at every width and text size.
Wired into DataTable, the playlist table and the channel cards (E28 F2).
This commit is contained in:
2026-09-27 16:22:26 +02:00
parent 27483ae1d6
commit 51f881681b
10 changed files with 342 additions and 40 deletions
+8
View File
@@ -62,6 +62,7 @@ import { Input } from "./ui/Input";
import { CheckRow } from "./ui/NativeControls";
import { useReturnFocus } from "./ui/useReturnFocus";
import { MoreButton } from "./ui/MoreButton";
import { HiddenFilterCue } from "./ui/HiddenFilterCue";
import { useCopyItems } from "./copyItems";
// The playlist detail is a HYBRID table (E4 S4): real sortable/filterable column headers over a
@@ -987,6 +988,13 @@ export default function Playlists() {
{/* Not clipped, so the header's filter popovers can overflow the table box. A container,
so a narrow column hides by the table's width, not the window's (`narrowHidden`). */}
<div className="@container max-w-5xl mx-auto">
{/* A narrow table drops Channel and its funnel with it: the cue keeps its filter named. */}
<HiddenFilterCue
columns={columns}
filters={filters}
by="width"
onFilter={applyFilter}
/>
{/* table-fixed, not auto: every column but the title has a declared width, so the
title absorbs the rest and its `truncate` works. Auto layout sizes columns from
min-content, and a nowrap title cell's min-content is the entire title. */}