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 30.12.1999 27
Wilson, Julia 13.07.1998 28
Wilson, Julia 13.08.2001 25
Wilson, Julia 21.02.2002 25
Wilson, Julia 10.02.1995 32
Wilson, Julia 27.03.1996 30
Wilson, Julia 06.02.1995 32
Wilson, Julia 23.01.1999 28
Wilson, Julia 26.02.1999 28
Wilson, Julia 14.10.2000 26
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 Williams, James 21.12.1998 28
1.1 Johnson, Jim 21.01.2004 23
1.2 Johnson, Jack 10.06.2001 25
1.3 Davis, John 07.09.2004 22
1.4 West, Jim 06.02.2005 22
1.5 Williams, James 06.11.1997 29
2 Jackson, Jill 18.08.1998 28
2.1 Johnson, Joe 18.12.2000 26
2.2 Jones, Jill 31.01.1996 31
2.3 Williams, Joe 16.12.1997 29
2.4 Smith, Joan 05.08.2002 24
3 Miller, Jill 12.05.1997 29
3.1 Johnson, Jill 18.09.2002 24
3.2 Johnson, Jill 28.08.2002 24
3.3 Jackson, Jack 10.06.2002 24
4 Williams, John 18.11.1994 32
4.1 Davis, Joe 10.07.2003 23
4.2 Miller, Joe 14.05.2004 22
5 West, Jill 08.01.1997 30
5.1 Johnson, Julia 19.05.2000 26
6 Williams, Jack 03.04.2005 21
7 West, Jane 11.02.2004 23
7.1 Johnson, Jack 06.08.1998 28
7.2 West, Jack 11.06.1995 31
7.3 Johnson, Jill 18.02.1998 29
7.4 West, Joe 02.02.2003 24
7.5 Davis, Joe 15.05.1998 28
8 Miller, Jane 02.06.1999 27
8.1 Johnson, Jill 03.10.1999 27
8.2 Miller, Jack 02.08.1999 27
8.3 Smith, Joe 09.05.2000 26
8.4 Jackson, John 29.03.1996 30
9 Williams, John 07.07.1998 28
9.1 Jones, Joan 05.04.1995 31
9.2 Brown, Jane 05.03.2002 25
9.3 Jones, Jack 11.06.1997 29
10 Brown, Joe 22.10.2003 23
10.1 Jackson, Jane 16.11.1995 31
10.2 Davis, Julia 15.09.2003 23

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