ng-bootstrap HomeBasicAlertFormsFloating labelsInput groupMulti-rangeRangePhone inputSelectRadioCheckboxDatepickerTimepickerDateTime pickerContainersGridCardTab controlRatingBadgeBreadcrumbButton groupButton typeCalendarMarqueeList groupTreeviewTree selectTableClosePaginationPlaceholderSpinnerColor pickerProgress barFor directiveIconOverlaysModalsOffcanvasTooltipToastPopoverDropdownTypeaheadContext menuShellDropdown menu (WC)AdvancedCopyCode snippetPipesTrust-htmlSplit-stringLinifySlugifyWord-countFont-colorHas-propertyToggle buttonsSticky footerAutofocusTrackByAsync HostBindingInstance ofIs interfaceResizableOrdinal numbersMarkdownParallaxPriority navigationScrollspyFile uploadSignature padLazy-loading componentsUser-agentNavigation lockNavigation lock (master/detail)EnterpriseCarouselSchedulerTimelineDockRibbonTile managerDatatablesFile managerQuery builderOTP inputNavbarSplitterAccordionChartsAnimationsSlide up/downFade in/outColor transitionAdditional samplesCollapseFocusTrapDrag-dropTree-select drag-dropQR-code viewerStepperThemingAnchor scrollingSection 1Section 2Section 3Section 4Section 522.15.0

Datatable

Server-side paginated table with sortable headers, optional virtual scrolling, and single / multiple row selection. The component is fetch-driven — provide a BsDatatableFetch callback that resolves a PaginationResponse, and the table handles paging UI, sort state, and (optionally) the virtual viewport.

Basic usage

Sortable columns

Row selection

Virtual scrolling — lazy windowed fetch

With [virtualScroll] + [fetch] the table fetches only the pages whose rows are in (or near) the viewport — against the same real, server-paged artist endpoint as the basic section. Scroll and watch the fetch log below: it never drains the whole result set up front; placeholder rows hold the scroll position until each window arrives. Sorting or changing settings drops the cached windows and refetches the visible range.

Pages fetched: (0 so far)

Tree mode — expandable rows

Click a chevron to expand a row. Children load lazily on first expand and stay cached for subsequent collapse/expand cycles. Placeholder rows reserve viewport space while the fetch is in flight so the scrollbar stays accurate. Cascading selection: checking a parent selects all currently-loaded descendants; partially-selected parents render an indeterminate state.