Standard result count for Toolbar and FilterToolbar strips
Tags: component toolbar data
ToolbarCount renders a list's result count in the one wording every strip uses. It is usually passed as the count prop on Toolbar or FilterToolbar rather than rendered directly. The text comes from resultCountText(), which is also exported for use outside a strip.
| Situation | Text |
|---|---|
| Server-paged, total spans pages | Showing 1–50 of 7,289 homes |
Locally filtered (of = unfiltered) |
12 of 40 homes |
| Otherwise | 40 homes / 1 home |
| Zero matches | empty, or "No homes found" |
total undefined (first load) |
nothing |
Import
<script>
import { ToolbarCount, resultCountText } from '@classic-homes/theme-svelte';
</script>Basic Usage
<Toolbar
label="Lot tools"
count={{ total: lotsQ.isPending ? undefined : pagination.total, noun: 'lot', page: pagination }}
/>
<ToolbarCount total={visible.length} of={rows.length} noun="walk" note="3 overdue" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
total |
number | undefined | null |
required | Matching rows; undefined while the first load runs |
noun |
string |
required | Singular noun, e.g. home |
plural |
string |
`${noun}s` |
Plural when it isn't noun + s, e.g. entries |
page |
{ page: number; limit: number } |
- | Server paging; shows the range when total spans pages |
of |
number |
- | Unfiltered size for locally filtered lists |
empty |
string |
No <plural> found |
Zero-match text |
note |
string | false | null |
- | Trailing remark after " · "; falsy hides it |
Accessibility
- Renders
role="status", so assistive tech announces the new count politely after a search or filter change. - Inherits the strip's white text (12.7:1 on the toolbar).