DataTables Integration: WildflowerJS Demo

⚡

Live Demo

Interactive

★	Name	Role	Salary

Employees:

Payroll:

Favorites:

Components Inside Table Cells

Click the stars to toggle favorites. Each ★ is a WildflowerJS component rendered by DataTables. After each draw, wildflower.scan('#employees') initializes the components in new rows. Try sorting or paging. DataTables redraws the DOM and scan seamlessly re-initializes each star. No virtual DOM conflicts to debug.

📄

The Entire Integration

19 lines

Component Definition

wildflower.component('datatable-demo', {
  state: { employees: [...] },

  init() {
    this._datatable = new DataTable(this.$el('#employees').el, {
      data: this.employees, columns: [...]
    });
    this._datatable.on('draw', () => wildflower.scan('#employees'));
  },

  destroy() {
    if (this._datatable) this._datatable.destroy();
  },

  watch: {
    employees(data) {
      if (!this._datatable) return;
      const order = this._datatable.order();
      this._datatable.clear().rows.add(data).order(order).draw();
    }
  }
});

HTML (Standard Table)

<div data-component="datatable-demo">
  <table id="employees">
    <thead>...</thead>
    <tbody></tbody>  <!-- DataTables owns this -->
  </table>
</div>

Why does this just work?

WildflowerJS has no virtual DOM. DataTables directly manipulates the real DOM. There's no conflict, no adapter layer, no wrapper package to install. Use this.$el().el to get raw DOM elements for library init, watch to sync state changes, and destroy for cleanup.

Compare to React/Vue

React requires datatables.net-react. Vue requires datatables.net-vue3. Each wrapper must bridge virtual DOM reconciliation with DataTables' direct DOM access. WildflowerJS needs nothing; standard DataTables docs apply directly.