@styloviz/list-view

Market-ready list patterns: default, checklist, nested tree, virtualized, grouped, template cards, call history and infinite scrolling.

Part of the StyloViz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/list-view

Requires @angular/core and @angular/common >= 21. Self-contained — no other StyloViz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvListViewComponent } from '@styloviz/list-view';

@Component({
  standalone: true,
  imports: [SvListViewComponent],
  template: `
    <sv-list-view [items]="items" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | items | ListViewItem[] | [] | Items to render (label, meta, optional children/avatar/actions). | | mode | ListViewMode | 'default' | Preset pattern: default, checklist, nested, card, etc. | | variant | ListViewVariant | 'default' | Visual variant. | | density | ListViewDensity | 'comfortable' | Row density. | | selectionMode | ListViewSelectionMode | 'none' | Selection behaviour: none, single or multiple. | | checkable | boolean | false | Show checkboxes on rows. | | nested | boolean | false | Enable nested (tree) rows. | | virtualized | boolean | false | Virtualize long lists for performance. | | grouped | boolean | false | Group rows under section headers. | | searchable | boolean | false | Show a search box to filter items. | | stickyGroupHeaders | boolean | true | Keep group headers pinned while scrolling. | | infiniteScroll | boolean | false | Load more items as the user scrolls to the end. | | hasMore | boolean | false | Whether more items are available to load. | | loadingMore | boolean | false | Show a loading indicator while fetching more. | | viewportHeight | number | 360 | Viewport height (px) for the virtualized list. | | itemHeight | number | 68 | Estimated row height (px) for virtualization. | | overscan | number | 5 | Extra rows rendered above/below the viewport. | | searchPlaceholder | string | 'Search list items' | Placeholder for the search box. | | emptyMessage | string | 'No items match your filters.' | Message shown when no items match. | | customClass | string | '' | Extra CSS classes for the root. | | ariaLabel | string | 'List view' | Accessible label for the list. | | announceActions | boolean | true | Announce row actions to screen readers. | | showQuickActions | boolean | false | Show per-row quick actions on hover/focus. | | quickActions | ListViewQuickAction[] | [] | Per-row quick actions. | | bulkActions | ListViewBulkAction[] | [] | Bulk actions for checked rows. | | enableBulkHotkeys | boolean | false | Enable keyboard hotkeys for bulk actions. | | enableRovingFocus | boolean | true | Enable roving-tabindex keyboard navigation. |

Outputs

| Output | Type | Description | | --- | --- | --- | | itemClick | ListViewItemClickEvent | Emitted with the clicked item. | | checkChange | ListViewCheckChangeEvent | Emitted when a row's checkbox changes. | | loadMore | ListViewLoadMoreEvent | Emitted when more items should be loaded (infinite scroll). | | quickActionClick | ListViewQuickActionClickEvent | Emitted when a quick action is clicked. | | bulkActionClick | ListViewBulkActionClickEvent | Emitted when a bulk action is triggered. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/list-view

License

MIT