Tables

The table is the layout you will meet most often: one record per row, one field per column, with a header row across the top. This chapter covers everything that is specific to tables — how rows behave, how sorting works, how to change column widths and order, what happens when a table is wider than the screen, and the special "drag to reorder" table.

For the parts of a list screen that are the same in every layout — the title, the filter bar, the page-size button, the pagination and the export menu — see List Screens.

What A Table Is

A table shows a set of records that your administrator decided belong together, and a set of columns chosen from the fields of those records. Each row is one record. Each column is one field, or a value calculated from a field.

Reading left to right, a typical table row contains:

The narrow control cells on the left — two on a plain table, three when the table is drag-orderable — are always there, drawn faintly at rest and brightening when you move the mouse over the row. They disappear entirely on public pages, and on screens whose data comes from a custom source set up by your administrator — on those screens there is no selection and no row menu.

Why It Matters

Tables are dense. They are the right layout when you need to compare many records against each other, scan a column for outliers, sort by a date or an amount, or pick out a handful of records to act on. Cards and boards are easier on the eye; the table is the one that lets you answer "which of these 200 orders is the oldest unpaid one".

Most of the controls in this chapter change only what you see. Two of them do not: dragging rows in a drag-orderable table changes stored data for everybody, and saving your column and sort choices into a shared saved view changes what colleagues see. Those are called out where they appear.

Rows: What Clicking Does

This is the single most common source of confusion in a table, so it is worth being precise.

• Clicking the empty background of a row does nothing. The row does not open. There is no "click anywhere to open" behavior.
• Clicking the value in the record's main column opens that record in a pop-up window. That column — usually the name, number or title of the record — is rendered as a link. Which column plays that role is decided by your administrator.
• Hovering anywhere over the row reveals a small button in the top-right corner of that main cell, labeled "Open", with a panel icon. It does the same thing as the link and is useful when the value itself is empty or very short.
• Clicking a link in any other cell opens that record, not the row's record. A cell that shows a related record — a customer on an order line, a project on a task — is a link to the related record. This is a genuinely different destination.
• Right-clicking anywhere on the row opens the row's menu, and so does left-clicking the chevron cell on the left. See Selecting Records And Bulk Actions.

Example You are looking at an Order Lines table with the columns Line no., Product, Quantity and Order. Clicking L-4471 in the Line no. column opens the order line. Clicking Steel bracket 40mm in the Product column opens the product record instead — a different screen about a different thing. If you meant the line, use the Line no. value or the small "Open" button that appears in that cell when you hover over the row.

Holding Ctrl, Shift, Alt or Cmd while clicking a link opens it as a full page or in a new browser tab instead of a pop-up. That is useful when you want to keep two records side by side.

Sorting

Clicking A Header

Every column that can be sorted shows a small sort icon on the right-hand side of its header cell.

1. Move the mouse over the header. The header tints slightly.
2. Click the sort icon — the small double chevron. The list reloads, sorted by that column, smallest/earliest/A-first.
3. Click the same icon again to reverse the direction.

Click the icon, not the header text. The whole header cell changes color on hover and the mouse pointer turns into a hand, which makes it look as though the whole cell is clickable, but only the icon acts. Clicking the caption does nothing.

Reading The Indicator

The header cell of a sorted column is also tinted, so you can spot the active sort at a glance even on a wide table.

Next to the arrow of a sorted column there is a small circled cross, titled "Remove sorting". It removes the sort from that one column and leaves the rest of the list as it is.

One Column At A Time

Clicking a second column's sort icon replaces the sort — it does not add a second level. You cannot build a two-level sort ("by customer, then by date") from the table header.

A small superscript number sits next to the arrow of every sorted column, showing its place in the sort order — so a single sorted column shows a 1. If a saved view was set up with several sort levels, those numbers tell you which column is applied first. You can remove one level with the circled cross, but you cannot add one back.

If you need a permanent multi-level sort, ask your administrator to build it into a saved view.

Sorting Does Not Send You Back To Page 1

If you are on page 7 and you sort by a different column, you stay on page 7 — of a completely different ordering. The rows will look unrelated to what you were just reading. When you re-sort, go back to page 1 deliberately.

Columns You Cannot Sort

Some columns have no sort icon at all. The reasons, in plain terms:

• Fields that can hold several values at once. A Team members column that lists three people, or a Tags-style field holding several linked records, has no single value to sort by, so sorting is not offered.
• Columns computed from another column. When a field is split into several display columns, the extra columns are produced while the page is being drawn, not stored anywhere, so the list cannot be ordered by them.
• Count columns produced by merging. The "how many" column that appears when records are merged together is calculated per group and cannot be sorted.
• Columns your administrator switched off for sorting. Sorting is available on every field by default, but it can be turned off field by field — usually on fields where sorting would be expensive or meaningless.

Example On a Projects table you can sort by Deadline, Budget and Client, because each project has exactly one of each. You cannot sort by Assigned to if a project can have several people assigned. To find projects by person, add a filter on Assigned to instead — see Filtering Your Data.

Where a column can be filtered, a small funnel icon appears in its header beside the sort icon. It is a shortcut for adding a filter on that column; that is also covered in the filtering chapter.

Column Width

Changing A Width

Move the mouse to the right-hand edge of a column header. The pointer changes to a horizontal resize arrow and a thin vertical strip lights up. Press the mouse button there and drag sideways. Release when the column is the width you want.

• A column cannot be dragged narrower than roughly 60 pixels.
• The first time you resize any column in a table, the whole table stops stretching to fill the window and becomes a fixed set of pixel widths. From then on the table can be wider than its box, and a horizontal scrollbar appears at the bottom of the table.
• Resizing works with a mouse only. There is no touch equivalent, so it cannot be done on a tablet or phone.

Widths Are Remembered In This Browser Only

Your column widths are stored by the browser you are using, on the computer you are using. That has consequences worth knowing:

• Widths survive closing the tab, closing the browser and logging out and back in — on that machine.
• Widths do not follow you to another computer, to a different browser, or to a private/incognito window. There you get the default widths again.
• Colleagues never see your widths, and you never see theirs.
• Clearing your browser's site data for the application also clears the widths.

There is no "reset column widths" button. If you have dragged a table into a shape you dislike, the practical options are to drag the columns back by hand, or to clear the browser's stored site data for the application (which also resets your theme choice and other browser-stored preferences).

Example A colleague tells you the invoice table "looks broken — everything is squashed and there is a scrollbar". On your machine it looks fine. Nothing is broken and nothing needs an administrator: at some point they widened a column on that screen, and their browser has remembered it ever since. They can drag the columns back, or clear the site data for the application.

Column Order And Which Columns Are Shown

Choosing And Ordering Columns

Both which columns appear and the order they appear in are changed in the same place: the column picker, opened from the columns button in the filter bar above the table — its tooltip reads "Columns". It is the supported way to rearrange a table's columns, and it is covered in full in Columns, Grouping, Merging And Calculations.

The Grab Handle On The Header

When you hover over a column header, a small faint grip appears at its left edge (the resize strip is at the right edge — they are different controls). Dragging that grip moves the header cell around, but the data underneath does not move with it, and the arrangement is discarded the next time the list redraws — after a sort, a page change, a filter or a refresh. Treat the header grip as unreliable and use the column picker, which is the supported way to change column order.

Where The Order Is Kept — And How That Differs From Widths

This is the contrast people notice, so it is worth stating twice:

In other words: widths stick to your machine, column choices stick to the link. If you want a column arrangement to be waiting for you tomorrow, and on your laptop as well, save it as a saved view and mark it as your default — see Saved Views And Queries.

Switching to a different saved view discards ad-hoc column choices along with everything else you changed on screen.

Wide Tables, Pop-Up Windows And Phones

Scrolling Sideways

When a table has more columns than fit, the table box grows its own horizontal scrollbar. The page itself does not move sideways — the navigation, the heading and the filter bar stay where they are while you scroll the data.

Nothing inside the table is pinned:

• Scrolling right moves the checkbox and menu cells out of view along with everything else. Scroll back left to reach them.
• Scrolling down a long page moves the header row out of view. There is no frozen header, so on a page of 100 or 250 rows you can easily lose track of which column is which. Two practical answers: reduce the page size, or hide the columns you are not using so the important ones stay near the left.

Inside A Pop-Up Window

A table shown inside a pop-up window behaves the same, with one difference at the bottom: the numbered page links are hidden, so you move between pages with the previous/next arrows or the page selector button. Everything else — sorting, resizing, selection, the row menu — works normally.

On A Phone Or Narrow Window

The table stays a table. It does not collapse into stacked cards. You scroll it sideways with a finger, as you would a wide web page. Below roughly the width of a tablet, the numbered page links are hidden here too, leaving the arrows and the page selector.

Because column resizing needs a mouse, you cannot tune a table's layout from a phone. Rows can still be dragged on a touch screen in a drag-orderable table.

Selecting Rows And The Right-Click Menu

The table is the data layout built around row selection — the files list works the same way, and the card, board and calendar layouts have no checkboxes at all. Clicking the small square at the left of a row selects it: the square fills in and the row is tinted. The square in the header covers every row on the current page. Right-clicking a row, or clicking the chevron cell, opens that record's menu.

There is no "3 selected" counter and no toolbar that appears — a checked box and a tinted row are the only signs that anything is selected, and the selection is lost whenever the list reloads. All of this, including running an action over many records at once, is covered in Selecting Records And Bulk Actions.

Cells: How Values Are Shown

A cell shows the field's display form, which depends on the kind of field. The catalog of field kinds lives in The Fields You Will Meet; what follows is what is specific to seeing them in a table.

Plain Values

Text, numbers, amounts and dates appear as text, formatted the way the field is configured. Yes/no fields appear as a word — "Yes" or "No" in an English interface — rather than as a checkbox.

Linked Records

A cell that points at another record shows that record's title as a link. If the linked record has a color of its own — a status, a category, a priority — it is drawn as a small colored chip instead of plain text, so you can scan a status column by color.

If the linked record has been deleted, the cell shows a marker with the record's number and the word (deleted) rather than a broken link.

Fields With Several Values

A field that holds several linked records shows all of them, one after another, each its own link. By default they are separated by a line break, so the cell becomes several lines tall; your administrator can change the separator per field or for the whole application. These columns cannot be sorted.

Empty Values

An empty cell is normally blank. Your administrator can give a field a "no value" placeholder — a dash, the word none, whatever they choose — which is then shown wherever that field is empty. If you see different placeholder styles in different columns, that is why.

Grouped tables use (none) as the heading for the group of records where the grouped field is empty.

Long Text

Cell values are not truncated. Only the column header is shortened with an ellipsis when it does not fit. A cell containing a long note or description wraps onto as many lines as it needs, and the whole row becomes that tall. One free-text column can therefore turn a compact table into a list of paragraph blocks.

If that happens, either narrow that column (which does not help much, since the text wraps more) or hide it and open records individually when you need to read the text.

Images And Thumbnails

An image field configured as a thumbnail is drawn as a small picture, limited to about 60 pixels tall so rows stay a sensible height. Your administrator can instead set an explicit width for such a column; the column then opens at that width and the height cap no longer applies, so a tall image can make its rows tall.

Non-image files appear as a link or a file name rather than a preview. Previews and downloads are covered in Cards, Lists And File Lists.

The Drag-Orderable Table

Some screens use a variant of the table whose whole purpose is manual ordering. You can recognize it immediately: a tinted strip sits above the table saying "Drag items around to change their order, changes are saved automatically.", and every row has an extra grip cell at the far left.

How To Reorder

1. Press the mouse (or your finger) on the grip at the left of a row.
2. Drag the row up or down. The other rows move aside to show where it will land.
3. Release.

A message strip confirms "Order saved." in the bottom-right corner of the screen. That is the whole interaction — there is no Save button to press afterwards.

What Actually Happens

• The new order is saved immediately, and it is saved for everyone. Row order here is stored data on the records themselves, not a personal preference. The next colleague who opens the screen sees the order you just made.
• There is no undo. If you drop a row in the wrong place, the only correction is to drag it back. Nothing warns you first and nothing asks for confirmation.
• The table does not redraw after a drop. The rows stay exactly where you left them. This is deliberate — it stops the list jumping around while you are arranging it — but it means the screen is showing your arrangement rather than a fresh read from the server. Use the refresh button in the filter bar if you want to confirm what was stored.

When To Use It

Drag ordering is for lists where the sequence is the meaning, and no field could express it:

• a priority list where "above" means "do this first";
• the items of a navigation menu, a printed price list or a product catalog page;
• the steps of a procedure or checklist;
• the display order of categories, statuses or options that will appear in a drop-down elsewhere.

Manual Order And Column Sorting Do Not Mix

The manual sequence is a value carried by the records themselves. The screen shows rows in that order only for as long as nothing else is sorting them.

If you click a column's sort icon on a drag-orderable table, the rows are re-arranged by that column — but a drag still writes the manual order. So you would be looking at rows sorted by, say, Name, and rewriting the manual sequence to match the accidental arrangement in front of you. The next person who opens the screen without that sort sees a shuffled list.

Decide which one you are doing. If you are arranging by hand, clear any column sorting first (the circled cross in the sorted header). If you want to look at the data sorted by a column, do not drag rows while you are there.

There is a second, quieter trap: dragging renumbers only the rows on the page you are on, starting from that page's position in the whole list. Reordering across a page boundary — "move this item from page 2 to page 1" — is not something dragging can do. For long ordered lists, raise the page size so the whole list is on one page before you start rearranging.

Example Your application has a Homepage banners screen as a drag-orderable table, and the site shows banners in this order. You want the Christmas banner first. Set the page size high enough that all 14 banners are on one page, make sure no column is sorted, drag the Christmas row to the top, and wait for "Order saved.". The website changes for everyone. If you later drag a row while the table happens to be sorted by Created on, you will silently overwrite the whole sequence.

Worked Example: Tuning An Order Table

Petra in back office opens Orders every morning. The table has 18 columns, most of which she never reads, and the Customer column is too narrow to show full company names. She wants a working layout.

1. Hide what she does not need. She opens the column picker from the columns button above the table and drags VAT number, Delivery note no. and Internal reference from "Active" to "Available", then presses Save. The table reloads with 15 columns.
2. Reorder two columns. In the same picker she drags Customer to the top of the "Active" list and Total to second place, so the two things she scans are next to each other on the left.
3. Sort by date. Back on the table, she clicks the sort icon in the Ordered on header, then clicks it again so the arrow points down — newest orders first. She checks she is on page 1.
4. Widen the customer column. She drags the right edge of the Customer header until full company names fit. The table stops stretching to the window and grows a horizontal scrollbar, which is expected.

What is still there tomorrow morning, on the same computer:

• The wider Customer column — yes. Widths live in this browser.
• The three hidden columns, the new column order, and the date sort — no. Those live in the current screen state, and opening Orders fresh from the menu starts from the screen's normal configuration.

To keep the whole arrangement, Petra does the tuning once more and then uses the bookmark button in the filter bar to save it as a saved view called Newest orders — my columns, and clicks the star next to the view switcher to make it her default for that screen. From then on the screen opens with her columns and her sort, on any computer she logs in from. The column width still has to be re-dragged on each new machine. See Saved Views And Queries.

If she wants her colleagues to get the same layout without each of them doing this, that is a request for an administrator: a shared saved view, or a change to the screen's normal columns.

Tips And Gotchas

• Lists never refresh themselves. A table shows the data as of the moment it was drawn. Records a colleague changed a minute ago will not appear until you use the refresh button in the filter bar, change page, or re-sort.
• Click the sort icon, not the header text. The header looks clickable everywhere; only the icon acts.
• Re-sorting does not return you to page 1. Check the page indicator after sorting.
• A second sort replaces the first. Multi-level sorting can only come from a saved view.
• Widths are per browser; column choices are per link. Neither is saved to your account on its own. Only a saved view makes an arrangement permanent.
• There is no reset for column widths — drag them back or clear the browser's site data.
• Nothing is frozen when you scroll. No sticky header, no frozen first column.
• Long text makes tall rows, because cell contents are never truncated.
• On a drag-orderable table, the order is real data. It is saved instantly, for everyone, with no confirmation and no undo.
• Grouped tables always open with every group expanded. You can collapse a group with the toggle in its heading, but the collapse is forgotten as soon as the list reloads — after a sort, a page change or a filter. Grouping itself is covered in Columns, Grouping, Merging And Calculations.
• The "Find on page..." box above the table only hides rows that are already displayed. It is not a search of your data. See Filtering Your Data.
• If a table has no checkbox column and no row menu at all, you are either on a public page or on a screen built on a custom data source. That is a property of the screen, not something you turned off.

What To Ask Your Administrator For

• A different set of default columns for a screen, in a different order, so nobody has to re-tune it.
• A shared saved view holding a column set and sort order the whole team should have.
• A multi-level sort built into a saved view ("by customer, then newest first").
• Sorting enabled on a column that has no sort icon, when the field genuinely holds one value.
• A shorter display value or a "no value" placeholder for a column that makes rows very tall.
• A thumbnail column, or a sensible fixed width for one that is too large.
• The drag-orderable table for a screen where sequence matters and there is currently no way to express it — or the plain table for a screen where people keep reordering rows by accident.
• Inline tags on a list, if you want the Tags column at the right-hand end of the rows.

Related Chapters

• List Screens
• Columns, Grouping, Merging And Calculations
• Selecting Records And Bulk Actions
• Filtering Your Data
• Saved Views And Queries