Introduction Foundations Components Patterns Directives Pipes Motion Brand

Components

Structure

Title card

Alerts & notifications

Banner alert Banner announcement Floating action Toast alert

Buttons & actions

Button Link Pull refresh Share buttons Share link Social buttons Split button Toggle buttons

Cards

Card Widget

Forms

Checkbox card Checkbox File select Input Label Location input Multi select Multiple location input Radio Search Select Slider Smart textarea Textarea Toggle

Gallery / images / media

Gallery mosaic

Icons / images / media

Animated svg File viewer Icon Image cropper

Layouts

Container Grid Page layout Table

Navigation

Breadcrumbs Pagination Tabs

Popups / overlays

Callout Drawer Dropdown filter Highlight Modal More options Tooltip

Progress & loading indicators

Countdown timer Loading text Progress bar Progress steps Spinner

Tags

Tag

Typography

Heading Hr

Table

Tables for displaying dynamic data
There is some complex template stuff that requires following the examples quite closely to function. Make sure you include everything, especially the #cell ref.
Contents
Default Edge to edge Expandable Expandable mobile Fixed layout Header color Highlight Hover Mobile view compact Mobile view shading No border Padding size Pagination Pagination position Responsive Row links Row track by Sortable Text align Title callout Vertical alignment
Mobile View Compact "TableMobileStyle.SHADOW"
Name
Date
Project Name
Status
age
Actions
Jhon
16/08/1973
Build a website
Released
24
Rachel
16/08/1973
Design a logo
Released
27
George
16/08/1973
Build a component
Released
30
Allow only one row to be expanded at once
Use the Expandable Body property [expandableBodyCompact]="true" to show hidden content automatically in the expandable body.
Name
Date
Project Name
Status
age
amount
Actions
Jhon
16/08/1973
Build a website
Released
24
200
Name
Jhon
Date
16/08/1973
Project Name
Build a website
Status
Released
age
24
amount
200
Actions
Rachel
16/08/1973
Design a logo
Released
27
100
Name
Rachel
Date
16/08/1973
Project Name
Design a logo
Status
Released
age
27
amount
100
Actions
George
16/08/1973
Build a component
Released
30
300
Name
George
Date
16/08/1973
Project Name
Build a component
Status
Released
age
30
amount
300
Actions
Use the Expandable property [expandable]="true" to add custom content in the exapandable body.
Name
Date
Project Name
Status
age
amount
Jhon
16/08/1973
Build a website
Released
24
200
Transaction ID
675756756756
Transaction Date
16/08/1973
Project Name
Build a website
Project Description
This is a description that will only show up on expand
Rachel
16/08/1973
Design a logo
Released
27
100
Transaction ID
34534534534
Transaction Date
16/08/1973
Project Name
Design a logo
Project Description
This is a description that will only show up on expand
George
16/08/1973
Build a component
Released
30
300
Transaction ID
12345123434
Transaction Date
16/08/1973
Project Name
Build a component
Project Description
This is a description that will only show up on expand
Mobile View Compact "TableMobileStyle.SIMPLE"
Name
Date
Project Name
Status
age
Actions
Jhon
16/08/1973
Build a website
Released
24
Rachel
16/08/1973
Design a logo
Released
27
George
16/08/1973
Build a component
Released
30
Mobile View Compact "TableMobileStyle.SIMPLE" and "expandable"
Name
Date
Project Name
Status
age
amount
Jhon
16/08/1973
Build a website
Released
24
200
Transaction ID
675756756756
Transaction Date
16/08/1973
Project Name
Build a website
Project Description
This is a description that will only show up on expand
Rachel
16/08/1973
Design a logo
Released
27
100
Transaction ID
34534534534
Transaction Date
16/08/1973
Project Name
Design a logo
Project Description
This is a description that will only show up on expand
George
16/08/1973
Build a component
Released
30
300
Transaction ID
12345123434
Transaction Date
16/08/1973
Project Name
Build a component
Project Description
This is a description that will only show up on expand
Inputs
dataSource : readonly T[]
border ?: boolean = true
compactPagination ?: boolean = false
Set pagination component to use compact mode
customExpandable ?: boolean = false
Allow programmatically expanding the table without showing the chevron icon
edgeToEdge ?: boolean = false
expandable ?: boolean = false
expandableBodyCompact ?: boolean = false
expandableMobileEnabled ?: boolean = true
Allows showing or hiding of the expandable toggle in mobile screens. Will only have an effect when `expandable` is true
fixedLayout ?: boolean = false
Use with any width input on fl-table-col to fix table layout
headerColor ?: TableHeaderColor = TableHeaderColor.DEFAULT
headerWidth ?: HeaderWidth = HeaderWidth.SMALL
hideBoxShadow ?: boolean = false
Hide table outer box shadow but keep the individual cell box shadow in mobile view
hideHeader ?: boolean = false
hover ?: boolean = false
initialPage ?: number = 1
itemsPerPage ?: number = Number.POSITIVE_INFINITY
mobileViewCompact ?: TableMobileStyle
mobileViewShading ?: boolean = false
Adds a shaded color to every second row in mobile view
paddingSize ?: TableColumnPaddingSize = TableColumnPaddingSize.MID
paddingSizeDesktop ?: TableColumnPaddingSize
paddingSizeTablet ?: TableColumnPaddingSize
paginationPosition ?: TablePaginationPosition = TablePaginationPosition.CENTER
Position applys only for tablet viewport and up
responsive ?: boolean = true
rowLinks ?: boolean = false
Allow table rows to be links. Currently not supported with `expandable`, `mobileViewCompact` and `calloutContent`.
rowTrackBy ?: TrackByFunction<T>
singleExpandable ?: boolean = false
Only allow expanding one row at a time
totalCount ?: number
The total count of items in the table. Used for when we don't retrieve all records in one go
Outputs
pageSelected ?: any = new EventEmitter<number>()
rowExpanded ?: any = new EventEmitter<number | undefined>()
Emits the index of the currently expanded row - undefined if no row is expanded
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.