| Id |
Name |
Address |
Phone |
Active |
@for (person of people; track person; let index = $index) {
| {{ person.id }} |
{{ person.name }} |
{{ person.address }} |
{{ person.phone }} |
@if (person.active) {
}
|
}
@if (loading) {
|
Loading...
|
}
A fixed header table can be created by using the uxFixedHeaderTable directive. This
allows the table header to remain fixed in place and visible while the table content is scrolled.
To give a column a fixed width you should apply a class to both the th and associated
td elements. This class should set the width property and also set
flex: none.
The properties of this directive are:
This defines the height of the table body. When a number is provided the unit will default to
pixels. If a string is provided then the CSS unit will need to be specifed as part of the
string, e.g.
'50%'. If using a percentage value, the table element should also have an explicit height set.
If specifed, any time the dataset changes the layout will be recalculated to ensure the columns
headers remain aligned with the columns after a scrollbar has appeared or disappeared. The
dataset should be immutable to ensure changes are detected. TypeScript can enforce this
immutability by using the
ReadonlyArray
type.
This event will be triggered when the user scrolls to the bottom of the table. This can be used
to implement paging functionality. This event will also be triggered when the table initially
loads to allow loading of the first page.
This will recalculate the layout of the table to ensure the columns headers remain aligned with
the columns after a scrollbar has appeared or disappeared.
The following code can be used to create the example shown above: