Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt
Use this file to discover all available pages before exploring further.
The DataTable is the most feature-rich data component in the Nettalco preset. It provides a fully styled tabular layout with support for sorting, filtering, pagination, row selection, row grouping, column resizing, and expandable rows — all driven by a structured set of design tokens and a global CSS override that eliminates hover-flicker on table rows.
Angular Usage Example
<p-table
[value]="products"
[paginator]="true"
[rows]="10"
selectionMode="single"
[(selection)]="selected"
styleClass="p-datatable-sm"
>
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="name">
Name <p-sortIcon field="name" />
</th>
<th pSortableColumn="price">
Price <p-sortIcon field="price" />
</th>
<th>Category</th>
<th>Status</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr [pSelectableRow]="product">
<td>{{ product.name }}</td>
<td>{{ product.price | currency }}</td>
<td>{{ product.category }}</td>
<td>
<p-tag [value]="product.status" />
</td>
</tr>
</ng-template>
<ng-template pTemplate="footer">
<tr>
<td colspan="4">Total: {{ products.length }} products</td>
</tr>
</ng-template>
</p-table>
Size Variants
Apply a styleClass to the <p-table> element to switch between density presets. All padding tokens (header, headerCell, bodyCell, footerCell, footer) carry corresponding sm and lg sub-tokens.
| Class | Padding (cell) |
|---|
p-datatable-sm | 0.375rem 0.5rem |
| (default) | 0.75rem 1rem |
p-datatable-lg | 1rem 1.25rem |
Design Tokens
root
| Token | Value |
|---|
transitionDuration | {transition.duration} |
Color-scheme override — root.borderColor
- Light:
{content.border.color}
- Dark:
{surface.800}
The toolbar-style panel rendered above the table grid.
| Token | Value |
|---|
background | {content.background} |
borderColor | {datatable.border.color} |
color | {content.color} |
borderWidth | 0 0 1px 0 |
padding | 0.75rem 1rem |
sm.padding | 0.375rem 0.5rem |
lg.padding | 1rem 1.25rem |
Individual <th> cells in the table head.
| Token | Value |
|---|
background | {content.background} |
hoverBackground | {content.hover.background} |
selectedBackground | {highlight.background} |
borderColor | {datatable.border.color} |
color | {content.color} |
hoverColor | {content.hover.color} |
selectedColor | {highlight.color} |
gap | 0.5rem |
padding | 0.75rem 1rem |
sm.padding | 0.375rem 0.5rem |
lg.padding | 1rem 1.25rem |
focusRing.width | {focus.ring.width} |
focusRing.style | {focus.ring.style} |
focusRing.color | {focus.ring.color} |
focusRing.offset | -1px |
focusRing.shadow | {focus.ring.shadow} |
columnTitle
Typography weight applied to the visible column header text span.
row
Tokens applied to every <tr> inside <tbody>.
| Token | Value |
|---|
background | {content.background} |
hoverBackground | {content.hover.background} |
selectedBackground | {highlight.background} |
color | {content.color} |
hoverColor | {content.hover.color} |
selectedColor | {highlight.color} |
focusRing.width | {focus.ring.width} |
focusRing.style | {focus.ring.style} |
focusRing.color | {focus.ring.color} |
focusRing.offset | -1px |
focusRing.shadow | {focus.ring.shadow} |
Color-scheme override — row.stripedBackground
- Light:
{surface.50}
- Dark:
{surface.950}
bodyCell
Individual <td> cells in the table body.
| Token | Value |
|---|
borderColor | {datatable.border.color} |
padding | 0.75rem 1rem |
sm.padding | 0.375rem 0.5rem |
lg.padding | 1rem 1.25rem |
Color-scheme override — bodyCell.selectedBorderColor
- Light:
{primary.100}
- Dark:
{primary.900}
The panel rendered below the table grid (not the column footer row).
| Token | Value |
|---|
background | {content.background} |
borderColor | {datatable.border.color} |
color | {content.color} |
borderWidth | 0 0 1px 0 |
padding | 0.75rem 1rem |
sm.padding | 0.375rem 0.5rem |
lg.padding | 1rem 1.25rem |
Individual cells inside the <tfoot> column footer row.
| Token | Value |
|---|
background | {content.background} |
borderColor | {datatable.border.color} |
color | {content.color} |
padding | 0.75rem 1rem |
sm.padding | 0.375rem 0.5rem |
lg.padding | 1rem 1.25rem |
columnFooter
Additional Tokens
sortIcon
| Token | Value |
|---|
color | {text.muted.color} |
hoverColor | {text.hover.muted.color} |
size | 0.875rem |
loadingIcon
columnResizer
resizeIndicator
| Token | Value |
|---|
width | 1px |
color | {primary.color} |
dropPoint
| Token | Value |
|---|
color | {primary.color} |
rowToggleButton
| Token | Value |
|---|
hoverBackground | {content.hover.background} |
selectedHoverBackground | {content.background} |
color | {text.muted.color} |
hoverColor | {text.color} |
selectedHoverColor | {primary.color} |
size | 1.75rem |
borderRadius | 50% |
paginatorTop / paginatorBottom
| Token | Value |
|---|
borderColor | {datatable.border.color} |
borderWidth | 0 0 1px 0 |
Theme Notes
Global transition: none Override
The Nettalco CSS layer (defined in css/index.ts) applies the following rule globally:
.p-datatable .p-datatable-tbody > tr,
thead.p-datatable-thead > tr > th,
th.p-datatable-header-cell {
transition: none;
}
Overlay Loading Mask
The built-in css block in the DataTable token file sets a semi-transparent loading mask that respects the active color scheme:
.p-datatable-mask.p-overlay-mask {
--px-mask-background: light-dark(rgba(255,255,255,0.5), rgba(0,0,0,0.3));
}
