Table
Tables for dynamic data; follow the examples closely, including the #cell ref
Contents
Header and Footer Separators
Use [headerSeparator] and [footerSeparator] to control the border between the header/footer and the table body. Both default to true . The examples below show each padding size variant with separators enabled.
[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 |
| Total | $186,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 |
| Total | $186,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 |
| Total | $186,000.00 | |
[paddingSize]="TableColumnPaddingSize.LARGE"
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 |
| Total | $186,000.00 | |
Separators disabled
Setting both [headerSeparator]="false" and [footerSeparator]="false" removes the dividing borders.
[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 |
| Total | $186,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 |
| Total | $186,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 |
| Total | $186,000.00 | |
[paddingSize]="TableColumnPaddingSize.LARGE"
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 |
| Total | $186,000.00 | |
Show a separator border between header and body
Emits the index of the currently expanded row - undefined if no row is expanded