DataTables

DataTables for WireBootstrap

Displaying data in HTML tables is a staple display for any web application. The DataTables plugin adds advanced features to any HTML table.

DataTables for WireBootstrap brings DataTables into the WireBootstrap framework.

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.

npm install @wirebootstrap/wire-datatables

DataTables for WireBootstrap will load the DataTables JavaScript file from a CDN if it's not found on the page. It will also load the DataTable CSS file from the same CDN.

Class

DataTables for WireBootstrap extends the 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.

const myTable = new wire.datatables();

Render

Render the component using an HTML table element.

JavaScript

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

Web Components

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

React

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

Vue

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

Angular

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