Table row

The row anatomy shared by every listing table: the frozen checkbox and identity cells on the left, then the value cells, all at one height (--row-h, 37px in this engine). It is not a component of its own — it is what the segment table renders per record.

There is no per-row action column. The only thing that appears on hover is the checkbox.

When to use

  • Inside a segment table. The row is the table's; a row outside it is not this pattern.

When not to use

  • As a stand-alone list row — that is Item list.
  • As a way to add row actions; the engine has no trailing slot and adding one forks the row.

Anatomy

  • tr.sgb-rowclick — hover fill, .sel for a picked row.
  • td.col-ck — the checkbox cell, frozen at the left edge.
  • Identity cell — .cell-id with the avatar (.av.circle for a person, .av.square for a company) and the name .nm, clipped at --sgb-id-w with the full text in title.
  • Value cells: .cell-v (plain), .cell-mono (tabular figures), .cell-link (accent, underline on hover), .cell-bool-on / .cell-bool-off, .grade (bonita pill).
  • Loading: the same cells with .sk.sk-line skeletons, so the column widths do not move when data lands.

Best practices

Do

  • Keep the identity cell to the record's name; the mark says what kind of record it is.
  • Use .cell-mono for anything the eye compares vertically (amounts, counts).
  • Give a clipped cell a title so the full value is one hover away.
  • Let the row be opened by the screen (rowHref or the row click), not by a link inside a cell — unless the link genuinely goes elsewhere.

Don't

  • Add a trailing actions cell.
  • Mix row heights inside one table.
  • Bold a cell to make it stand out; hierarchy in a table comes from the column order.

Content

  • Values as the user would read them; dates follow the year convention.
  • A boolean reads as a word (ano / ne), not as a symbol.
  • segment-table — the engine this row belongs to.
  • item-list — the row pattern for scanning listings.
  • Stories: components--table-row--default, --variants, --states, --composition.

Source: docs/table/table-row.usage.md · GitLab