Data View

The NgStarter Angular Data View component lets you build AI-friendly data grids for operational records that users need to inspect, sort, filter, select, paginate, refresh, and act on. Use it for Angular admin screens, CRM and ERP tables, users, orders, invoices, logs, tasks, assets, and server-driven datasets where the table is the main interactive work surface.

Data View is an operational data grid built with columnDefs and either local data or a server-side datasource. It supports sorting, search and filter state, pagination, row selection, loading states, empty states, column resizing, column visibility, column order, pinned or sticky columns, custom cell renderers, refresh, snapshots, and an optional action bar.

Use Data View when users work with records, column state, selections, server loading, or saved table views. Use the simpler Table component for small static tables or read-only tabular content that does not need row selection, column operations, pagination, server loading, or custom cell behavior.

The NgStarter Angular Data View API documents the inputs, outputs, configuration providers, directives, and TypeScript interfaces used to build sortable, filterable, selectable, paginated, and server-driven Angular data grids.

Import Data View from @ngstarter-ui/components/data-view. Configure columns with DataViewColumnDef, pass local records through data, or use DataViewDatasource with rowModelType="serverSide" for backend paging, sorting, and filtering.

Data View Inputs

Prop	Type	Default
columnDefs Column definitions that describe visible fields, headers, sizing, sorting, pinning, and renderers.	`DataViewColumnDef[]`	`[]`
defaultColDef Default column options merged into each column definition.	`Partial<DataViewColumnDef>`	`{}`
data Client-side records rendered by the grid.	`T[]`	`[]`
datasource Server-side datasource used when rowModelType is serverSide.	`DataViewDatasource \| null`	`null`
rowModelType Controls whether Data View reads all rows locally or requests pages from a datasource.	`'clientSide' \| 'serverSide'`	`'clientSide'`
withSelection Shows the selection column and enables row selection events.	`boolean`	`false`
rowSelection Selection mode for row checkboxes.	`'single' \| 'multiple'`	`'multiple'`
withPagination Shows the paginator and slices client-side rows or requests server-side pages.	`boolean`	`false`
paginator External paginator instance that can drive the grid instead of the internal paginator.	`Paginator \| null`	`null`
pageSize Current page size. This is a model input that can be two-way bound.	`number`	`10`
pageIndex Current page index. This is a model input that can be two-way bound.	`number`	`0`
pageSizeOptions Page size choices shown in the paginator.	`number[]`	`[5, 10, 20]`
showFirstLastButtons Shows first and last page buttons in the paginator.	`boolean`	`false`
paginatorAriaLabel Accessible label for the paginator.	`string`	`''`
search Search text used for client-side filtering or sent to the server-side datasource.	`string`	`''`
loading Forces the loading state while external data is being fetched.	`boolean`	`false`
cellRenderers Lazy component renderers used by columns with a matching cellRenderer key.	`DataViewCellRendererDef[]`	`[]`
withColumnSettings Enables the column settings workflow for visibility, order, and pinning.	`boolean`	`false`
snapshot Initial column state for restored visibility, width, and pinned columns.	`DataViewState[] \| null`	`null`
rowHeight Virtual row height in pixels.	`number`	`50`
headerHeight Header row height in pixels.	`number`	`50`
bufferRows Extra virtual rows rendered above and below the visible viewport.	`number`	`10`
selectionWidth Width of the selection column in pixels.	`number`	`52`
minColumnWidth Minimum width used when resizing columns.	`number`	`50`
autoHeight Lets the grid grow with its rendered rows instead of using a fixed-height body.	`boolean`	`false`
stickyHeader Keeps the header visible when the grid body scrolls.	`boolean`	`true`
bodyScroll Enables body scrolling behavior for the data area.	`boolean`	`false`
embedded Uses the embedded visual style for grids placed inside cards, panels, or composed surfaces.	`boolean`	`false`
highlightHeader Adds highlighted header styling.	`boolean`	`false`
hoverRows Enables row hover styling.	`boolean`	`false`
emptyIcon / emptyText Default empty state icon and message for no-data results.	`string`	`document-search / There are no data to display`
emptyFilterResultsIcon / emptyFilterResultsText Default empty state icon and message for filtered results.	`string`	`search-info / No data matching the filter "{{ search }}"`

Outputs

Event	Payload	When
`rowSelectionChanged` Emits when a row checkbox changes.	`DataViewRowSelectionEvent<T>`	Row select or unselect
`selectionChanged` Emits the current selected rows after selection changes.	`T[]`	Selection updates
`allRowsSelectionChanged` Emits when the select-all checkbox changes.	`boolean`	Select all or clear all
`sortChange` Emits active column and direction for sorting.	`Sort`	Sort changes
`loadEnd` Emits after the initial client-side sync or server-side datasource response completes.	`void`	Initial load completes
`refreshEnd` Emits after a refresh cycle completes.	`void`	Refresh completes

Column Definition

Prop	Type	Default
name Human-readable column header.	`string`	`-`
field Record field path used for cell values, sorting, and state.	`string`	`-`
cellRenderer Renderer key matched with a DataViewCellRendererDef.	`string`	`-`
visible Controls whether the column is displayed.	`boolean`	`true`
width Fixed column width. Numeric strings are normalized to pixels.	`string`	`-`
flex Flexible column sizing weight when width is not fixed.	`number`	`1`
type Optional semantic type for column-specific behavior.	`string`	`-`
valueGetter Transforms the cell value before sorting or rendering.	`(value: any) => any`	`-`
pinned Pins the column to the start or end pinned area.	`boolean`	`false`
pinAlign Pinned column side.	`'start' \| 'end' \| undefined`	`'start' when pinned`
sortable Enables sorting for the column.	`boolean`	`false`
resizable Enables drag resizing for the column.	`boolean`	`false`
withColumnSettings Allows the column to participate in column settings.	`boolean`	`-`
minWidth / maxWidth Column resize constraints.	`string \| number`	`-`
params Extra renderer or column metadata.	`Record<string, any>`	`{}`

Server-side Datasource

API	Type	Notes
`DataViewDatasource.getItems(params)` Called by Data View whenever server-side rows need to be loaded.	`(params: DataViewGetRowsParams) => void`	Required for serverSide
`startRow / endRow` Absolute row range requested for the current page.	`number`	Derived from page and pageSize
`page / pageSize` Current page index and page size.	`number`	Derived from paginator state
`sortModel` Current sort columns and directions.	`{ colId: string; sort: 'asc' \| 'desc' \| '' }[]`	[]
`filterModel` Current search/filter value.	`string`	''
`successCallback(rowsThisBlock, lastRow?)` Pass loaded rows and optional total row count back to Data View.	`(rowsThisBlock: any[], lastRow?: number) => void`	Call on success
`failCallback()` Ends the current loading cycle when a request fails.	`() => void`	Call on failure

Public API and Templates

API	Type	Usage
`api.search(value)` Applies a search value to the underlying data source.	`(value: string) => void`	Template reference API
`api.selectAll() / api.unselectAll()` Selects or clears all rendered rows.	`() => void`	Template reference API
`api.refresh()` Triggers a client-side or server-side refresh cycle.	`() => void`	Template reference API
`api.getSnapshot()` Returns current column visibility, width, and pinning state.	`() => DataViewState[]`	Persist user grid state
`getSnapshot() / applyState(state)` Component instance methods for saving and restoring column state.	`DataViewState[]`	Use through a component reference
`ngsDataViewEmptyData` Template directive for a custom no-data empty state.	`TemplateRef`	Projected template
`ngsDataViewEmptyFilterResults` Template directive for a custom no-results empty state.	`TemplateRef`	Projected template
`ngsDataViewActionBar` Template directive for per-row actions in the pinned action area.	`TemplateRef`	Projected template
`ngs-data-view-action-bar` Action bar component with force-visible and width controls.	`DataViewActionBar`	Projected action surface

Global Configuration

Use provideDataView(config) to set defaults for Data View instances in an Angular app. Component inputs override provider defaults for a specific grid.

Config	Type	Default
`embedded` Default embedded style.	`boolean`	`false`
`rowHeight / headerHeight` Default row and header heights.	`number`	`50`
`bufferRows` Default virtual render buffer.	`number`	`10`
`pageSizeOptions` Default paginator page size options.	`number[]`	`[5, 10, 20]`
`pageSize` Default page size.	`number`	`10`
`rowSelection` Default row selection mode.	`'single' \| 'multiple'`	`'multiple'`
`selectionWidth` Default selection column width.	`number`	`52`
`stickyHeader` Default sticky header behavior.	`boolean`	`true`
`withPagination` Default pagination behavior.	`boolean`	`false`
`showFirstLastButtons` Default paginator first and last buttons.	`boolean`	`false`
`minColumnWidth` Default resize minimum column width.	`number`	`50`
`defaultColDef` Default column definition merged into every grid column.	`Partial<DataViewColumnDef>`	`{}`
`autoHeight` Default auto-height behavior.	`boolean`	`false`

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates