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.
[rowTrackBy]="trackByFn"
The *ngFor directive removes table rows from the DOM and recreates them each time the data source changes. This is an expensive operation for large tables, and can cause performance problems.
Specify a custom trackBy function to let Angular know which rows do not need to be destroyed. The return value of this function will be used as a key to identify each row. Rows which have the same key as the previous data source are reused rather than destroyed.
If not provided, Angular defaults to object identity to track each row, i.e. the object reference itself is the key. Keep in mind that Observables generally produce immutable data structures, which means that object identities will change with each emission.
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
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.