@talenra/components documentation
  1. Interfaces
  2. ITableColumn

File

table/src/table/table.types.ts

Description

Defines a column in the Table component.

Example :
protected readonly columns: TableColumn[] = [
  { identifier: 'author', label: 'Author' },
  { identifier: 'title', label: 'Title' },
  { identifier: 'pages': label: 'Pages', align: TableColumnHAlign.Right },
  { identifier: 'price', label: 'Price', align: TableColumnHAlign.Right },
];

Import

Example :
import { ITableColumn } from '@talenra/components/table';

See TableComponent

Index

Properties

Properties

disableRowSelection
disableRowSelection: boolean
Type : boolean
Optional

Disables row selection for the column. Use to prevent interferences when implementing a custom renderer with event handlers.
field
field: string
Type : string

Field name in the data object. Used to map the data object's field to the corresponding column.
hAlign
hAlign: TTableColumnHAlign
Type : TTableColumnHAlign
Optional

Horizontal alignment of content in the column. Note that this setting affects table body's cells (td) only. Header cells (th) are always left-aligned.
identifier
identifier: string
Type : string

Unique identifier for the column.
label
label: string
Type : string
Optional

Label displayed in the table's header.
renderer
renderer: Type<unknown>
Type : Type<unknown>
Optional

Custom renderer component. Use a renderer if rendering a simple string value does not match your requirements.

See TableComponent See ITableCellRenderer
resizable
resizable: boolean
Type : boolean
Optional

Determines whether the column is user-resizable. If set true, the user can resize the column width by dragging the column separator in the Table head.
sortable
sortable: boolean
Type : boolean
Optional

Determines whether the column is sortable.
width
width: string | TTableColumnWidth
Type : string | TTableColumnWidth
Optional

Width of the column. Provide a CSS length unit string (e.g. '250px') to define the exact width of the column or a range object (e.g. { min: '120px', max: '500px'}). As the table is always the same width as its container, effective column width might deviate from the specified values.

results matching ""

    No results matching ""