<dy-table>
A table component that displays data in rows and columns. It supports features like selectable rows, tooltips, and customizable column widths.
Example
Loading...
<dy-table
.columns=${ [ {"title":"Name","dataIndex":"name","width":"20%"}, { "title": "Email", "dataIndex": "email", "tooltip": "Tooltip" } ] }
.data=${ [ {"name":"Foo","email":"foo@bar.com"}, {"name":"Bar","email":"bar@foo.com"} ] }
.selectable=${true}
@select=${(evt) => evt.target.selection = evt.detail}></dy-table>
API
DuoyunTableElement
Shadow DOM; Extends DuoyunScrollBoxElement
DuoyunTableElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
caption(caption) |
Yes | string |
headless(headless) |
Yes | boolean |
noData(no-data) |
Yes | string |
selectable(selectable) |
Yes | boolean |
selection |
Yes | K[] |
selectionContainer |
Yes | HTMLElement |
select |
Emitter<K[]> |
|
itemclick |
Emitter<T> |
|
itemcontextmenu |
Emitter<ItemContextMenuEventDetail<T>> |
|
columns |
Yes | Column<T>[] |
data |
Yes | T[] | (T | undefined)[] |
getRowStyle |
Yes | (record: T) => StyleObject |
rowKey |
Yes | string | string[] |
getKey |
Yes | (record: T) => K |
expandedRowRender |
Yes | (record: T) => undefined | string | TemplateResult |
getActions |
Yes | (record: T, activeElement: HTMLElement) => MenuOrMenuObject |
expand |
Emitter<T> |
DuoyunTableElement Instance Methods
| Method | Type |
|---|---|
appendSelection |
(items: (T | undefined)[]) => void |
removeSelection |
(items: (T | undefined)[]) => void |
DuoyunTableElement Other
| Type | Value |
|---|---|
| Event | select, itemclick, itemcontextmenu, expand |
| Slot | no-data |
| Part | table, th, td, tr, side |
DuoyunScrollBoxElement
Extends TapScrollBoxElement
TapScrollBoxElement
Extends TapScrollBaseElement
TapScrollBaseElement
Shadow DOM; Extends TapResizeBaseElement
TapScrollBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
disableScrollMask(disable-scroll-mask) |
Yes | boolean |
TapScrollBaseElement Other
| Type | Value |
|---|---|
| CSS State | top-overflow, right-overflow, bottom-overflow, left-overflow |
TapResizeBaseElement
Extends GemElement
TapResizeBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
resize |
Emitter<ResizeDetail> |
|
resizeThrottle |
Yes | boolean |
borderBoxSize |
{ blockSize: number; inlineSize: number; } |
|
contentRect |
{ x: number; y: number; height: number; width: number; } |
TapResizeBaseElement Other
| Type | Value |
|---|---|
| Event | resize |