const myTable = new wire.datatables().render("#my-table", {
data: salesData
});
const myChart = new wire.chartjs().render("#my-chart", {
data: salesData
});
Wire Components
Wire Themes
<!-- This ... -->
<div class="kpi theme-header">
<div class="theme-label">Sales</div>
<div class="theme-bold">20,000</div>
<div class="theme-success icon-increase"></div>
</div>
// ... Becomes this
const kpi = new kpi().render("#my-kpi", {
data: salesData
});
<!-- Angular -->
<div wire-component="wire.datatables"></div>
<!-- React -->
return <WireComponent component="wire.datatables"></WireComponent>;
<!-- Vue.js -->
<div wire-component="wire.datatables"></div>
Web Frameworks
Wire Data Connectors
const salesforce = new wire.data.DataSource("salesforce");
const contacts = await wire.data.select().from("Contact")
.execAsync(salesforce);
const sql = new wire.data.DataSource("sql");
const customers = await wire.data.select().from("SalesTable")
.execAsync(sql);
const powerBI = new wire.data.DataSource("power-bi");
const dashboards = await wire.data.select().from("dashboards")
.execAsync(powerBI);
const dashboard = dashboards.first();
const tile = new wire.pbiTile().render("#tile", {
dashboardId: dashboard.id,
tile: "Opportunity Size"
});
Wire Integrations
Wire Dashboards
const filter = new wire.select2().render("#product-filter", {
data: salesData
});
const chart = new wire.chartjs().render("#sales-chart", {
data: salesData
});
Extend WireBootstrap
