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.

var table = new eb.data.DataTable([ 
    {product: "apples", order: "PRN001", quantity: 10},
    {product: "oranges", order: "PRN002", quantity: 15},
    {product: "apples", order: "PRN003", quantity: 20}    
]);
    
 
table.addColumn("owner").value("Amy Peters");

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.

...

table.addColumn("moreQuantity").calc((row) => {
    return row["quantity"] * .1;
});

Index

Use the index method to add a new column that contains the index position for each row.

...

table.addColumn("identity_column").index();

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.

...

table.addColumn("owner").title("Product Owner");

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.

...

table.addColumn("productOwner");

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.

...

table.addColumn("quantity").format("N2");

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.

...

table.addColumn("date_field").format((row) => {
    return moment(row["date_field"]).format("MM-DD-YYY");
});

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.

...

table.addColumn("product_detail").type("html").calc((row) => {
    return "<button class\"btn btn-primary\" " +
        "onclick=\"detail('{0}')\">Product Detail</button>".format(row.product);
});

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.

...

let column = table.getColumn("order");

column.Title = "Order Number";

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.

...

table.removeColumn("order");

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.

...

table.renameColumn("order", "orderNumber");

For more on adding and maintaining columns in a data table, visit the DataTables reference page.