# Configuration

Use the following configuration options to bind the DataTables for WireBootstrap component.

## Properties

| Name               | Default | Description                                                                                                                                                                                     |
| ------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| datamap            |         | Used to bind data to the component. See [Data Binding](/pro-pack/datatables/data-binding.md) for details.                                                                                       |
| dataTables         |         | The [native configuration](https://datatables.net/reference/option) pass-through for DataTables.  See [DataTables](/pro-pack/datatables/configuration.md#datatables) for an example.            |
| filter             | false   | Turn on column filters. Set to `true` to turn this feature on for all columns. This can also be set to an array of column names to turn this on only for specific columns.                      |
| group              | false   | Determines whether the rows in the table are grouped by the first column                                                                                                                        |
| nonDataColumnsLast | false   | For columns configured manually in `dataTables.columns` that do not contain data, this determines whether they appear at the beginning or end of the list of columns in the grid.               |
| rightAlignNumbers  | false   | Determines whether numeric columns are right-aligned in the table.                                                                                                                              |
| totals             | false   | Determines whether totals are displayed at the bottom of the table.  These include totals on each page as well as grand totals across all pages in a table.  See [Totals](#totals) for details. |

The example below turns on column filters for the table.

```typescript
new wire.datatables().render("#table", {
    ...
    filter: true
});
```

## DataTables

The following example uses the native DataTables configuration [scrollX ](https://datatables.net/reference/option/scrollX)property to control the horizontal scrolling for a table that is too wide for the screen display.

```typescript
new wire.datatables().render("#table", {
    ...
    dataTables: {
        scrollX: true
    }
});
```

## Totals

Use the following properties on the `totals` property for more control over totals in a table.

| Name  | Default | Description                                                                                                                                                                                                     |
| ----- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| table | false   | Grand totals or table level totals for all rows in the table are displayed at the bottom of the table.  The default label is *Total*.                                                                           |
| page  | false   | Sub totals or page level totals display a total of rows visible on a given page in a table.  Page level totals are displayed above label level totals if they are turned on.  The default label is *Sub Total*. |

When the `totals` property is set to `true`, page and table level totals are displayed at the bottom of the table.  

```javascript
new wire.datatables().render("#table", {
    totals: true
});
```

The `table` and/or `page` property can also be set on `totals` for finer control over the totals.   

The example below sets a custom label for table and page level totals.

```javascript
new wire.datatables().render("#table", {    
    totals: {
        page: {label: "Page Total"},
        table: {label: "Grand Total"}
    }
});
```


---

# 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/pro-pack/datatables/configuration.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.