Table ADDON-TABLE

Examples API Setup
Source code
See also
TablePagination, TableFilters

This module allows you to create various tables, both static and editable.

Basic

#
Name
Balance
Alex Inkin 1 323 525
Roman Sedov 423 242

Custom

#
Checkbox
TitleCellStatus Items ProgressActions
Data point 1 The first element
This is title Chip More information ・ Data
JC 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
EI Eric Idle cool@dude.com
Failure
One
Item
91ms
And now Completely different
Wow
MP Michael Palin its@man.com
Pending 32ms

Editable

#
Name Purchase
999 999
998
149.75
19 999
14 997
74.75

With tuiSortBy directive to work with column titles instead of sorters

#

Date of Birth
Wilson, Julia 26.02.2003 22
Wilson, Julia 09.06.1996 29
Wilson, Julia 10.10.1994 31
Wilson, Julia 12.08.1999 26
Wilson, Julia 13.09.1994 31
Wilson, Julia 11.02.1994 31
Wilson, John 17.09.1996 29
Wilson, John 10.05.1999 26
Wilson, Joe 15.11.2003 22
Wilson, Joe 25.03.2004 21
Pages 30 Lines per page of 300

Virtual scroll

#

You can use Table with ScrollingModule from @angular/cdk/scrolling .

Dynamic columns

#
1 name

Footer

#
999 rows
NameBalance
Alex Inkin1 323 525
Roman Sedov423 242

Resize a large table

#
Name
Items
Balance
Description
Alex Inkin
Wallet
Phone
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Roman Sedov
Wallet
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.