Sterling specific table component

Warning: This component will be deprecated in the future in favour of a spec compliant ai-table component

Example:

    <sc-table></sc-table>

### Hierarchy

- Table
  - SCTableComponent

## Index

### 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

### 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 SCTableComponent(elementRef: ElementRef<any>, applicationRef: ApplicationRef, i18n: I18n): SCTableComponent

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

  Creates an instance of Table.

  #### Parameters

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

  - ##### applicationRef: ApplicationRef

  - ##### i18n: I18n

  #### Returns SCTableComponent

## Properties

### Protected _checkboxHeaderLabel

_checkboxHeaderLabel: Overridable

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

### Protected _checkboxRowLabel

_checkboxRowLabel: Overridable

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

### Protected _endOfDataText

_endOfDataText: Overridable

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

### Protected _expandButtonAriaLabel

_expandButtonAriaLabel: Overridable

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

### Protected _filterTitle

_filterTitle: Overridable

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

### Protected _isDataGrid

_isDataGrid: boolean

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

### Protected _model

_model: TableModel

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

### Protected _scrollTopText

_scrollTopText: Overridable

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

### Protected _sortAscendingLabel

_sortAscendingLabel: Overridable

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

### Protected _sortDescendingLabel

_sortDescendingLabel: Overridable

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

### Protected applicationRef

applicationRef: ApplicationRef

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

### columnDraggedHoverIndex

columnDraggedHoverIndex: number

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

### columnDraggedPosition

columnDraggedPosition: string

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

### Protected columnResizeMouseX

columnResizeMouseX: number

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

### Protected columnResizeWidth

columnResizeWidth: number

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

### columnsDraggable

columnsDraggable: boolean

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

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:232

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:348

Emits if all rows are deselected.

param

### deselectRow

deselectRow: EventEmitter<Object>

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

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:176

### enableSingleSelect

enableSingleSelect: boolean

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

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:241

### footerTemplate

footerTemplate: TemplateRef<any>

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

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:178

### Protected interactionModel

interactionModel: DataGridInteractionModel

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

### Protected interactionPositionSubscription

interactionPositionSubscription: Subscription

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

### isColumnDragging

isColumnDragging: boolean

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

### isDataGrid

isDataGrid: boolean

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

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:383

### model

model: TableModel

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

`TableModel` with data the table is to display.

### Protected mouseMoveSubscription

mouseMoveSubscription: Subscription

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

### Protected mouseUpSubscription

mouseUpSubscription: Subscription

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

### noBorder

noBorder: boolean

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

### Readonly noData

noData: boolean

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

### Protected positionSubscription

positionSubscription: Subscription

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

### rowClick

rowClick: EventEmitter<number>

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

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:368

Emits when table requires more data to be loaded.

### scrollLoadDistance

scrollLoadDistance: number

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

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:342

Emits if all rows are selected.

param

### selectAllCheckbox

selectAllCheckbox: boolean

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

Controls if all checkboxes are viewed as selected.

### selectAllCheckboxSomeSelected

selectAllCheckboxSomeSelected: boolean

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

Controls the indeterminate state of the header checkbox.

### selectRow

selectRow: EventEmitter<Object>

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

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:279

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:216

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:198

Size of the table rows.

### skeleton

skeleton: boolean

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

Set to `true` for a loading table.

### sort

sort: EventEmitter<number>

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

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:243

### sortDescendingLabel

sortDescendingLabel: string | Observable<string>

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

### sortable

sortable: boolean

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

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:264

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:260

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:384

### translations

translations: any

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

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"
    }

## Methods

### columnDragEnd

- columnDragEnd(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

### columnDragEnter

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

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

  #### 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:425

  #### 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:422

  #### 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:426

  #### 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:427

  #### 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:416

  #### 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:415

  #### 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:414

  #### Parameters

  - ##### event: any

  - ##### column: any

  #### Returns void

### disableDataGridInteractions

- disableDataGridInteractions(): void

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

  #### Returns void

### doSort

- doSort(index: number): void

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

  #### Parameters

  - ##### index: number

  #### Returns void

### enableDataGridInteractions

- enableDataGridInteractions(): void

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

  #### Returns void

### getCheckboxHeaderLabel

- getCheckboxHeaderLabel(): Observable<string>

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

  #### Returns Observable<string>

### getCheckboxRowLabel

- getCheckboxRowLabel(): Observable<string>

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

  #### Returns Observable<string>

### getEndOfDataText

- getEndOfDataText(): Observable<string>

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

  #### Returns Observable<string>

### getExpandButtonAriaLabel

- getExpandButtonAriaLabel(): Observable<string>

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

  #### Returns Observable<string>

### getFilterTitle

- getFilterTitle(): Observable<string>

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

  #### Returns Observable<string>

### getScrollTopText

- getScrollTopText(): Observable<string>

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

  #### Returns Observable<string>

### getSelectionLabelValue

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

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

  #### Parameters

  - ##### row: TableItem[]

  #### Returns { value: any }

  - ##### value: any

### getSortAscendingLabel

- getSortAscendingLabel(): Observable<string>

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

  #### Returns Observable<string>

### getSortDescendingLabel

- getSortDescendingLabel(): Observable<string>

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

  #### Returns Observable<string>

### ngAfterViewInit

- ngAfterViewInit(): void

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

  #### Returns void

### ngOnDestroy

- ngOnDestroy(): void

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

  #### Returns void

### onDeselectAll

- onDeselectAll(): void

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

  #### Returns void

### onRowClick

- onRowClick(index: number): void

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

  #### Parameters

  - ##### index: number

  #### Returns void

### onScroll

- onScroll(event: any): void

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

  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:408

  #### Returns void

### onSelectRow

- onSelectRow(event: any): void

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

  #### Parameters

  - ##### event: any

  #### Returns void

### resetTabIndex

- resetTabIndex(newTabIndex?: number): void

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

  #### Parameters

  - ##### Optional newTabIndex: number

  #### Returns void

### scrollToTop

- scrollToTop(event: any): void

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

  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:412

  #### Returns void

### Static focus

- focus(element: HTMLElement): void

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

  #### 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:189

  #### 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:188

  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