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.01.1996 30
Wilson, Julia 21.04.1995 31
Wilson, Julia 07.04.2005 21
Wilson, Julia 29.03.1995 31
Wilson, Julia 01.06.1996 30
Wilson, John 31.08.2002 24
Wilson, John 18.03.2003 23
Wilson, John 09.02.2002 24
Wilson, John 30.03.1998 28
Wilson, Joe 06.07.1996 30
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 Jones, Jim 10.06.1994 32
1.1 Brown, Jim 20.12.2000 25
1.2 West, Jane 31.01.1998 28
1.3 West, John 21.07.2000 26
1.4 Jackson, John 07.12.1996 29
1.5 Johnson, John 12.06.2004 22
2 Johnson, Julia 28.03.1998 28
2.1 Davis, Jane 13.01.1995 31
2.2 Jones, Jill 26.03.2000 26
2.3 Miller, Julia 24.03.1999 27
2.4 Davis, Jim 05.07.1994 32
3 Miller, Jane 04.11.2004 22
3.1 Jones, Julia 29.11.1995 30
3.2 Jackson, Joan 04.05.1998 28
3.3 Jones, John 14.11.1999 27
4 Williams, Joe 23.11.1999 26
4.1 Jones, Jane 10.02.1996 30
4.2 Williams, Jane 20.01.1996 30
5 Miller, Joe 04.05.2001 25
5.1 Brown, Jane 26.07.1997 29
6 Jackson, Jane 02.01.2004 22
7 West, Jim 03.08.2000 26
7.1 Miller, Joan 02.10.1998 28
7.2 Brown, Joan 16.10.1995 31
7.3 Smith, Jill 24.12.2001 24
7.4 Jones, Joan 30.11.2001 24
7.5 Williams, Jill 14.08.2004 22
8 Brown, John 25.01.2005 21
8.1 Smith, Joe 18.10.1999 27
8.2 West, Jane 04.03.2004 22
8.3 Davis, Joan 29.07.2003 23
8.4 Miller, Jill 03.04.1997 29
9 Davis, Julia 26.11.1997 28
9.1 Smith, John 12.09.1998 28
9.2 Williams, Jane 20.09.1999 27
9.3 Johnson, Joe 28.04.2004 22
10 Miller, Julia 28.08.1994 32
10.1 Brown, Jane 31.05.1998 28
10.2 Jackson, Julia 31.03.2000 26

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