# new Datatable(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myDatatable = document.createElement("a-datatable").init(config)
Or use the shorthand for it:
const myDatatable = createDatatable({
id: "my-table",
color: "#00aaee",
collection: kiss.app.collections["contact"],
// Columns must match the Model's fields
columns: [
{
id: "firstName", // Must match the model's field id
type: "text",
title: "First name",
},
{
id: "lastName",
type: "text",
title: "Last name",
},
{
id: "birthDate",
type: "date",
title: "Birth date"
}
],
// We can define a menu with custom actions
actions: [
{
text: "Group by country and city",
icon: "fas fa-sort",
action: () => $("my-table").groupBy(["Country", "City"])
}
],
// We can add custom methods, and also override default ones
methods: {
// Override the createRecord method
createRecord(model) {
// Create a record from this model
console.log(model)
},
// Override the selectRecord method
selectRecord(record) {
// Show the clicked record
console.log(record)
},
sayHello: () => console.log("Hello"),
}
})
myDatatable.render()
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
config |
object
|
||
collection |
Collection
|
The data source collection |
|
record |
object
|
<optional> |
Record to persist the view configuration into the db |
columns |
Array.<object>
|
<optional> |
Where each column is: {title: "abc", type: "text|number|integer|float|date|button", id: "fieldId", button: {config}, renderer: function() {}} |
color |
string
|
<optional> |
Hexa color code. Ex: #00aaee |
rowHeight |
string
|
<optional> |
CSS row height in pixels. Ex: 40px |
showHeader |
boolean
|
<optional> |
false to hide the header (default = true) |
showColumnType |
boolean
|
<optional> |
true to display an icon in the header indicating the column type (default = false) |
showToolbar |
boolean
|
<optional> |
false to hide the toolbar (default = true) |
showPagerIndex |
boolean
|
<optional> |
false to hide the pager index (default = true) |
showScroller |
boolean
|
<optional> |
false to hide the virtual scroller (default = true) |
showActions |
boolean
|
<optional> |
false to hide the custom actions menu (default = true) |
showLayoutButton |
boolean
|
<optional> |
false to hide the button to adjust the layout (default = true) |
showGroupButtons |
boolean
|
<optional> |
false to hide the button to expand/collapse groups (default = true) |
showGroupHierarchyButton |
boolean
|
<optional> |
false to hide the button to show group hierarchy (default = true) |
showLinks |
boolean
|
<optional> |
false to hide the columns which field type is "link" |
canSearch |
boolean
|
<optional> |
false to hide the search button (default = true) |
canSelect |
boolean
|
<optional> |
false to hide the selection checkboxes (default = true) |
canSort |
boolean
|
<optional> |
false to hide the sort button (default = true) |
canFilter |
boolean
|
<optional> |
false to hide the filter button (default = true) |
canGroup |
boolean
|
<optional> |
false to hide the group button (default = true) |
canEdit |
boolean
|
<optional> |
Can we edit the cells? |
canSelectFields |
boolean
|
<optional> |
Can we select the fields (= columns) to display in the table? (default = true) |
canAddField |
boolean
|
<optional> |
Can we add a field (= column) to the table? |
canEditField |
boolean
|
<optional> |
Can we edit an existing field (= column)? |
canCreateRecord |
boolean
|
<optional> |
Can we create new records from the datatable? |
createRecordText |
boolean
|
<optional> |
Optional text to insert in the button to create a new record, instead of the default model's name |
iconAction |
boolean
|
<optional> |
Font Awesome icon class to display the "open record" symbol. Defaults to "far fa-file-alt" |
actions |
Array.<object>
|
<optional> |
Array of menu actions, where each menu entry is: {text: "abc", icon: "fas fa-check", action: function() {}} |
buttons |
Array.<object>
|
<optional> |
Array of custom buttons, where each button is: {position: 3, text: "button 3", icon: "fas fa-check", action: function() {}} |
width |
number
|
string
|
<optional> |
|
height |
number
|
string
|
<optional> |
this
Generated markup
<a-datatable class="a-datatable">
<div class="datatable-toolbar">
<!-- Datatable toolbar items -->
</div>
<div class="datatable-header-container">
<div class="datatable-header-1st-column">
<!-- Header 1st column -->
</div>
<div class="datatable-header">
<!-- Header other columns -->
</div>
</div>
<div class="datatable-body-container">
<div class="datatable-body-1st-column">
<!-- Body 1st column -->
</div>
<div class="datatable-body">
<!-- Body other columns -->
</div>
</div>
<div class="datatable-virtual-scroller-container">
<div class="datatable-virtual-scroller"></div>
</div>
</a-datatable>
Methods
# goToRecord(recordId) → {number}
Scroll to a chosen record
Parameters:
Name | Type | Description |
---|---|---|
recordId |
string
|
The index of the found record, or -1 if not found
number
# highlightRecord(recordId)
Highlight a chosen record
Parameters:
Name | Type | Description |
---|---|---|
recordId |
string
|
# refresh()
Generic method to refresh / re-render the view
Note: used in dataComponent (parent class) showSearchBar method. This method is invoked to refresh the view after a full-text search has been performed
# async resetColumnsWidth()
Reset all the columns to their default width
# async setColor(newColor)
Update the datatable color (toolbar buttons + modal windows)
Parameters:
Name | Type | Description |
---|---|---|
newColor |
string
|
# setRowHeight(height)
Set the datatable row height
Parameters:
Name | Type | Description |
---|---|---|
height |
number
|
The row height in pixels |
# showColorWindow()
Show the window to adjust the color of a column
# showFieldsWindow()
Show the window just under the fields selector button
# showFilterWindow()
Show the window just under the filter button
# showSortWindow()
Show the window just under the sorting button
# showTutorial()
Show quick tips to onboard the user and explaind the basics
# switchToSearchMode()
Switch to search mode
Show/hide only the necessary buttons in this mode.
# updateLayout()
Update the datatable size (recomputes its width and height functions)