opd-datagrid
v0.0.7
Published
Simple datagrid
Downloads
452
Readme
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% |