WaveMaker - Widgets API Documentation
  1. Classes
  2. Table

File

projects/components/widgets/data/table/src/table.component.doc.ts

Description

The wmTable is the data grid used to display data in a tabular manner. wmTable can be bound to variables and display the data associated with them.

Index

Methods
Inputs

Methods

addRow
addRow()

This method is used to add a new row

Returns : void
cancelRow
cancelRow()

This method is used to cancel a row edit/ new operation

Returns : void
clearFilter
clearFilter(skipFilter?: boolean)

This method is used to clear the filters applied on data table.

Parameters :
Name Type Optional Description
skipFilter boolean Yes

If set to true, filter call is not triggred. Else, filter call is triggered with cleared filters.
Returns : void
deleteRow
deleteRow(event?: MouseEvent)

This method is used to delete a row

Parameters :
Name Type Optional Description
event MouseEvent Yes

DOM event
Returns : void
deselectItem
deselectItem(item: Object | number)

This method is used to deselect the item/ row in the Data Table

Parameters :
Name Type Optional Description
item Object | number No

item can be row index ir whole row object
Returns : void
editRow
editRow(event?: MouseEvent)

This method is used to edit a row in the Data Table

Parameters :
Name Type Optional Description
event MouseEvent Yes

DOM event
Returns : void
hideEditRow
hideEditRow()

This method is used to hide the current edit/ new row and go back to view mode

Returns : void
onBeforedatarender
onBeforedatarender(widget: any, $data: any, $columns: any)

This event will be called the before the data is rendered in the Data Table

Parameters :
Name Type Optional Description
widget any No

Instance of the widget
$data any No

$data has the data to be rendered in the current page of data table
$columns any No

columns definition of the data table
Returns : void
onBeforeformrender
onBeforeformrender($event: MouseEvent, widget: any, row: any, $operation: string)

This event is fired on the edit of a row and before the inline form is rendered.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

row has the data of the row being edited/ inserted
$operation string No

$operation value is 'new' for new row and 'edit' when row being edited.
Returns : void
onBeforerowdelete
onBeforerowdelete($event: MouseEvent, widget: any, row: any, options: any)

This event is fired before a record is deleted in the Data Table.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

row has the data of the row being edited/ inserted
options any No

extra options can be passed by user here. Ex: setting options.period = true will send temporal call
Returns : void | boolean

if the callback returns false, delete is stopped. Anything else, delete continues with modified data.
onBeforerowinsert
onBeforerowinsert($event: MouseEvent, widget: any, row: any, options: any)

This event will be called before a new record is inserted in the underlying data entity.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

response returned from the service call
options any No

extra options can be passed by user here. Ex: setting options.period = true will send temporal call
Returns : void | boolean

if the callback returns false, insert is stopped. Anything else, insert continues with modified data.
onBeforerowupdate
onBeforerowupdate($event: MouseEvent, widget: any, row: any, options: any)

This event will be called before a record is updated to the underlying data entity.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

response returned from the service call
options any No

extra options can be passed by user here. Ex: setting options.period = true will send temporal call
Returns : void | boolean

if the callback returns false, update is stopped. Anything else, update continues with modified data.
onClick
onClick($event: MouseEvent, widget: any, row: any)

This event handler is called whenever the widget is clicked.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

row has the data of the row which is clicked and the index of the row
Returns : void
onColumndeselect
onColumndeselect($event: MouseEvent, $data: any)

This event will be called when a column in Data Table is deselected.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
$data any No

$data has the object containing data and colDef. data has the selected column data. colDef has the selected column definition.
Returns : void
onColumnselect
onColumnselect($event: MouseEvent, $data: any)

This event will be called when a column in Data Table is selected.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
$data any No

$data has the object containing data and colDef. data has the selected column data. colDef has the selected column definition.
Returns : void
onDatarender
onDatarender(widget: any, $data: any)

This event will be called when the data is rendered in the Data Table.

Parameters :
Name Type Optional Description
widget any No

Instance of the widget
$data any No

$data has the data rendered in the current page of data table
Returns : void
onDeselect
onDeselect($event: MouseEvent, widget: any, row: any)

This event will be called when a row from Data Table is deselected.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

row has the data of the row which is clicked and the index of the row
Returns : void
onError
onError($event: MouseEvent, widget: any, $data: any, $operation: string)

This event will be called after the edit/insert/delete operation returns a failure response.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
$data any No

response returned from the service call
$operation string No

$operation value is 'new' for new row and 'edit' when row being edited
Returns : void
onExport
onExport($data: any)

This event will be called before downloading the file. Any data changes like file format changes, field expression, size changes etc can be performed here. Returning false from the script will stop the file download.

Parameters :
Name Type Optional Description
$data any No

inputData containing exportType, columns, fileName. Expression and header can be modified.
Returns : void | boolean

Returning false from the script will stop the file download. Else, file is dowloaded with modfiied $data options
onFormrender
onFormrender($event: MouseEvent, widget: any, formWidgets: any, $operation: string)

This event is fired after the inline form is rendered.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
formWidgets any No

formWidgets has the scopes of all the widgets in the form. Individual widget can be accessed as formWidgets.[fieldName]
$operation string No

$operation value is 'new' for new row and 'edit' when row being edited
Returns : void
onHeaderonClick
onHeaderonClick($event: MouseEvent, $data: any)

This event will be called when the Data Table header is clicked.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
$data any No

$data has the column definition data of the corresponding clicked header
Returns : void
onHide
onHide()

This event will be called when the Data Table is hidden.

Returns : void
onRowclick
onRowclick($event: MouseEvent, widget: any, row: any)

This event will be called when a row in Data Table is clicked.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

$data has the data of the row which is clicked and the index of the row
Returns : void
onRowdblclick
onRowdblclick($event: MouseEvent, widget: any, row: any)

This event will be called when a row in Data Table is double-clicked.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

$data has the data of the row which is clicked and the index of the row
Returns : void
onRowdelete
onRowdelete($event: MouseEvent, widget: any, row: any)

This event will be called when a record is deleted from the underlying data entity.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

response returned from the service call
Returns : void
onRowinsert
onRowinsert($event: MouseEvent, widget: any, row: any)

This event will be called after a new record is inserted in the underlying data entity.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

response returned from the service call
Returns : void
onRowupdate
onRowupdate($event: MouseEvent, widget: any, row: any)

This event will be called after a record is updated to the underlying data entity.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

response returned from the service call
Returns : void
onSelect
onSelect($event: MouseEvent, widget: any, row: any)

This event will be called when a row from Data Table is selected.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the widget
row any No

row has the data of the row which is clicked and the index of the row
Returns : void
onSetrecord
onSetrecord($event: MouseEvent, $data: any)

This event handler is called when the data is set using the pagination.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
$data any No

response returned from the service call
Returns : void
onShow
onShow()

This event will be called when the Data Table is shown.

Returns : void
onSort
onSort($event: MouseEvent, $data: any)

This event will be called when the Data Table header is clicked to sort by a particular column.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
$data any No

$data has sorted data information returned from server
Returns : void
onTap
onTap($event: TouchEvent, $data: any)

Callback function which will be triggered when the tap event is triggered on a widget.

Parameters :
Name Type Optional Description
$event TouchEvent No

DOM event on which call back is triggered
$data any No

$data has the data of the row which is clicked and the index of the row
Returns : void
redraw
redraw(forceRender?: boolean)

This method is used to redraw the data table

Parameters :
Name Type Optional Description
forceRender boolean Yes

If set to true, table is re-rendered. Else, columns are readjusted.
Returns : void
refreshData
refreshData(isSamePage?: boolean)

This method is used to refresh the data in data table

Parameters :
Name Type Optional Description
isSamePage boolean Yes

If set to true, current page data is fetched. Else, first page data is fetched.
Returns : void
saveRow
saveRow()

This method is used to save a row

Returns : void
selectItem
selectItem(item: Object | number)

This method is used to select the item/ row.

Parameters :
Name Type Optional Description
item Object | number No

item can be row index ir whole row object
Returns : void

Inputs

class
Type : string

Class of the widget.
confirmdelete
Type : string
Default value : 'Are you sure you want to delete this?'

A message to show in a confirm dialog so that the user can confirm that they want to delete this row. Leave blank to delete without asking the user to confirm.

Bindable: true
dataset
Type : any

This property specifies the datasource from which data is fetched for the data table.

Bindable: true
deletecanceltext
Type : string
Default value : 'Cancel'

This text will be displayed on cancel button for delete confirm dialog.

Bindable: true
deletemessage
Type : string
Default value : 'Record deleted successfully'

This message will be displayed, when data is deleted by table.

Bindable: true
deleteoktext
Type : string
Default value : 'Ok'

This text will be displayed on confirm button for delete confirm dialog.

Bindable: true
enablecolumnselection
Type : boolean
Default value : false

If this property is enabled, columns in data table can be selected by clicking the column header cells.
enablesort
Type : boolean
Default value : true

If this property is enabled, data table can be sorted by clicking the column header cells.
errormessage
Type : string

This message will be displayed, if there is an error during the CRUD operation.

Bindable: true
exportdatasize
Type : number
Default value : 100

This property specifies the number of records to be exported.
exportformat
Type : string

Export menu is shown in the header with selected export format options. Data will be downloaded in respective format selected in the export menu by user.

Allowed Values: EXCEL, CSV
filtermode
Type : string

Enable filter in Data Table widget.

Allowed Values: search, multicolumn

search: Search box is displayed at top of the Data Table widget for filtering data.

multicolumn: This option enables multi-column filtering for rows. In columns tab, filter can be disabled/ enabled for specific columns.
formposition
Type : string

This property defines where to display the new row form on click of the new button.

Allowed Values: top, bottom
gridclass
Type : string
Default value : 'table-bordered table-striped table-hover'

Classes will be applied to the data table.
gridfirstrowselect
Type : boolean
Default value : false

If this property is enabled, the first record of the data table will be selected automatically when the data table is displayed.
iconclass
Type : string

Icon Class to be shown in data table header.

Bindable: true
insertmessage
Type : string
Default value : 'Record added successfully'

This message will be displayed, when data is inserted.

Bindable: true
loadingdatamsg
Type : string
Default value : 'Loading...'

This message will be displayed when waiting for data to load.

Bindable: true
loadingicon
Type : string
Default value : 'fa fa-circle-o-notch fa-spin'

This property can assign an icon that is shown while loading records.

Bindable: true
multiselect
Type : boolean
Default value : false

On checking this property users can select multiple rows in table.
name
Type : string

Name of the datatable widget.
navigation
Type : string
Default value : 'Basic'

Select the pagination type for the widget.

Allowed Values: Basic, Pager, Classic, None

Basic: This option gives a next and previous arrow along with the page numbers at the bottom of the page.

Pager: This option gives a next and previous buttons at the bottom of the page for pagination.

Classic: A bar with total number of pages and number of items in the current page will be displayed, along with arrows for pagination.

None: No pagination will be provided.
navigationalign
Type : string
Default value : 'left'

This property specifies how the paginator should be aligned horizontally.
nodatamessage
Type : string
Default value : 'No data found.'

This message will be displayed when there is no data to display.

Bindable: true
pagesize
Type : number

This property sets the maximum number of rows to be displayed in the data table per page.
radioselect
Type : boolean
Default value : false

Show a radio column in data table widget. This enables the user to select single row.
rowclass
Type : string

The CSS class provided will be applied on the table row.
rowngclass
Type : string

The CSS class will be applied on the table row based upon the evaluation of given expression.
searchlabel
Type : string
Default value : 'Search'

The placeholder for the search box.
show
Type : boolean
Default value : true

This property will be used to show/hide the data table widget on the web page.

Bindable: true
showheader
Type : boolean
Default value : true

Show/hide header of the data table.
showrecordcount
Type : boolean
Default value : false

This property controls whether the total record count is displayed in the data paginator or not.
showrowindex
Type : boolean
Default value : false

Show row index column in the data table widget. Adds a serial number column for display.
spacing
Type : string
Default value : 'normal'

This property defines spacing inside table.

Allowed Values: normal, condensed

normal: Normal view.

condensed: compact table view.
subheading
Type : string

This property defines the sub heading or title for the widget.

Bindable: true
tabindex
Type : number
Default value : 0

This property specifies the tab order of the data table Widget.
title
Type : string

Title of the data table.

Bindable: true
updatemessage
Type : string
Default value : 'Record updated successfully'

This message will be displayed, when data is updated by data table.

Bindable: true

results matching ""

    No results matching ""