# 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.

```javascript
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`. 

```javascript
...

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.

```javascript
...

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.

```javascript
...

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`.

```javascript
...

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`.

```javascript
...

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](https://momentjs.com).

```javascript
...

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.  

```javascript
...

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.

```javascript
...

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.

```javascript
...

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`.

```javascript
...

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

For more on adding and maintaining columns in a data table, visit the [DataTables](/wirebootstrap/reference/wire.data/wire.data.datatable.md) reference page.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wirebootstrap.com/wirebootstrap/working-with-datatables/columns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.