Table ADDON-TABLE

Checkbox	Title	Cell	Status	Items	Progress
Data point 1 The first element	This is title Chip More information ・ Data	John Cleese silly@walk.uk	Success	Some items displayed here and can overflow	78ms
Some title Some more text	More info Chips can be here	Eric Idle cool@dude.com	Failure	One Item	91ms
And now Completely different	Wow	Michael Palin its@man.com	Pending		32ms

Using editable textfield controls inside a table.

Using SortBy directive to work with column titles instead of manual sorters.

Find on pageMinimum age

Enable sorting by DOB

Sort key: name, direction: -1

	Date of Birth
Pages 1 Lines per page of 1

Using ScrollingModule from @angular/cdk/scrolling to implement virtual scroll and tuiSorter pipe for easy sorting by key.

Using structural directives for dynamic columns.


1	name

Using caption tag to place pagination at the bottom of the table.

999 rows
Name	Balance
Alex Inkin	1 323 525
Roman Sedov	423 242

Making column headers draggable at the edge and setting width limits.

Name	Items	Balance
Alex Inkin	WalletPhone
Roman Sedov	Wallet

Animated expandable sections of the table.

More complex examples of expandable sections.

	First name	Last name	Role	Balance
	3 Developers (basic usage)		dev	5 970 009
	Alex	Inkin	dev	1 323 525
	Roman	Sedov	dev	423 242
	Andrei	Serebrennikov	dev	4 223 242
	2 Designers (manual handling)		design	4 646 484
	Joe	Wilson	design	423 242
	Julia	Johnson	design	4 223 242
	Custom content (click on chevron)		all	10 616 493
Alex Inkin Roman Sedov Andrei Serebrennikov Joe Wilson Julia Johnson

All unique textfield controls in their table representation.

On this page