AI PAL table component

Example:

    <ai-table></ai-table>

### Hierarchy

- Table
  - AITableComponent

## Index

### Inputs

- model

### Constructors

- constructor

### Properties

- _checkboxHeaderLabel
- _checkboxRowLabel
- _endOfDataText
- _expandButtonAriaLabel
- _filterTitle
- _isDataGrid
- _model
- _scrollTopText
- _sortAscendingLabel
- _sortDescendingLabel
- applicationRef
- columnDraggedHoverIndex
- columnDraggedPosition
- columnResizeMouseX
- columnResizeWidth
- columnsDraggable
- columnsResizable
- deselectAll
- deselectRow
- elementRef
- enableSingleSelect
- expandButtonAriaLabel
- footerTemplate
- i18n
- interactionModel
- interactionPositionSubscription
- isColumnDragging
- isDataGrid
- isViewReady
- model
- mouseMoveSubscription
- mouseUpSubscription
- noBorder
- noData
- positionSubscription
- rowClick
- scrollLoad
- scrollLoadDistance
- selectAll
- selectAllCheckbox
- selectAllCheckboxSomeSelected
- selectRow
- selectionLabelColumn
- showSelectionColumn
- size
- skeleton
- sort
- sortAscendingLabel
- sortDescendingLabel
- sortable
- stickyHeader
- striped
- subscriptions
- translations
- ɵcmp
- ɵfac

### Methods

- columnDragEnd
- columnDragEnter
- columnDragLeave
- columnDragStart
- columnDragover
- columnDrop
- columnResizeEnd
- columnResizeProgress
- columnResizeStart
- disableDataGridInteractions
- doSort
- enableDataGridInteractions
- getCheckboxHeaderLabel
- getCheckboxRowLabel
- getEndOfDataText
- getExpandButtonAriaLabel
- getFilterTitle
- getScrollTopText
- getSelectionLabelValue
- getSortAscendingLabel
- getSortDescendingLabel
- ngAfterViewInit
- ngOnDestroy
- onDeselectAll
- onRowClick
- onScroll
- onSelectAll
- onSelectRow
- resetTabIndex
- scrollToTop
- updateSelectAllCheckbox
- focus
- setTabIndex
- skeletonModel

## Constructors

### constructor

- new AITableComponent(elementRef: ElementRef<any>, applicationRef: ApplicationRef, i18n: I18n): AITableComponent

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:400

  Creates an instance of Table.

  #### Parameters

  - ##### elementRef: ElementRef<any>

  - ##### applicationRef: ApplicationRef

  - ##### i18n: I18n

  #### Returns AITableComponent

## Properties

### Protected _checkboxHeaderLabel

_checkboxHeaderLabel: Overridable

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:392

### Protected _checkboxRowLabel

_checkboxRowLabel: Overridable

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:393

### Protected _endOfDataText

_endOfDataText: Overridable

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:394

### Protected _expandButtonAriaLabel

_expandButtonAriaLabel: Overridable

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:389

### Protected _filterTitle

_filterTitle: Overridable

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:396

### Protected _isDataGrid

_isDataGrid: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:383

### Protected _model

_model: TableModel

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:382

### Protected _scrollTopText

_scrollTopText: Overridable

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:395

### Protected _sortAscendingLabel

_sortAscendingLabel: Overridable

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:391

### Protected _sortDescendingLabel

_sortDescendingLabel: Overridable

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:390

### Protected applicationRef

applicationRef: ApplicationRef

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:178

### columnDraggedHoverIndex

columnDraggedHoverIndex: number

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:380

### columnDraggedPosition

columnDraggedPosition: string

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:381

### Protected columnResizeMouseX

columnResizeMouseX: number

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:398

### Protected columnResizeWidth

columnResizeWidth: number

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:397

### columnsDraggable

columnsDraggable: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:241

Set to `true` to enable users to drag and drop columns.

Changing the column order in table changes table model. Be aware of it when you add additional data to the model.

### columnsResizable

columnsResizable: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:233

Set to `true` to enable users to resize columns.

Works for columns with width set in pixels.

### deselectAll

deselectAll: EventEmitter<Object>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:349

Emits if all rows are deselected.

param

### deselectRow

deselectRow: EventEmitter<Object>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:361

Emits if a single row is deselected.

param

  this.model, deselectedRowIndex: index})

### Protected elementRef

elementRef: ElementRef<any>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:177

### enableSingleSelect

enableSingleSelect: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:221

Controls whether to enable multiple or single row selection.

### expandButtonAriaLabel

expandButtonAriaLabel: string | Observable<string>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:242

### footerTemplate

footerTemplate: TemplateRef<any>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:269

Set footer template to customize what is displayed in the tfoot section of the table

### Protected i18n

i18n: I18n

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:179

### Protected interactionModel

interactionModel: DataGridInteractionModel

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:387

### Protected interactionPositionSubscription

interactionPositionSubscription: Subscription

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:388

### isColumnDragging

isColumnDragging: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:379

### isDataGrid

isDataGrid: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:207

Set to `true` for a data grid with keyboard interactions.

### Protected isViewReady

isViewReady: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:384

### model

@Input()
model: any

- Defined in packages/angular/src/table/table.component.ts:94

### Protected mouseMoveSubscription

mouseMoveSubscription: Subscription

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:399

### Protected mouseUpSubscription

mouseUpSubscription: Subscription

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:400

### noBorder

noBorder: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:213

### Readonly noData

noData: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:378

### Protected positionSubscription

positionSubscription: Subscription

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:386

### rowClick

rowClick: EventEmitter<number>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:365

Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.

### scrollLoad

scrollLoad: EventEmitter<TableModel>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:369

Emits when table requires more data to be loaded.

### scrollLoadDistance

scrollLoadDistance: number

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:226

Distance (in px) from the bottom that view has to reach before `scrollLoad` event is emitted.

### selectAll

selectAll: EventEmitter<Object>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:343

Emits if all rows are selected.

param

### selectAllCheckbox

selectAllCheckbox: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:373

Controls if all checkboxes are viewed as selected.

### selectAllCheckboxSomeSelected

selectAllCheckboxSomeSelected: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:377

Controls the indeterminate state of the header checkbox.

### selectRow

selectRow: EventEmitter<Object>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:355

Emits if a single row is selected.

param

  this.model, selectedRowIndex: index})

### selectionLabelColumn

selectionLabelColumn: number

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:280

Used to populate the row selection checkbox label with a useful value if set.

Example:

    <ibm-table [selectionLabelColumn]="0"></ibm-table>
    <!-- results in aria-label="Select first column value"
    (where "first column value" is the value of the first column in the row -->

### showSelectionColumn

showSelectionColumn: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:217

Controls whether to show the selection checkboxes column or not.

### size

size: TableRowSize

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:199

Size of the table rows.

### skeleton

skeleton: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:203

Set to `true` for a loading table.

### sort

sort: EventEmitter<number>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:337

Emits an index of the column that wants to be sorted.

If no observers are provided (default), table will attempt to do a simple sort of the data loaded into the model.

If an observer is provided, table will not attempt any sorting of its own and it is up to the observer to sort the table. This is what you typically want if you're using a backend query to get the sorted data or want to sort data across multiple pages.

Usage:

    @Component({
        selector: "app-table",
        template: `
            <ibm-table
                [model]="model"
                (sort)="simpleSort($event)">
                No data.
            </ibm-table>
        `
    })
    export class TableApp implements OnInit, OnChanges {
        @Input() model = new TableModel();

        ngOnInit() {
            this.model.header = [
                new TableHeaderItem({ data: "Name" }),
                new TableHeaderItem({ data: "hwer" })
            ];

            this.model.data = [
                [new TableItem({ data: "Name 1" }), new TableItem({ data: "qwer" })],
                [new TableItem({ data: "Name 3" }), new TableItem({ data: "zwer" })],
                [new TableItem({ data: "Name 2" }), new TableItem({ data: "swer" })],
                [new TableItem({ data: "Name 4" }), new TableItem({data: "twer"})],
                [new TableItem({ data: "Name 5" }), new TableItem({data: "twer"})],
                [new TableItem({ data: "Name 6" }), new TableItem({data: "twer"})]
            ];
        }

        simpleSort(index: number) {
            // this function does a simple sort, which is the default for the table and if that's
            // all you want, you don't need to do this.

            // here you can query your backend and update the model.data based on the result
            if (this.model.header[index].sorted) {
                // if already sorted flip sorting direction
                this.model.header[index].ascending = this.model.header[index].descending;
            }
            this.model.sort(index);
        }
    }

### sortAscendingLabel

sortAscendingLabel: string | Observable<string>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:244

### sortDescendingLabel

sortDescendingLabel: string | Observable<string>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:243

### sortable

sortable: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:212

Setting sortable to false will disable all headers including headers which are sortable. Is is possible to set the sortable state on the header item to disable/enable sorting for only some headers.

### stickyHeader

stickyHeader: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:265

Set to `true` to stick the header to the top of the table

### striped

striped: boolean

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:261

Set to `false` to remove table rows (zebra) stripes.

### Protected subscriptions

subscriptions: Subscription

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:385

### translations

translations: any

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:257

Expects an object that contains some or all of:

    {
            "FILTER": "Filter",
            "END_OF_DATA": "You've reached the end of your content",
            "SCROLL_TOP": "Scroll to top",
            "CHECKBOX_HEADER": "Select all rows",
            "CHECKBOX_ROW": "Select row"
    }

### Static ɵcmp

ɵcmp: ɵɵComponentDefWithMeta<Table, "ibm-table", never, { columnsDraggable: "columnsDraggable"; columnsResizable: "columnsResizable"; enableSingleSelect: "enableSingleSelect"; expandButtonAriaLabel: "expandButtonAriaLabel"; footerTemplate: "footerTemplate"; isDataGrid: "isDataGrid"; model: "model"; noBorder: "noBorder"; scrollLoadDistance: "scrollLoadDistance"; selectionLabelColumn: "selectionLabelColumn"; showSelectionColumn: "showSelectionColumn"; size: "size"; skeleton: "skeleton"; sortAscendingLabel: "sortAscendingLabel"; sortDescendingLabel: "sortDescendingLabel"; sortable: "sortable"; stickyHeader: "stickyHeader"; striped: "striped"; translations: "translations" }, { deselectAll: "deselectAll"; deselectRow: "deselectRow"; rowClick: "rowClick"; scrollLoad: "scrollLoad"; selectAll: "selectAll"; selectRow: "selectRow"; sort: "sort" }, never, ["*"]>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:447

### Static ɵfac

ɵfac: ɵɵFactoryDef<Table, never>

- Defined in node_modules/carbon-components-angular/table/table.component.d.ts:446

## Methods

### columnDragEnd

- columnDragEnd(event: any, columnIndex: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:424

  #### Parameters

  - ##### event: any

  - ##### columnIndex: any

  #### Returns void

### columnDragEnter

- columnDragEnter(event: any, position: any, columnIndex: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:425

  #### Parameters

  - ##### event: any

  - ##### position: any

  - ##### columnIndex: any

  #### Returns void

### columnDragLeave

- columnDragLeave(event: any, position: any, columnIndex: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:426

  #### Parameters

  - ##### event: any

  - ##### position: any

  - ##### columnIndex: any

  #### Returns void

### columnDragStart

- columnDragStart(event: any, columnIndex: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:423

  #### Parameters

  - ##### event: any

  - ##### columnIndex: any

  #### Returns void

### columnDragover

- columnDragover(event: any, position: any, columnIndex: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:427

  #### Parameters

  - ##### event: any

  - ##### position: any

  - ##### columnIndex: any

  #### Returns void

### columnDrop

- columnDrop(event: any, position: any, columnIndex: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:428

  #### Parameters

  - ##### event: any

  - ##### position: any

  - ##### columnIndex: any

  #### Returns void

### columnResizeEnd

- columnResizeEnd(event: any, column: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:417

  #### Parameters

  - ##### event: any

  - ##### column: any

  #### Returns void

### columnResizeProgress

- columnResizeProgress(event: any, column: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:416

  #### Parameters

  - ##### event: any

  - ##### column: any

  #### Returns void

### columnResizeStart

- columnResizeStart(event: any, column: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:415

  #### Parameters

  - ##### event: any

  - ##### column: any

  #### Returns void

### disableDataGridInteractions

- disableDataGridInteractions(): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:408

  #### Returns void

### doSort

- doSort(index: number): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:429

  #### Parameters

  - ##### index: number

  #### Returns void

### enableDataGridInteractions

- enableDataGridInteractions(): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:407

  #### Returns void

### getCheckboxHeaderLabel

- getCheckboxHeaderLabel(): Observable<string>

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:441

  #### Returns Observable<string>

### getCheckboxRowLabel

- getCheckboxRowLabel(): Observable<string>

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:442

  #### Returns Observable<string>

### getEndOfDataText

- getEndOfDataText(): Observable<string>

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:443

  #### Returns Observable<string>

### getExpandButtonAriaLabel

- getExpandButtonAriaLabel(): Observable<string>

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:438

  #### Returns Observable<string>

### getFilterTitle

- getFilterTitle(): Observable<string>

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:445

  #### Returns Observable<string>

### getScrollTopText

- getScrollTopText(): Observable<string>

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:444

  #### Returns Observable<string>

### getSelectionLabelValue

- getSelectionLabelValue(row: TableItem[]): { value: any }

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:435

  #### Parameters

  - ##### row: TableItem[]

  #### Returns { value: any }

  - ##### value: any

### getSortAscendingLabel

- getSortAscendingLabel(): Observable<string>

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:440

  #### Returns Observable<string>

### getSortDescendingLabel

- getSortDescendingLabel(): Observable<string>

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:439

  #### Returns Observable<string>

### ngAfterViewInit

- ngAfterViewInit(): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:405

  #### Returns void

### ngOnDestroy

- ngOnDestroy(): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:406

  #### Returns void

### onDeselectAll

- onDeselectAll(): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:410

  #### Returns void

### onRowClick

- onRowClick(index: number): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:412

  #### Parameters

  - ##### index: number

  #### Returns void

### onScroll

- onScroll(event: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:422

  Triggered when the user scrolls on the `<tbody>` element. Emits the `scrollLoad` event.

  #### Parameters

  - ##### event: any

  #### Returns void

### onSelectAll

- onSelectAll(): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:409

  #### Returns void

### onSelectRow

- onSelectRow(event: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:411

  #### Parameters

  - ##### event: any

  #### Returns void

### resetTabIndex

- resetTabIndex(newTabIndex?: number): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:414

  #### Parameters

  - ##### Optional newTabIndex: number

  #### Returns void

### scrollToTop

- scrollToTop(event: any): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:434

  Triggered when the user scrolls on the `<tbody>` element. Emits the `scrollLoad` event.

  #### Parameters

  - ##### event: any

  #### Returns void

### updateSelectAllCheckbox

- updateSelectAllCheckbox(): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:413

  #### Returns void

### Static focus

- focus(element: HTMLElement): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:191

  #### Parameters

  - ##### element: HTMLElement

  #### Returns void

### Static setTabIndex

- setTabIndex(element: HTMLElement, index: 0 | -1): void

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:190

  #### Parameters

  - ##### element: HTMLElement

  - ##### index: 0 | -1

  #### Returns void

### Static skeletonModel

- skeletonModel(rowCount: number, columnCount: number): TableModel

- - Defined in node_modules/carbon-components-angular/table/table.component.d.ts:189

  Creates a skeleton model with a row and column count specified by the user

  Example:

      this.model = Table.skeletonModel(5, 5);

  #### Parameters

  - ##### rowCount: number

  - ##### columnCount: number

  #### Returns TableModel

Generated using TypeDoc