# DataTables

![DataTables for WireBootstrap](https://795937403-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGjmp6bcmNAsAEW4hIY%2F-ML0RUrZkXWYaYPj1q0F%2F-ML0S5RzKxTkZ9bhg0S8%2Fimage.png?alt=media\&token=6d11d6be-df8c-4b67-b3af-a76a6018f01e)

Displaying data in HTML tables is a staple display for any web application.  The  [DataTables](https://datatables.net) plugin adds advanced features to any HTML table.

DataTables for WireBootstrap brings DataTables into the WireBootstrap framework.

![](https://795937403-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGjmp6bcmNAsAEW4hIY%2F-MLU9VE-_O4MjvpZS7ul%2F-MLUA1p_h9zUfyGiwpdL%2Fimage.png?alt=media\&token=a75d4b34-e2b3-4218-97fe-d7c77d6dad83)

## Installation

The DataTables for WireBootstrap library is located in `wire-datatables.js`.  This and other other related files can be installed from the NPM package registry at`@wirebootstrap/wire-datatables`.

```javascript
npm install @wirebootstrap/wire-datatables
```

DataTables for WireBootstrap will load the DataTables JavaScript file from a [CDN](https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js) if it's not found on the page.   It will also load the DataTable CSS file from the same [CDN](https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css).

## Class

DataTables for WireBootstrap extends the [wire.ui.component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) class.  As such, it inherits all the base functionality of that class.

To create a new instance of the DataTables for WireBootstrap component, use the `wire.datatables` class.

```javascript
const myTable = new wire.datatables();
```

## Render

Render the component using an HTML `table` element.

{% tabs %}
{% tab title="JavaScript" %}

```html
<table id="table" class="table table-hover table-striped"></table>
<script>
    new wire.datatables().render("#table", {});
</script>
```

{% endtab %}

{% tab title="Web Components" %}

```html
<wire-datatables wr-config="" css="table-hover table-striped"></wire-da
```

{% endtab %}

{% tab title="React" %}

```html
<WireComponent component="wire.datatables" config={}>
    <table className="table table-hover table-striped"></table>
</WireComponent>
```

{% endtab %}

{% tab title="Vue" %}

```html
<table 
    wire-component="wire.datatables" 
    v-wire-config="" 
    class="table table-hover table-striped">
</table>
```

{% endtab %}

{% tab title="Angular" %}

```html
<table 
    wire-component="wire.datatables" 
    [config]="" 
    class="table table-hover table-striped">
</table >
```

{% endtab %}
{% endtabs %}


---

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