> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/wirebootstrap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/wirebootstrap/working-with-datatables/columns.md).

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