DataTableColumnDirective
Inputs
bindAsUnsafeHtml
canAutoResize
Whether the column can automatically resize to fill extra space. Default value: true.
cellTemplateInput
Template used to render body cells.
checkboxable
Whether the column displays a selection checkbox. Only applies when selection mode is checkbox.
draggable
Whether the column can be dragged to reorder it. Default value: true.
flexGrow
Grow factor relative to other columns. Available extra width is distributed proportionally according to all columns' flexGrow values. Default value: 0.
frozenLeft
Whether the column is frozen to the left. Default value: false.
frozenRight
Whether the column is frozen to the right. Default value: false.
ghostCellTemplateInput
headerCheckboxable
Whether the header displays a selection checkbox. Only applies when selection mode is checkbox.
headerTemplateInput
Template used to render header cells.
isTreeColumn
maxWidth
Maximum column width in pixels.
minWidth
Minimum column width in pixels.
name
Column label. When omitted, the property value is used and decamelized.
pipe
Custom pipe used to transform cell values.
prop
Property used to bind row values. When omitted, the name is converted to camel case.
resizeable
Whether the user can manually resize the column. Default value: true.
sortable
Whether row values can be sorted by this column. Default value: true.
summaryTemplate
treeLevelIndent
treeToggleTemplateInput
width
Default column width in pixels. Default value: 150.
Properties
cellClass
readonly cellClass: InputSignal<string | ((data: {
row: TRow;
group?: TRow[];
column: TableColumn<TRow>;
value: any;
rowHeight: number;
}) => string | Record<string, boolean>) | undefined>
CSS classes to apply to the body cell.
cellTemplateQuery
column
Computed property that returns the column configuration as a TableColumn object
comparator
readonly comparator: InputSignal<((valueA: any, valueB: any, rowA: TRow, rowB: TRow) => number) | undefined>
Custom client-side sort comparator. It receives cell values and their respective rows; a standard two-argument comparison function is also supported.
ghostCellTemplateQuery
headerClass
readonly headerClass: InputSignal<string | ((data: {
column: TableColumn;
}) => string | Record<string, boolean>) | undefined>
CSS classes to apply to the header cell.