Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item selection should use large hit areas (the whole row or card, not just a checkbox). Selected state is communicated through a subtle background colour shift. Mass actions appear when it

Data Display and Selection Complex data collections — products, files, users, orders, tasks — have no single correct view. Different tasks call for different views. Browsing benefits from grid; comparing details benefits from list or table; bulk management benefits from a dense table with mass actions. Give users the choice. View Modes Offer multiple views when the data has both visual and detailed dimensions. View Best for When to default Grid Visual items: products, images, files, cards When items are visually distinct and browsing is the primary task List Moderate detail: tasks, emails, articles When a key piece of text or metadata drives selection Table Dense data: orders, reports, user management When multiple columns of data must be compared View toggle placement: top right of the collection, adjacent to sort/filter controls. Use icon buttons with tooltips ( grid , list , table ). Persist the user's choice in localStorage. On mobile, collapse to the view that works best for the content — grid for visual items, list for text. Do not offer a view toggle on small screens unless both views are genuinely usable. Past a Handful of Items, Cards Become a Table A card earns its border when it is one of a few things a reader compares side by side. Repeat that border fifteen times down a page and it separates nothing: every row is boxed, so the boxes carry no information and the reader pays for them in noise. Past roughly six items, drop to a table. Keep a horizontal rule between rows or stripe them, and drop the side and outer rules entirely. Vertical edges do no work in a list already bounded by the page's own column, and the eye groups by proximity and alignment long before it needs a drawn line. The exception is a card that contains something a row cannot. An image, a chart, a per item control set, a body of text that has to wrap: those keep their card at any count, because the border is holding a composition together rather than separating one line from the next. A product grid, a gallery, a set of dashboard tiles are not covered by this rule. The test is what the border encloses. If it encloses a line of text and a value, it is decoration on a table row. If it encloses a layout, it is a card. Then give the header the emphasis the boxes were pretending to provide: a heavier weight, or a smaller size in caps with letterspacing, or a darker ground. Choose by how much the reader needs to navigate the list. A long reference table wants a header that anchors scanning; a short one can let the first column do it. Selection: Prefer Large Hit Areas Checkboxes are small targets. Requiring users to hit a 16×16px checkbox to select a row is unnecessary friction — especially on touch devices. Default: the entire row or card is the selection target. Click anywhere on the row → selects the row (background shifts, checkbox checks) The checkbox is a visual indicator of selection state, not the only way to select Keyboard: Space selects the focused row; Shift+click extends selection; Ctrl/Cmd+click toggles individual items For cards in a grid, the entire card is the selection area — not just a checkbox in the corner. Selected State Visual Language Selected items communicate their state through a background colour shift — not just a checkbox tick. Background: color primary subtle — the brand primary colour heavily desaturated and lightened to ~5–8% opacity. Perceptible but not jarring. Left border accent (optional): A 3px left border in color primary reinforces the selected state for list and table rows. Checkbox: Checked and filled with color primary . The checkbox is a secondary signal, not the primary one. Do not use a high contrast or saturated background for selection — it competes with content and makes dense tables hard to read. Mass Actions When one or more items are selected, mass actions appear. They disappear when nothing is selected. Placement: A contextual toolbar that appears at the top of the collection (replacing or supplementing the standard toolbar) when selection is active. Lead with the selection count: "3 selected" — confirms the scope before any action Show only actions applicable to the selection — if some actions require a single item, disable them for multi select "Clear" deselects everything and dismisses the toolbar Destructive mass actions (Delete) always trigger a confirm dialog naming the count: "Delete 3 projects? This cannot be undone." Select all: A checkbox in the table header selects all items on the current page. A secondary action "Select all 247" extends to the full dataset. Sorting and Filtering Column sorting (table view) Click a column header to sort ascending; click again for descending; third click clears sort Active sort column shows a directional arrow (↑ ↓) Only sortable columns are clickable — non sortable columns have no hover state on header Filters Fetch parameters and result filters live in different places. A form holds what needs a new fetch (date range, owner, location) and its submit button. A toolbar directly above the results holds what narrows rows already loaded: toggles, segmented filters, the visible of total count, and actions that use the results. Mixed together, the user cannot tell which controls need the submit button, and result actions read as part of the search. Persistent filters belong in a sidebar or filter bar above the collection Active filters should be visible as chips/tags that can be individually removed "Clear all filters" removes all active filters in one action Filter count badge on the filter button when filters are active: Filter (3) Empty states No results from filter: "No results for these filters. [Clear filters]" — do not show a generic empty state Genuinely empty collection: show a call to action for the first item: "No projects yet. [Create project]" Search and Autocomplete Search is how users find one thing in a large set, so it must feel instant and recognisable . Suggest from the first keystrokes. Start returning results after 1 character, at most 2–3 — don't make the user finish typing or press enter to see anything. Results appear live in a dropdown as they type. Make a valid result recognisable at a glance. The whole point of a suggestion list is that the user spots their result in a long list without reading every row. Give each result more than a bare string: a thumbnail/image where the item is visual (products, people, files), the category / area it belongs to, and for typed domains (products, spare parts, services) a category icon and colour so the type is legible before the label is read — find good brand appropriate icons for these result types (see [[brand visual language]]), the matched text highlighted within the result. This is a soft rule — not every search needs images — but the goal is constant: the user should identify the right result out of many, fast (reading is time — see [[ui density]]). Give a way out to the full results. The dropdown is a shortcut, not the whole story. Always offer "See all results for '…'", opening a full listing/results page with filters (the collection patterns above) for when the quick suggestions aren't enough. Fully keyboard navigable. Arrow keys move through suggestions, Enter selects, Esc closes — and it must all work by mouse too. Search is a power user path; don't force the hand off the keyboard. Table Specific Patterns Sticky header Table column headers stick to the top when scrolling vertically — users must always be able to see what each column means. Sticky first column For wide tables that scroll horizontally, the first column (row identifier — name, ID) sticks to the left. Row actions Per row actions (Edit, Delete, View) appear on hover in the rightmost column. Do not show them at rest — they add visual noise. A one way action shows its result in its own slot. When a row action cannot be repeated (send, release, approve), the result replaces the button: the created reference, a timestamp, or a short state. A separate status column repeats what the button's presence already said and splits one fact across two places. Size the slot to the button so rows stay aligned before and after. Column resize and reorder For enterprise data tables: allow columns to be resized by dragging the header border, and reordered by dragging the header. Persist the layout. Empty cells Never write "N/A". It is English jargon that does not translate, it means two things at once (not applicable, not available), and repeated down a column it outweighs the real values. Mark a missing value with an en dash (–) in muted text, aligned like the column's values, with a text alternative such as "No value" for screen readers. A hyphen reads as a minus sign next to numbers. Leave a cell blank only in a sparse column where most rows have nothing; elsewhere a blank reads as still loading or broken. Zero is a value: write 0 . Where the reason matters, say it in words: "Not measured", "Pending". A value that exists but is unknown may show "?"; even that says more than "N/A". Making Numbers Comprehensible A raw number is hard to judge on its own — "1,240 users" or "€48,900" means little without a reference. Presenting data is not just laying out the figures; it is giving them the context and shape that let a user understand them at a glance. Give a number a reference. A bare value communicates far less than a value with a baseline: a percentage, an average, a delta, or a comparison. "€48,900 (+12% vs last month)", "72% of target", "avg 3.4 per user" — the comparison is usually the insight, not the absolute figure. Visualise when the story is a pattern. Reach for a graph when the message is a trend, distribution, comparison, or relationship the eye reads faster than a column of digits. A single KPI can pair with a sparkline; a set of categories reads better as a bar chart than a table. A table is for looking up exact values; a chart is for seeing the shape. Show time series for anything that evolves. If a value lives and changes over time — revenue, usage, a status history — present its trajectory, not just the current snapshot. A trend line answers "is this getting better or worse?" that a single number never can. Whenever something is time dependent, consider showing its history alongside its current value. Choose familiar, widely understood chart types. Pick the chart most people already know how to read — bar, line, area, pie/donut, sparkline — over an exotic one (sankey, radar, chord, treemap) that looks impressive but forces the user to learn the chart before they can read the data. Novelty in a chart type is a tax on comprehension; spend it only when a common chart genuinely can't tell the story. Limited, semantic palette. At most 2–3 colours; each means exactly one thing (see [[status colors and errors]]). Traffic light or a known convention (brand primary vs grey). Need more distinctions? Add a legend or tooltips — don't add hues. Chart craft (axes, legends, light/dark): dataviz . Pairing a chart with its table: [[coordinated data views]]. One indicator carries everything about its subject; one legend per page at most. Whatever describes a single thing (a row, a card, a record) goes into the same indicator: values and identifiers sit on the marks themselves, not in a bar plus a list or key beside it. When space runs out, degrade in steps: full label, then the number only, then nothing visible, with the full text in a tooltip or title and in the accessible name. A page has at most one legend, for what the marks cannot say themselves (usually what the colours mean); no mini legends inside rows, cards or components. A key beside each indicator makes the eye travel and hold the mapp

data-display-and-selection