grid-xanf.js

// @flow
import Vue from 'vue';
import component from 'vue-class-component';
import $ from 'jquery';
import datatablesBsInit from 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';

const emptyRenderer = () => '';

datatablesBsInit(window, $);
class Grid extends Vue {
  $el: HTMLElement;
  $scopedSlots: { [key: string]: (props: {}) => any };
  $refs: { table: HTMLTableElement };
  // FIXME: better typing
  config: any;
  dataSource: Function;
  // FIXME: better typing
  grid: { ajax: any, settings: any };

  mounted() {
    const dataTableConfig = { ...this.config };
    const columns = dataTableConfig.columns || [];
    columns.forEach(column => {
      const $slotFn = this.$scopedSlots[column.data];
      if (!$slotFn) return;

      column.render = emptyRenderer;
      column.createdCell = (cell, cellData, rowData) => {
        // eslint-disable-next-line no-new
        new Vue({
          el: cell,
          parent: this,
          functional: true,
          render: h => h('td', null, $slotFn({ value: cellData, row: rowData })),
        });
      };
    });

    // eslint-disable-next-line new-cap
    this.grid = $(this.$refs.table).DataTable({
      serverSide: true,
      ...dataTableConfig,
      ajax: this.dataSource,
    });
  }

  onDataSourceChanged(newAjax) {
    // FIXME: better way to do it?
    this.grid.settings()[0].ajax = newAjax;
    this.grid.ajax.reload();
  }
}
export default component({
  watch: { dataSource: 'onDataSourceChanged' },
  props: { config: Object, dataSource: Function, canAdd: Boolean },
})(Grid);