Component which allow to create basic data tables in simple and clear way.
New features will be implemented soon.
Inputs
Input
Type
Default
Description
pageSize
number
10
Defines number of elements per page.
lazy
boolean
false
Determines if table should load data lazily
data
array or LazyPageData
N/A
Defines all data displayed in table or on current page in case of lazy loading. Pass array for eager table or LazyPageData in lazy case.
LazyPageData contains array of data displayed on opened page and number of total rows.
selectionMode
string
N/A
If defined enables table row selection. Accepted values:
"single" allow to select single row. Fires SelectionEvent with selected and unselected row data and
highlights row.
"multi" allow to select multiple rows. Fires SelectionEvent with selected or unselected row data and
highlights rows.
"dblclick" allow to select single row by double click. Fires SelectionEvent with selected row data.
selection
array
N/A
Defines initial selection. Can be used with single and multi mode
availablePageSizes
array of number
N/A
If defined table display option to select page size. selection=[5, 10, 15]
tableClasses
string
.table
Allow to define bootstrap table styles like .table-striped .table-bordered .table-hover .table-condensed
.table-responsiv.
It is possible to use multiple styles separated with spaces tableClasses="table-striped table-bordered
table-hover" or use your own styles.
Outputs
Output
Type
Description
onLazy
EventEmitter of LazyLoadEvent
In case of lazy loading emits LazyLoadEvent that indicates new page data should be loaded.
Event defines requested page, number of rows and additional restraints.
rowSelection
EventEmitter of SelectionEvent
Emits SelectionEvent event when row is selected. Look selectionMode input for more details.
rowEdit
EventEmitter of EditEvent
Emits EditEvent event when user edit cell. Contains edited row data, edited field name, old and new value.
Defining columns
Column definition is done by using a2-column selector.
Input
Type
Description
header
string
Defines column name
content
string
Defines name of field which will be displayed in column.
sortBy
string
If present enables sorting for given column. Defines name of field to sort by.
filterBy
number
If present enables filtering for given column. Defines name of field to filter by.
editable
boolean
If true enables value edition for given column.
Defining footer and header
Footer and header definition is done by using a2-header and a2-footer selectors.
Types
data - data to be displayed on current page
totalRows - number of total results for given restraints
page - requested page
rows - requested number of rows
restraints - data restraints (filtering and ordering)
orderBy - contains ordering information
filterBy - contains filtering information
field - name of field to order by.
order - 1 for ASC and -1 for DESC
Contains filtering data. Field name indicates name of field that should be filtered.
Value contains filter value.