<dy-table>
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 |
Extends TapScrollBoxElement
Extends TapScrollBaseElement
Shadow DOM; Extends TapResizeBaseElement
| Property(Attribute) |
Reactive |
Type |
disableScrollMask(disable-scroll-mask) |
Yes |
boolean |
| 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
