Columns

The columns in a WireBootstrap data table contain meta data about the object field names in the data tables array.  A data table contains methods for maintaining these columns.  Columns can be accessed directly via the Columns property on a data table.
Add Columns
Use the addColumn method on a data table to add a new column. 
In the example below, a new column named owner is added and its value is set to Amy Peters for all rows.
1
var table = new eb.data.DataTable([ 
2
    {product: "apples", order: "PRN001", quantity: 10},
3
    {product: "oranges", order: "PRN002", quantity: 15},
4
    {product: "apples", order: "PRN003", quantity: 20}    
5
]);
6
    
7
 
8
table.addColumn("owner").value("Amy Peters");
Copied!
Calculated Columns
The example above sets a static column value for all rows in the data table.
To add calculated columns use the calc function with a delegate.  In the example below, the new column moreQuantity is set to 10% more than quantity. 
1
...
2
​
3
table.addColumn("moreQuantity").calc((row) => {
4
    return row["quantity"] * .1;
5
});
Copied!
Index
Use the index method to add a new column that contains the index position for each row.
1
...
2
​
3
table.addColumn("identity_column").index();
Copied!
Title
Use the title function to give any column a descriptive title. This will be set into the Title property for the column in the resulting table.
1
...
2
​
3
table.addColumn("owner").title("Product Owner");
Copied!
A data table needs a descriptive Title value for any column.  If one is not supplied, it will automatically create one.  In doing so, it will parse camelCase or PascalCase field names and intelligently capitalize and space accordingly to come up with a friendly title.
In the example below, a title for the productOwner column is not supplied.  In the new table, the title will automatically be Product Owner.
1
...
2
​
3
table.addColumn("productOwner");
Copied!
Number Formatting
To format numeric columns, use the format method with a format specification.  Valid values are C[N], P[N], N[N] where [N] is the number of decimal places.
The following example formats data in the quantity column to a number with two decimal places using format N2.
1
...
2
​
3
table.addColumn("quantity").format("N2");
Copied!
Custom Formatting
The format method can also accept a custom function in order to format data in the column.  
The following example formats a date field called date_field using the third party library moment.js.
1
...
2
​
3
table.addColumn("date_field").format((row) => {
4
    return moment(row["date_field"]).format("MM-DD-YYY");
5
});
Copied!
HTML Columns
Use the type method to specify that the column contains html markup.  
The following example formats an html button column that calls a JavaScript function called detail and passes in the product in that row.  
1
...
2
​
3
table.addColumn("product_detail").type("html").calc((row) => {
4
    return "<button class\"btn btn-primary\" " +
5
        "onclick=\"detail('{0}')\">Product Detail</button>".format(row.product);
6
});
Copied!
Maintenance
Use the getColumn method to get an existing column from a data table.
The following example gets the order column from a data table and sets it's Title property.
1
...
2
​
3
let column = table.getColumn("order");
4
​
5
column.Title = "Order Number";
Copied!
Use the removeColumn method to remove the column from the data table.  This operation will remove the column from the Columns collection and all the data for that column in each row.
1
...
2
​
3
table.removeColumn("order");
Copied!
Use the renameColumn method to change the name of a column in a data table.  This operation will change the name of the column in the Columns collection and also the same property name on each object in every row in the data array.
The following example changes the name of the column order to orderNumber.
1
...
2
​
3
table.renameColumn("order", "orderNumber");
Copied!
For more on adding and maintaining columns in a data table, visit the DataTables reference page.

Working with DataTables - Previous

Rows

Introduction

Last modified 11mo ago

Copy link

Contents