class="bootstrap"
on any sortable-table to apply.
Start using it!
Start simple and use DOM to configure the grid:Or use Javascript attributes:
Or take advanced control with custom templates, 2-way data binding, and a remote datasource:
Attribute | Options | Default | Description |
---|---|---|---|
args |
object | {} |
Custom meta-data to be made available in templates |
cellTemplate |
string | null |
See Table § cellTemplate |
checkbox |
boolean | false |
Renders a checkbox column as first column, facilitating row selection. |
columns |
array | [] |
Columns to display, with options. If [] , columns will be computed from data . See Columns |
data |
array | [] |
Data rows |
dataSize |
int | 0 |
Size of data , greater than or equal to length if paging enabled |
disableColumnMove |
boolean | false |
Disables columns from being drag-and-dropped into different positions. Drag-and-drop will be automatically disabled if entire row templates (rowTemplate or rowEditorTemplate ) are used. CSS styling using :nth-of-type will likely break unless this is set to true. |
filterTemplate |
string | null |
Sets a template to use to enable row filtering. See § Row Filters. |
filterOps |
array | =, <, > |
Operations for filters. Internal filtering supports: [ "=", "<", "≤", ">", "≥" ] but custom dataSource are free to implement anything.Also supports JSON array: [{title:"string",op:"string",html:"string"}] , allowing button title and html to be set.
|
footerTemplate |
string | null |
See Table § footerTemplate |
grid |
boolean | false |
Parameter to toggle between row/grid style in article theme |
headerTemplate |
string | null |
See Table § headerTemplate |
loading |
boolean | false |
Is set to true if data is being retrieved by an external datasource |
multiRowEdit |
boolean | false |
Multiple rows can be part of a single edited and undo. |
multiSelect |
boolean | false |
Multiple rows can be selected |
page |
int | 1 |
Number of pages to skip, pageSize * (page-1) records skipped. |
pageSize |
int | -1 |
Maximum number of records to display, -1 is all records. |
rowEditorTemplate |
string | null |
See Table § rowEditorTemplate |
rowSelection |
boolean | false |
Enable user interactive row selection |
rowTemplate |
string | null |
See Table § rowTemplate |
selected |
object | null |
Element of data (if !multiSelect ) |
selected |
array | [] |
Elements of data (if multiSelect ) |
sortColumn |
string | null |
Current sorted column.name |
sortDescending |
boolean | false |
Current sorted column sort direction |
userSort |
boolean | false |
Disables built in sort and makes rows reorderable via user drag-and-drop |
Input format for data
rows is an array of objects, where data for each column is a property of the row object.
Attribute | Options | Default | Description |
---|---|---|---|
args |
object | {} |
Custom meta-data to be made available in templates |
cellTemplate |
string | null |
See Column § cellTemplate |
datatype |
string | null |
Optional specification of type of data in the column. |
footerTemplate |
string | null |
See Column § footerTemplate |
formula |
function | null |
Single parameter row , return will override any value for property in data , as well as be used for sorting |
headerTemplate |
string | null |
See Column § headerTemplate |
name |
string | required | Name of row property |
sortable |
boolean | null |
If false , column cannot be sorted by clicking on the column header. |
title |
string | name |
Text to display in column header |