Constructor

# new Datatable(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 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>

View Source client/ui/data/datatable.js, line 85

Returns:

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

# goToIndex(index)

Scroll to a chosen index

Parameters:

Name	Type	Description
`index`	`number`

View Source client/ui/data/datatable.js, line 444

# goToRecord(recordId) → {number}

Scroll to a chosen record

Parameters:

Name	Type	Description
`recordId`	`string`

View Source client/ui/data/datatable.js, line 433

Returns:

The index of the found record, or -1 if not found

Type: number

# highlightRecord(recordId)

Highlight a chosen record

Parameters:

Name	Type	Description
`recordId`	`string`

View Source client/ui/data/datatable.js, line 422

# 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

View Source client/ui/data/datatable.js, line 399