The NgStarter Angular Data View sorting example shows how to make grid columns sortable in Angular. Use it for users, tasks, invoices, logs, assets, and records where people need to reorder data by status, date, name, amount, or priority.

API used in this example: sortable column definitions, sortChange, and Data View sort state.

Position

Name

Weight

Symbol

1

Hydrogen

1.0079

H

2

Helium

4.0026

He

3

Lithium

6.941

Li

4

Beryllium

9.0122

Be

5

Boron

10.811

B

6

Carbon

12.0107

C

7

Nitrogen

14.0067

N

8

Oxygen

15.9994

O

9

Fluorine

18.9984

F

10

Neon

20.1797

Ne

Items per page:

10

1 – 10 of 20

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

Related components

Build the surrounding workflow

With selectionMore docs in Data View.With paginationMore docs in Data View.With action barMore docs in Data View.