Table row
canon
Row anatomy of a listing table: frozen checkbox and identity cells, then value cells at one height.
There is no per-row action column — the only hover affordance is the checkbox.
Used in 22 files · 13 areas · 79× — components/ai-employees, components/drawer, components/sales-reports, components/segment, pages/AiZamestnanciPage, pages/AssetDetailPage …
Default
export const Default = () => (
<Wrap
head={
<>
<th className="col-ck" />
<Th>Firma</Th>
<Th>Město</Th>
<Th>Objem</Th>
</>
}
>
<tr className="sgb-rowclick">
<Ck />
<td>
<span className="cell-id">
<EntityMark kind="company" name="Brno Tech a.s." size="inline" />
<span className="nm">Brno Tech a.s.</span>
</span>
</td>
<td>
<span className="cell-v">Brno</span>
</td>
<td>
<span className="cell-mono">1 250 000</span>
</td>
</tr>
</Wrap>
);
Variants
| Identita | Hodnota | Číslo | Odkaz | Ano/ne | Bonita |
|---|
| BTBrno Tech a.s. | Brno | 1 250 000 | | ano | A |
| Osoba | Role |
|---|
| JNJosef Novák | Majitel firmy |
export const Variants = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
<Labeled text="cell kinds — identity (avatar + name, frozen), plain value, number (tabular figures, still the sans face), link, boolean and the bonita pill">
<Wrap
head={
<>
<Th>Identita</Th>
<Th>Hodnota</Th>
<Th>Číslo</Th>
<Th>Odkaz</Th>
<Th>Ano/ne</Th>
<Th>Bonita</Th>
</>
}
>
<tr className="sgb-rowclick">
<td>
<span className="cell-id">
<EntityMark kind="company" name="Brno Tech a.s." size="inline" />
<span className="nm">Brno Tech a.s.</span>
</span>
</td>
<td>
<span className="cell-v">Brno</span>
</td>
<td>
<span className="cell-mono">1 250 000</span>
</td>
<td>
<button type="button" className="cell-link">
brnotech.cz
</button>
</td>
<td>
<span className="cell-bool-on">ano</span>
</td>
<td>
<span className="grade a">A</span>
</td>
</tr>
</Wrap>
</Labeled>
<Labeled text="round identity — a person's row uses the circular mark, a company's a square one">
<Wrap
head={
<>
<Th>Osoba</Th>
<Th>Role</Th>
</>
}
>
<tr className="sgb-rowclick">
<td>
<span className="cell-id">
<EntityMark kind="person" name="Josef Novák" size="inline" />
<span className="nm">Josef Novák</span>
</span>
</td>
<td>
<span className="cell-v">Majitel firmy</span>
</td>
</tr>
</Wrap>
</Labeled>
</div>
);
States
rest and selected — the checkbox is revealed on hover and stays once the row is picked; the selected row keeps its own fill | Firma | Město |
|---|
| MIModřice Invest a spol., komanditní společnost pro správu nemovitostí | Modřice |
loading — skeleton lines keep the column widths so nothing jumps when the data lands export const States = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
<Labeled text="rest and selected — the checkbox is revealed on hover and stays once the row is picked; the selected row keeps its own fill">
<Wrap
head={
<>
<th className="col-ck" />
<Th>Firma</Th>
<Th>Město</Th>
</>
}
>
<tr className="sgb-rowclick">
<Ck />
<td>
<span className="cell-id">
<EntityMark kind="company" name="Nevybraný řádek" size="inline" />
<span className="nm">Nevybraný řádek</span>
</span>
</td>
<td>
<span className="cell-v">Brno</span>
</td>
</tr>
<tr className="sgb-rowclick sel">
<Ck on />
<td>
<span className="cell-id">
<EntityMark kind="company" name="Vybraný řádek" size="inline" />
<span className="nm">Vybraný řádek</span>
</span>
</td>
<td>
<span className="cell-v">Praha</span>
</td>
</tr>
</Wrap>
</Labeled>
<Labeled text="long value — the identity cell is capped and clipped with an ellipsis; the full text is in the cell's title, so hovering shows it">
<div style={{ maxWidth: 420 }}>
<Wrap
head={
<>
<Th>Firma</Th>
<Th>Město</Th>
</>
}
>
<tr className="sgb-rowclick">
<td>
<span className="cell-id">
<EntityMark
kind="company"
name="Modřice Invest a spol., komanditní společnost pro správu nemovitostí"
size="inline"
/>
<span
className="nm"
title="Modřice Invest a spol., komanditní společnost pro správu nemovitostí"
>
Modřice Invest a spol., komanditní společnost pro správu nemovitostí
</span>
</span>
</td>
<td>
<span className="cell-v">Modřice</span>
</td>
</tr>
</Wrap>
</div>
</Labeled>
<Labeled text="loading — skeleton lines keep the column widths so nothing jumps when the data lands">
<Wrap
head={
<>
<Th>Firma</Th>
<Th>Město</Th>
<Th>Objem</Th>
</>
}
>
{[0, 1].map((i) => (
<tr key={i}>
<td>
<span className="cell-id">
<span className="sk-av square" />
<span className="sk sk-line" style={{ width: 120 }} />
</span>
</td>
<td>
<span className="sk sk-line" style={{ width: 72 }} />
</td>
<td>
<span className="sk sk-line" style={{ width: 80 }} />
</td>
</tr>
))}
</Wrap>
</Labeled>
</div>
);
Composition
export const Composition = () => (
<Wrap
head={
<>
<th className="col-ck" />
<Th>Firma</Th>
<Th>Město</Th>
<Th>Obchody</Th>
<Th>Objem</Th>
</>
}
>
{[
{ n: 'Brno Tech a.s.', c: 'Brno', d: '3', a: '1 250 000', on: false },
{ n: 'Atol Capital s.r.o.', c: 'Praha', d: '1', a: '480 000', on: true },
{ n: 'Modřice Invest', c: 'Modřice', d: '5', a: '2 100 000', on: false },
].map((r) => (
<tr key={r.n} className={'sgb-rowclick' + (r.on ? ' sel' : '')}>
<Ck on={r.on} />
<td>
<span className="cell-id">
<EntityMark kind="company" name={r.n} size="inline" />
<span className="nm">{r.n}</span>
</span>
</td>
<td>
<span className="cell-v">{r.c}</span>
</td>
<td>
<span className="cell-mono">{r.d}</span>
</td>
<td>
<span className="cell-mono">{r.a}</span>
</td>
</tr>
))}
</Wrap>
);