Reference Source
import {Table} from '@adobe/coral-spectrum'
public class | source

Table

Expression Extends:

class Table extends BaseComponent(HTMLTableElement)

A Table component is a container component to display and manipulate data in two dimensions. To define table actions on specific elements, handles can be used. A handle is given a special attribute :

  • [coral-table-select]. Select/unselect all table items.
  • [coral-table-rowselect]. Select/unselect the table item.
  • [coral-table-roworder]. Drag to order the table item.
  • [coral-table-rowlock]. Lock/unlock the table item.

See:

Example:

Markup
<table is="coral-table"></table>
JS constructor
new Coral.Table();

Static Member Summary

Static Public Members
public static

Returns divider options for TableHead, TableBody and TableFoot.

public static

Returns Table variants.

Member Summary

Public Members
public

The body of the table.

public

The columns of the table.

public

The foot of the table.

public

The head of the table.

public

id: *

public

The Collection Interface that allows interacting with the items that the component contains.

public

Specifies aria-label value.

public

Specifies aria-labelledby value.

public

Whether the table rows can be locked/unlocked.

public

Whether multiple items can be selected.

public

Whether the table is orderable.

public

Whether the items are selectable.

public

Returns the first selected item of the table.

public

Returns an Array containing the selected items.

public

The table's variant. See TableVariantEnum.

  • TableVariantEnum.DEFAULT by default.
  • reflected

Method Summary

Public Methods
public

resetLayout(forced: Boolean)

Call the layout method of table component

Static Public Members

public static divider: TableSectionDividerEnum: * source

Returns divider options for TableHead, TableBody and TableFoot.

public static variant: TableVariantEnum: * source

Returns Table variants.

Public Members

public body: TableBody source

The body of the table. Multiple bodies are not supported.

  • content-zone

public columns: TableColumn source

The columns of the table.

  • content-zone

public foot: TableFoot source

The foot of the table.

  • content-zone

public head: TableHead source

The head of the table.

  • content-zone

public id: * source

public items: SelectableCollection source

The Collection Interface that allows interacting with the items that the component contains.

  • read-only

public labelled: String source

Specifies aria-label value.

  • null by default.

public labelledBy: String source

Specifies aria-labelledby value.

  • null by default.

public lockable: Boolean source

Whether the table rows can be locked/unlocked. If rows are locked, they float to the top of the table and aren't affected by column sorting.

  • false by default.
  • reflected

public multiple: Boolean source

Whether multiple items can be selected.

  • false by default.
  • reflected

public orderable: Boolean source

Whether the table is orderable. If the table is sorted, ordering handles are hidden.

  • false by default.
  • reflected

public selectable: Boolean source

Whether the items are selectable.

  • false by default.
  • reflected

public selectedItem: HTMLElement source

Returns the first selected item of the table. The value null is returned if no element is selected.

  • read-only

public selectedItems: Array<HTMLElement> source

Returns an Array containing the selected items.

  • read-only

public variant: String source

The table's variant. See TableVariantEnum.

  • TableVariantEnum.DEFAULT by default.
  • reflected

Public Methods

public resetLayout(forced: Boolean) source

Call the layout method of table component

Params:

NameTypeAttributeDescription
forced Boolean

If true call the layout method immediately, else wait for timeout