0.0.7 • Published 4 years ago
opd-datagrid v0.0.7
opd-datagrid
Simple datagrid
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
columns | -- | Grid will only render data where column name and prop name of data matches | { name: any; header: any; cssClass?: any; }[] | [] |
data | -- | Your data object | any[] | undefined |
hasSelect | has-select | (Optional) Show checkbox select on each row and select all on header row | boolean | false |
multiselect | multiselect | (Optional) Enable multiselect on grid | boolean | true |
selectonrowclick | selectonrowclick | (Optional) Enable select on row click | boolean | false |
Events
| Event | Description | Type |
|---|---|---|
itemSelected | Fires when an item is selected. The selected item is included in the event payload | CustomEvent<any> |
Methods
filter(field: any, searchtext: any, matchAny: boolean) => Promise<void>
Returns
Type: Promise<void>
filterSelected() => Promise<void>
Returns
Type: Promise<void>
getSelectedItems() => Promise<any[]>
Returns
Type: Promise<any[]>
refreshGrid() => Promise<void>
Returns
Type: Promise<void>
sortOnSelected() => Promise<void>
Returns
Type: Promise<void>
updateGrid() => Promise<void>
Returns
Type: Promise<void>
CSS Custom Properties
| Name | Description |
|---|---|
--border-color-header | #ECEDEF |
--border-color-header-bottom | #ECEDEF |
--border-color-item | #ECEDEF |
--border-color-item-bottom | #ECEDEF |
--checkbox-border-color | #C7C7C7 |
--header-color | #3C3C3C |
--header-font-size | 16px |
--header-height | 43px |
--header-padding | 8px |
--item-color | #3C3C3C |
--item-font-size | 14px |
--item-height | 28px |
--item-padding | 8px |
--row-hover-color | #fefaac |
--row-select-color | #fefaac |
--sort-arrow-color | #C7C7C7 |
--table-widht | 100% |