Table component

import { DAYCompoundInputComponent, DAYTableActionsTmplDirective, DAYTableCellTmplDirective, DAYTableColumnComponent, DAYTableComponent, DAYTableFooterTmplDirective, DAYTableGroupTmplDirective, DAYTableHeaderTmplDirective, DAYTableRowDetailsTmplDirective} from '/table';

Selectors

Table: day-table

Table column: day-table-column

Installation and Usage

npm install @dayerlin-bustamante/table

import { DAYTableComponent, DAYTableColumnComponent } from '@dayerlin-bustamante/table';

<day-table [data]="data" [displayedColumns]="columns">
    <day-table-column name="name" title="Name"/>
</day-table>

Inputs

Table component

Name	Description	Default
data: any[]	Array of data rows to display in the table.	[]
displayedColumns: string[]	List of column names to display in the table.	[]
lockedColumns: string[]	Columns that stay fixed (locked) when scrolling horizontally.	[]
orderedColumn: IDAYTableColumnOrder \| null	Initial column order configuration with column name and order direction.	null
groupedColumns: string[]	Columns used for grouping rows.	[]
checkeableRows: boolean	Enable checkbox selection for rows.	false
selectableRows: boolean	Enable row selection (highlight on click).	false
orderableColumns: boolean	Enable sorting on columns.	false
resizableColumns: boolean	Allow resizing of columns by dragging.	false
isLoading: boolean	Show skeleton loader on the cells.	false
rowsPerPage: number	Number of rows to display per page.	5

Table column component

Name	Description	Default
name: string	Unique name identifier for the column.	—
title?: string	Optional display title of the column header.	undefined
width?: number	Optional width in pixels for the column.	undefined
hasActions?: boolean	Flag to indicate if the column contains action buttons.	false

Outputs

Name	Description	Default
rowCheckedEventEmitter<boolean[]>	Emits the array of selected row states (boolean[]) when row selection changes.	—
rowSelectedEventEmitter<any>	Emits the selected row object when a row is clicked.	—
columnOrderedEventEmitter<IDAYTableColumnOrder \| null>	Emits the ordered column info with name and order (asc/desc) when a column is sorted.	—

Directives

Name	Description
DAYTableActionsTmplDirective	Template directive for customizing table actions.
DAYTableGroupActionsTmplDirective	Template directive for customizing group header actions.
DAYTableCellTmplDirective	Template directive for customizing table cells.
DAYTableFooterTmplDirective	Template directive for customizing the table footer.
DAYTableGroupTmplDirective	Template directive for customizing grouped rows in the table.
DAYTableHeaderTmplDirective	Template directive for customizing the table header.
DAYTableRowDetailsTmplDirective	Template directive for customizing detailed view in table rows.
DAYTableNoContentTmplDirective	Template directive for customizing the no content view when the table has no data.

Public methods

Name	Description
showDetails: (index: number) => void	Shows or hides additional details for a specific row.

The <day-table> component is a powerful and customizable table that supports features like sortable columns, row selection, and expandable groups.

Dependencies

'/core', '/icon', '/checkbox', '/resize', '/skeleton-loader'

Example

Html

Demo

Name
Plane
Helicopter
Jet
Glider
Drone
Footer names

Description

Custom Angular table component supporting locked and sortable columns.
Allows row selection with checkboxes, including a select-all option.
Supports grouping of columns and rows, with expandable and collapsible groups.
Resizable columns with configurable minimum and maximum widths.
Emits events for selected rows, checked rows, and column sorting changes.
Includes dynamic templates for row actions and details, customizable via directives.
Manages reactive internal states using signals and computed properties for better performance.
Supports animations to enhance visual experience.
Automatically handles widths and sticky columns with support for locked (sticky-left) columns.
Detects viewport size changes and adjusts widths and positions for responsiveness.
Dynamically updates sorting icons based on the current sorted column and order.
Allows showing/hiding additional details per row with animation and internal control.
Includes observers to detect header and footer height changes and adjust styles accordingly.
Configurable via inputs to control visibility, features, and table behavior.
Integrates with other custom components like checkbox, icon, and resize for specific functionalities.