NGSTARTER UI

Table

Table is for static or simple template-defined tabular data where the columns are known in Angular code. Use it for predictable read-only tables, documentation tables, settings summaries, lightweight admin tables, and small local datasets. Use DataView instead when users need richer operational dataset behavior such as column management, advanced data operations, saved views, or a full admin grid.

The NgStarter Angular Table component lets you render static or template-defined tabular data with known columns. It supports Angular cell templates, local sorting, filtering, pagination, selection, sticky rows, and fixed columns.

Native Table

Use the native table styling wrapper for static HTML tables that do not need an Angular data source.

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

Basic Table

Use ngs-table when a simple dataset has known columns and custom cell templates.

No.	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

Table With Pagination

Connect TableDataSource to Paginator for local pagination on small or moderate static datasets.

No.	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
11	Sodium	22.9897	Na
12	Magnesium	24.305	Mg
13	Aluminum	26.9815	Al
14	Silicon	28.0855	Si
15	Phosphorus	30.9738	P
16	Sulfur	32.065	S
17	Chlorine	35.453	Cl
18	Argon	39.948	Ar
19	Potassium	39.0983	K
20	Calcium	40.078	Ca

Items per page:

0 of 0

Table With Sorting

Use ngsSort with ngs-sort-header when column headers should emit active column and direction for local or server-side sorting.

No.	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

Table With Filtering

Use TableDataSource filtering for simple local text filtering. Use DataView or FilterBuilder for richer dataset filtering.

Filter

No.	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

Table With Selection

Add Checkbox and SelectionModel when rows in a simple table can be selected.

No.	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

Table With Fixed Columns

Use sticky columns for simple wide tables that need important columns or actions to remain visible.

Name	No.	Weight	Symbol	No.	Weight	Symbol
Hydrogen	1	1.0079	H	1	1.0079	H
Helium	2	4.0026	He	2	4.0026	He
Lithium	3	6.941	Li	3	6.941	Li
Beryllium	4	9.0122	Be	4	9.0122	Be
Boron	5	10.811	B	5	10.811	B
Carbon	6	12.0107	C	6	12.0107	C
Nitrogen	7	14.0067	N	7	14.0067	N
Oxygen	8	15.9994	O	8	15.9994	O
Fluorine	9	18.9984	F	9	18.9984	F
Neon	10	20.1797	Ne	10	20.1797	Ne

Table With Fixed Header

Use a sticky header when a simple table scrolls inside a bounded container.

No.	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

Table With Fixed Footer

Use a sticky footer for totals or summary rows in a simple table.

Item	Cost
Beach ball	$4.00
Towel	$5.00
Frisbee	$2.00
Sunscreen	$4.00
Cooler	$25.00
Swim suit	$15.00
Total	$55.00

Drag and drop rows table

Use drag and drop sorting when users reorder rows manually. This is different from column header sorting.

No.

Name

Weight

Symbol

Quantity of Element

Hydrogen

1.0079

100

Helium

4.0026

100

Lithium

6.941

100

Beryllium

9.0122

100

Boron

10.811

100

Carbon

12.0107

100

Nitrogen

14.0067

100

Oxygen

15.9994

100

Fluorine

18.9984

100

Neon

20.1797

100