> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/pro-pack/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/pro-pack/datatables.md).

# DataTables

![DataTables for WireBootstrap](/files/-ML0S5RzKxTkZ9bhg0S8)

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.

![](/files/-MLUA1p_h9zUfyGiwpdL)

## 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 %}