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:
@@ -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. */}
|
||||
|
||||
Reference in New Issue
Block a user