new DataGrid()
- Source:
Members
actions :Array.<Column>
Type:
- Array.<Column>
- Source:
btnFirst :HTMLInputElement
Type:
- HTMLInputElement
- Source:
btnLast :HTMLInputElement
Type:
- HTMLInputElement
- Source:
btnNext :HTMLInputElement
Type:
- HTMLInputElement
- Source:
btnPrev :HTMLInputElement
Type:
- HTMLInputElement
- Source:
columns :Array.<Column>
Type:
- Array.<Column>
- Source:
data :Array
The grid displays that data
Type:
- Array
- Source:
defaultColumn
- Source:
defaultOptions
- Source:
inputPage :HTMLInputElement
Type:
- HTMLInputElement
- Source:
options :Options
Type:
- Source:
originalData :Array
We store the original data in this
Type:
- Array
- Source:
selectAll :HTMLInputElement
Type:
- HTMLInputElement
- Source:
selectPerPage :HTMLSelectElement
Type:
- HTMLSelectElement
- Source:
table :HTMLTableElement
Type:
- HTMLTableElement
- Source:
toggleSelectAll :EventListenerOrEventListenerObject
Type:
- EventListenerOrEventListenerObject
- Source:
touchmove :EventListenerOrEventListenerObject
Type:
- EventListenerOrEventListenerObject
- Source:
touchstart :EventListenerOrEventListenerObject
Type:
- EventListenerOrEventListenerObject
- Source:
(static) observedAttributes
- Source:
Methods
changePerPage()
This is the callback for the select control
- Source:
columnsLength(visibleOnly) → {Number}
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
visibleOnly |
Boolean | false |
- Source:
Returns:
- Type
- Number
configureUi()
Global configuration and renderTable
This should be called after your data has been loaded
- Source:
convertColumns(columns) → {Array.<Column>}
Parameters:
| Name | Type | Description |
|---|---|---|
columns |
Object | Array |
- Source:
Returns:
- Type
- Array.<Column>
createColumnHeaders(thead)
Create the column headers based on column definitions and set options
Parameters:
| Name | Type | Description |
|---|---|---|
thead |
HTMLTableSectionElement |
- Source:
getSelection(key) → {Array}
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
key |
String | null | Return a specific key (eg: id) instead of the whole row |
- Source:
Returns:
- Type
- Array
loadData() → {Promise}
- Source:
Returns:
- Type
- Promise
perPageChanged()
This is the actual event triggered on attribute change
- Source:
perPageValuesChanged()
Populate the select dropdown according to options
- Source:
removeRow(value, key)
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
value |
any | null | Value to remove. Defaults to last row. |
key |
String | null | The key of the item to remove. Defaults to first column |
- Source:
renderBody()
Render the data as rows in tbody
It will call paginate() at the end
- Source:
renderHeader()
Create table header
- One row for the column headers
- One row for the filters
- Source:
sortData(col)
Data will be sorted then rendered using renderBody
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
col |
Element | null | The column that was clicked or null to use current sort |
- Source:
startColIndex() → {Number}
Returns the starting index of actual data
- Source:
Returns:
- Type
- Number
(static) applyColumnDefinition(el, definition)
Parameters:
| Name | Type | Description |
|---|---|---|
el |
HTMLElement | |
definition |
Object |
- Source:
(static) registerPlugins(list)
Parameters:
| Name | Type | Description |
|---|---|---|
list |
Plugins |
- Source:
(static) registeredPlugins() → {Plugins}
- Source:
Returns:
- Type
- Plugins
(static) setLabels(v)
Parameters:
| Name | Type | Description |
|---|---|---|
v |
Object |
- Source:
(static) unregisterPlugins(plugin)
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
plugin |
String | null |
- Source: