Tables
Rows of one kind of thing, to scan, sort, narrow down and act on. In Nitti Intelligence most of the work starts in one. There is one table, DataTable: it is described by its columns, a column by its kind, and everything else (the look, the heights, the toolbar, the motion, what waiting looks like) is the same in every table.
In the product
The page is the table. It takes the room under the top bar and scrolls inside itself, so the header and the title column are always in view. Try it: sort, drag a column's name to move it and its edge to resize it, filter, tick a few rows, open one.
The table
Rows on the page with a hairline under each: no frame, no lines between columns, no stripes. The header is the quietest thing in it. One line per cell, so rows keep one height and a column of figures stays a column.
Kinds of column
A column is one of thirteen kinds, and the kind decides how the cell is drawn, which way it aligns, how wide it starts, how it sorts and how it is filtered. One call per column from lib/data-table; cells are not styled by hand. An empty value is a muted dash in every kind.
| Kind | For | How it is drawn |
|---|---|---|
| title | What the row is | Medium weight. It is the row's link, and it stays in view when the table scrolls sideways. One per table, first. |
| text | Words | One line, cut with an ellipsis; the whole of it on hover. |
| number | An amount | Tabular figures, right-aligned, with the unit in its format. The header aligns right with it. |
| date | A day | Short and unambiguous: 14 Sep 2026. Sorts by time. |
| boolean | Yes or no | A check, or a dash. |
| status | A state, one of a known few | The word with its dot (Status), never a filled pill. Sorts in the order of the states, not the alphabet. |
| select | One of a known few, with no judgement in it | A quiet chip. |
| tags | Several of a known few (a multi-select) | As many whole chips as fit, then +3 for the rest, which are named on hover. Never clipped mid-chip. Options with a tone carry its dot. |
| person | Who | Initials and a name. |
| party | A party of the Riksdag | Its mark and its name, from the shared list, so it is the same in every table and both products. Sorts in the list's order; filters by party. |
| rating | One to five | Five marks in the text's own colour, not yellow: what is filled is the rating, and halves are drawn as halves. |
| progress | A share of a whole, 0 to 100 | A thin line that fills to its value, in the accent's tone for lines, with the figure beside it. |
| link | Somewhere else | Its domain, opening in a new tab. |
Parties, several values, ratings and shares
The kinds that carry more than words, in one table. A party is its shared mark and name. Several values are chips, with a dot when the value has a tone. A rating is five quiet marks. A share is a line that fills, always with its figure. Filter by party or by rating; sort the share.
Parties
The eight parties of the Riksdag are part of the system: one name, one code, one mark and one colour each (lib/parties), so a party looks the same in a table, a chart and a person's page, in both products. Give a party as anything a source writes (a code, the full name, an old name such as Fp) and it resolves to the same one. The marks are the party's letters on its own colour, drawn to sit together at 20 px, and not the parties' own logos: eight tiles of one kind scan faster than eight emblems in eight styles; the colour beside each name is the party as data, for a dot, a line or a bar. What is not one of the eight gets a quiet tile.
- Centerpartiet--party-c
- Kristdemokraterna--party-kd
- Liberalerna--party-l
- Miljöpartiet--party-mp
- Moderaterna--party-m
- Socialdemokraterna--party-s
- Sverigedemokraterna--party-sd
- Vänsterpartiet--party-v
What a table does
The same in every table, and each thing has one place.
| How | Where | |
|---|---|---|
| Sort | Click a column's name: once ascending, again descending, again to stop. Hold Shift to sort by a second column. Empty values are last either way round. | The name |
| Move a column | Drag its name. The header lifts and follows the pointer, the columns between glide aside and a well shows where it would stand: the same pick-up as a widget and a document block. On touch, hold first. | The name, or Move left and Move right in its menu |
| Resize a column | Drag its right edge; a line in the accent shows it is held. Double-click to put it back. | The edge, or the arrow keys on it |
| Keep in view, hide | In the column's menu, which shows when the header is pointed at and is always there on touch. | The menu; hidden columns come back under View |
| Search and filter | One row above the table. A column that is narrowed becomes a chip: the chip changes it and takes it away. Everything applies at once; there is no Apply. | The toolbar |
| Select | A checkbox on the row pointed at; once one is ticked, on every row. Shift takes the rows between. What can be done with them comes up from the bottom, with a true count. | The checkbox |
| Open a row | The title is a real link, so it opens in a new tab and takes the keyboard; a click anywhere else on the row follows it. Up and down move between rows. | The row |
| Rows or cards | A table that says how its rows look as cards gets a switch beside View. Cards are the same rows: the same search, filters, order and pages. Sort moves into the toolbar, since cards have no headers, and View chooses what a card shows, kept apart from which columns the table shows. See People. | The switch beside View |
| View | Which columns show, comfortable (44 px) or compact (36 px) rows, how many on a page, and Reset. | View |
Rows from a server
In the product the server searches, filters, sorts and pages. The table holds the same state and reports each change. While the answer is on its way the rows that are there stay in place and stay usable, and a line under the header says more are coming: nothing dims, nothing jumps. Here the answer takes 0.7 s.
Waiting, empty, failed
The first rows on their way are bars of the row's own height in the columns' own widths, so nothing shifts when they arrive. No rows at all says why and what will change it; a filter that leaves none offers to clear itself; a failure says what happened and offers to try again.