ng-fusion-ui
Version:
Angular data table library!
145 lines (144 loc) • 6.62 kB
TypeScript
import { OnInit, TemplateRef } from '@angular/core';
import { FuTableComponent } from '../table/table.component';
import { FuFieldType, FuSortDirection } from '../types';
import { FieldPath } from '../helpers';
import * as i0 from "@angular/core";
/**
* Defines a column for use inside a `fu-table`.
*
* A `fu-column` describes how a single field of the row data is displayed,
* sorted, edited, and configured.
*
* Columns can optionally provide custom templates for:
* - header content
* - header addon content
* - data cell rendering
* - row actions (edit, save, expand, etc.)
*
* Example:
* ```html
* <fu-table [data]="users">
* <fu-column field="name" header="Name" sortable editable />
*
* <fu-column field="age" header="Age">
* <ng-template fuColumnCell let-value>
* {{ value }} years
* </ng-template>
* </fu-column>
* </fu-table>
* ```
*
* ## Visibility
* The column visibility can be controlled in two ways:
* - via the `visible` input on the column
* - via `ColumnConfig` provided to `fu-table`
*
* If `ColumnConfig` is provided, it takes precedence over the column's
* `visible` input.
*/
export declare class FuColumnComponent<T extends object> implements OnInit {
/** Text displayed in the column header. */
header: import("@angular/core").InputSignal<string>;
/**
* Optional descriptive text shown in the column configuration panel.
* (drag & drop / visibility settings).
*
* Also used as tooltip text for the column header in the table.
*/
description: import("@angular/core").InputSignal<string>;
/**
* Path to the value in the row object used by this column.
*
* Supports dot-notation for nested values (e.g. `address.city`).
*/
field: import("@angular/core").InputSignal<FieldPath<T>>;
/**
* Control type used when the column is editable.
*
* If not provided, the control type is inferred from the cell value
* using `typeof` (e.g. `string`, `number`, `boolean`).
*
* ⚠️ Note: Date values cannot be reliably inferred from the value.
*
* ⚠️ When editing date fields, it is recommended to explicitly set `type="date"`.
*
* The control type determines which editor is rendered for the cell.
*/
type: import("@angular/core").InputSignal<FuFieldType | undefined>;
/**
* CSS width of the column (e.g. `120px`, `20%`, `auto`).
* Defaults to `auto`.
*/
width: import("@angular/core").InputSignal<string>;
/**
* Whether the column can be sorted.
*
* When enabled, clicking the column header toggles sort direction.
*
* Does not need to be set if `sortField` is provided.
*/
sortable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
/**
* Optional backend sort key.
*
* When provided, this value is emitted in sort queries instead of `field`.
* Useful when the backend expects enum values, aliases, or different field names.
*
* If omitted, `field` is used.
*/
sortField: import("@angular/core").InputSignal<string | number | null>;
/**
* Whether cells in this column can be edited.
*
* Editing behavior depends on the configured control type and templates.
*/
editable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
/**
* Whether the column can be hidden via table configuration UI
* (e.g. sidebar or column visibility controls).
*/
hideable: import("@angular/core").InputSignal<boolean>;
/**
* Whether the column can be reordered via drag-and-drop
* or other column reordering mechanisms.
*/
reorderable: import("@angular/core").InputSignal<boolean>;
/**
* Whether the column is searchable for local filtering.
*
* When enabled, the table's search functionality includes this column
* when filtering rows based on the search term.
*/
searchable: import("@angular/core").InputSignal<boolean>;
/**
* Controls whether the column is initially visible.
*
* Note:
* If `ColumnConfig` is provided to `fu-table`, the visibility defined
* there takes precedence over this value.
*/
visible: import("@angular/core").ModelSignal<boolean>;
/**
* Marks the column as an action column.
*
* Action columns typically contain interactive elements such as buttons or links.
*
* These columns are excluded from row-level styling (e.g. rowClass, rowStyle).
*
* * Defaults to `false`.
*/
isAction: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
isSortable: import("@angular/core").Signal<boolean>;
sortDirection: import("@angular/core").WritableSignal<FuSortDirection>;
columnCellTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
columnHeaderAddonTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
columnHeaderTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
columnActionsTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
accessor: (row: T) => any;
constructor(table: FuTableComponent<T>);
ngOnInit(): void;
toggleSort(): void;
private buildAccessor;
static ɵfac: i0.ɵɵFactoryDeclaration<FuColumnComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<FuColumnComponent<any>, "fu-column", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "sortField": { "alias": "sortField"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "hideable": { "alias": "hideable"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "isAction": { "alias": "isAction"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, ["columnCellTemplate", "columnHeaderAddonTemplate", "columnHeaderTemplate", "columnActionsTemplate"], never, true, never>;
}