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 24.04.2000 26
Wilson, Julia 04.02.2004 22
Wilson, Julia 30.01.1995 31
Wilson, Julia 18.03.1996 30
Wilson, John 01.02.1995 31
Wilson, John 26.06.1996 30
Wilson, John 07.01.1996 30
Wilson, Joe 26.03.2000 26
Wilson, Joe 19.03.2002 24
Wilson, Joe 02.12.2000 25
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 Miller, Jane 02.02.1999 27
1.1 Williams, Jane 16.07.2003 23
1.2 Johnson, Joan 19.07.1996 30
1.3 Brown, Jill 31.08.2000 26
1.4 Williams, Joan 22.12.1994 31
1.5 Jackson, Julia 27.11.1999 26
2 Johnson, John 15.10.2004 22
2.1 Johnson, Julia 08.04.1997 29
2.2 Johnson, Jane 14.06.2000 26
2.3 Jones, Jane 13.06.1996 30
2.4 Jones, Jill 21.09.2003 23
3 Jones, Jack 06.05.1998 28
3.1 Williams, James 03.05.2001 25
3.2 Williams, Jane 05.09.1995 31
3.3 Williams, Julia 22.02.2003 23
4 Miller, Jane 18.08.1998 28
4.1 Jones, Jack 17.07.2001 25
4.2 Williams, John 26.11.2001 24
5 Davis, Jill 18.09.2002 24
5.1 Brown, Jill 27.03.2004 22
6 Jones, Joan 21.06.2001 25
7 Miller, Joe 01.02.1998 28
7.1 Davis, Jim 28.04.1999 27
7.2 Miller, Jane 23.05.1997 29
7.3 Davis, James 23.04.1997 29
7.4 Williams, Jack 04.01.2004 22
7.5 West, Jane 13.11.2000 25
8 West, Julia 12.04.1997 29
8.1 Miller, Joan 06.05.2004 22
8.2 Smith, Joe 12.02.2004 22
8.3 Miller, Joan 30.09.1998 28
8.4 Johnson, Jack 06.12.1998 27
9 Johnson, Joe 13.11.2004 21
9.1 Smith, Jack 15.08.2002 24
9.2 Williams, Julia 19.08.2004 22
9.3 Smith, John 02.01.2003 23
10 Jackson, Joan 06.05.1998 28
10.1 Davis, Jim 23.03.2003 23
10.2 Brown, Joe 21.05.2002 24

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