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

[rowLinks]="true"

Specify a "link" property in the dataSource and each row will be a clickable link. You can also specify "newTab" in the dataSource aswell if you want certain links to open in a new tab. Currently "rowLinks" is not supported with the options "mobileViewCompact", "expandable" and "calloutContent".

Name	Age	Job Title	Salary
Name Alice	Age 24 years of age	Job Title Software Engineer	Salary $88,000.00
Name Bob	Age 23 years of age	Job Title Product Manager	Salary Undisclosed Salary
Name John	Age 22 years of age	Job Title Data Scientist	Salary $98,000.00

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

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Table