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

[paddingSize]="TableColumnPaddingSize.NONE"

Name	Job Title	Salary
Name Alice	Job Title Software Engineer	Salary $88,000.00
Name Bob	Job Title Product Manager	Salary Undisclosed Salary
Name John	Job Title Data Scientist	Salary $98,000.00

[paddingSize]="TableColumnPaddingSize.SMALL"

Name	Job Title	Salary
Name Alice	Job Title Software Engineer	Salary $88,000.00
Name Bob	Job Title Product Manager	Salary Undisclosed Salary
Name John	Job Title Data Scientist	Salary $98,000.00

[paddingSize]="TableColumnPaddingSize.MID"

Name	Job Title	Salary
Name Alice	Job Title Software Engineer	Salary $88,000.00
Name Bob	Job Title Product Manager	Salary Undisclosed Salary
Name John	Job Title Data Scientist	Salary $98,000.00

Expandable

[paddingSize]="TableColumnPaddingSize.NONE"

Name	Job Title	Salary
Name Alice	Job Title Software Engineer	Salary $88,000.00
Expandable content goes here
Name Bob	Job Title Product Manager	Salary Undisclosed Salary
Expandable content goes here
Name John	Job Title Data Scientist	Salary $98,000.00
Expandable content goes here

[paddingSize]="TableColumnPaddingSize.SMALL"

Name	Job Title	Salary
Name Alice	Job Title Software Engineer	Salary $88,000.00
Expandable content goes here
Name Bob	Job Title Product Manager	Salary Undisclosed Salary
Expandable content goes here
Name John	Job Title Data Scientist	Salary $98,000.00
Expandable content goes here

[paddingSize]="TableColumnPaddingSize.MID"

Name	Job Title	Salary
Name Alice	Job Title Software Engineer	Salary $88,000.00
Expandable content goes here
Name Bob	Job Title Product Manager	Salary Undisclosed Salary
Expandable content goes here
Name John	Job Title Data Scientist	Salary $98,000.00
Expandable content goes here

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