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.

Basic data view

Simple tabular data presentation with essential features.

Data view with selection

Allow users to select rows for further actions.

Data view with pagination

Navigate through large datasets with ease.

Embedded data view

Data view integrated into other components or containers.

Data view with sorting

Quickly sort columns to organize data.

Data view with resizable columns

Adjust column widths to suit user preferences.

Data view with column settings

Manage column visibility and ordering.

Data view with column pinning

Pin important columns for easy reference.

Data view with column pinning and pagination

Combine pinning and pagination for better usability.

Data view with custom cell renderers

Customize how data is displayed within cells.

Data view with action bar

Add a dedicated action bar for common operations.

Data view filter data

Apply flexible filters to find specific data.

Data view loading state

Indicate when data is being loaded or refreshed.

Data view with sticky columns

Keep certain columns visible while scrolling horizontally.

Data view with server side data loading

Efficiently handle large datasets with server-side operations.

Data view with server side data loading (empty state)

Handle cases where no data is available from the server.

Data view with custom empty state

Provide meaningful feedback when no data is displayed.

Data view refresh (client and server side)

Easily refresh data to keep it up to date.