Getting StartedInstallation and setup guides 6
LayoutWorkflow and structural layout components 8
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 25
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Table API

Import TngTableComponent from @tailng-ui/components and pass column definitions plus row items.

Inputs

NameTypeDescription
columnsreadonly TngTableColumn<TRow>[] A column tree. Leaves carry id, label, accessor, alignment, sorting, sticky position, truncation, width, and optional groupBy row merging. Groups carry id, label, and a children array to produce multi-row headers with colspan / rowspan.
itemsreadonly TRow[]Rows rendered into the table body.
density'comfortable' | 'compact'Controls vertical cell padding.
layout'auto' | 'fixed'Sets the native table layout mode.
hoverMode'row' | 'group' Controls hover highlighting. 'row' highlights the single hovered row; 'group' highlights every row in the same groupBy rowspan group, so merged groups react as one block.
rowClass(row: TRow, index: number) => TngTableClassInput Predicate that returns extra classes for each body row. Return a string, string[], or Record<string, boolean>. Applied via the native [class] binding, so base row markup is preserved.
rowStyle(row: TRow, index: number) => TngTableStyleInput Predicate that returns inline styles or CSS custom properties for each body row. Use --tng-table-row-bg to set the painted row background on cells.
loading, errorbooleanRender full-width state rows.
stickyHeaderbooleanMakes the header row sticky inside the scroll container.
scrollAxis'none' | 'x' | 'y' | 'both' Controls primitive scroll behavior for the outer scroll wrapper. Use 'x' or 'both' with --tng-table-min-width for horizontal overflow, and 'y' or 'both' with --tng-table-scroll-max-height for vertical overflow.
sortActive, sortDirectionstring | nullControlled sorting state forwarded to sortable headers.

Styling hooks

Per-row styling uses the rowClass and rowStyle inputs; per-column styling lives on the column definition next to align and width. Class hooks are applied with the native [class] binding; style hooks apply inline styles and CSS custom properties directly to the internal table elements.

HookTypeDescription
rowClass (input)(row, index) => TngTableClassInputClasses for each <tr>, evaluated per row.
rowStyle (input)(row, index) => TngTableStyleInput Inline styles/custom properties for each body <tr>, evaluated per row.
column.cellClassTngTableClassInput | (row, value, index) => TngTableClassInput Classes for that leaf column's body cells. Static for column-wide styling, or a predicate for value-driven styling.
column.cellStyleTngTableStyleInput | (row, value, index) => TngTableStyleInputInline styles for that leaf column's body cells.
column.headerClassTngTableClassInputClasses for the column's header cell. Valid on leaf and group columns.
column.headerStyleTngTableStyleInput Inline styles for the column's header cell. Valid on leaf and group columns.

Because Angular scopes component styles, class selectors for internal rows and cells still belong in global CSS, Tailwind utilities, or shared library styles. Use rowStyle, cellStyle, and headerStyle when the styling should be driven from component code and component CSS variables.

Slots and CSS variables

The component exposes stable data-slot hooks for global styling and CSS custom properties for app-level layout. Prefer variables for scroll height, overflow, table width, and sticky header layering; they work from component-scoped CSS without ::ng-deep.

HookDescription
data-slot="table-scroll" Outer scroll wrapper. Reflects data-scroll-axis and data-sticky-header.
data-slot="table" Native table. Reflects data-density, data-hover-mode, and primitive table state attributes.
table-header, table-body, table-header-row, table-rowSection and row slots for global style rules.
table-header-cell, table-cell, table-state-cell Cell slots. Alignment, grouping, sticky-column, and truncation attributes remain available on the relevant cells.
--tng-table-scroll-max-heightMaximum scroll wrapper height. Defaults to none.
--tng-table-scroll-overflow-x, --tng-table-scroll-overflow-y Overflow values used for axes enabled by scrollAxis. Both default to auto.
--tng-table-min-width Minimum width of the native table. Set this wider than the container to create horizontal scrolling.
--tng-table-header-z-indexSticky header stacking level. Defaults to 2.

Outputs and templates

  • sortChange emits TngTableSortChange when a sortable header changes.
  • ng-template[tngTableCellTemplate] customizes body cells by column id. The context exposes value, row, rowIndex, column, columnId, groupSize, and isGroupLeader.
  • ng-template[tngTableHeaderTemplate] customizes header cells by column id. The context exposes label, columnId, column, isGroup, depth, colspan, and rowspan, so the same template can render leaf and group headers.