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

#

Sort key: name, direction: -1

Date of Birth
Wilson, Julia 10.10.1999 27
Wilson, Julia 07.07.1999 27
Wilson, Julia 02.09.2004 22
Wilson, Julia 23.10.1998 28
Wilson, Julia 15.06.2003 23
Wilson, Julia 05.02.1998 28
Wilson, John 22.03.2003 23
Wilson, John 03.10.1997 29
Wilson, John 13.09.1998 28
Wilson, John 06.01.1995 31
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.

Expandable rows

#
# Name Date of Birth Age
1 West, James 28.01.1995 31
1.1 Johnson, Jim 11.09.2001 25
1.2 Brown, Jim 07.09.2002 24
1.3 West, Julia 22.07.2000 26
1.4 Jackson, Joan 19.10.1998 28
1.5 Davis, John 25.06.2000 26
2 Smith, Jim 24.12.1999 26
2.1 Brown, Jill 21.09.1996 30
2.2 Smith, James 06.06.2005 21
2.3 Davis, John 17.11.2002 24
2.4 Williams, Joan 29.09.1996 30
3 Jackson, Jane 09.01.2003 23
3.1 Brown, Jack 23.10.1998 28
3.2 Davis, Joan 12.07.1994 32
3.3 Miller, Julia 30.09.2002 24
4 Davis, Joe 10.09.1999 27
4.1 Brown, Jane 26.03.2004 22
4.2 West, Jane 20.10.2002 24
5 Johnson, Jack 03.08.1994 32
5.1 Miller, John 27.03.2000 26
6 Davis, Jane 06.08.1999 27
7 Miller, Jim 18.12.1998 27
7.1 Williams, James 14.03.2004 22
7.2 Smith, Jill 12.07.2002 24
7.3 Williams, Joe 14.08.2004 22
7.4 Jackson, Joe 23.07.2002 24
7.5 Johnson, James 29.06.2000 26
8 Miller, John 01.05.2004 22
8.1 Williams, Jill 09.01.1999 27
8.2 Jackson, Jim 07.02.2004 22
8.3 West, John 23.08.1994 32
8.4 Williams, Joe 05.09.2002 24
9 Davis, Jim 27.09.2000 26
9.1 Smith, Julia 21.02.1997 29
9.2 Johnson, Jim 26.03.2000 26
9.3 Jackson, James 13.04.2004 22
10 West, James 07.03.2003 23
10.1 Jones, Jane 12.05.2005 21
10.2 Miller, Julia 13.12.2003 22

Expandable rows: different ways to toggle rows

#
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

Manual sorting

#
Banana 2 yellow
Pineapple 8 yellow
Lemon 14 yellow
Apple 1 red
Strawberry 6 red
Cherry 13 red
Pomegranate 16 red
Raspberry 17 red
Grapes 5 purple
Blackberry 18 purple
Plum 20 purple
Orange 4 orange
Mango 9 orange
Peach 11 orange
Cantaloupe 19 orange
Kiwi 3 green
Watermelon 10 green
Pear 12 green
Lime 15 green
Blueberry 7 blue