Class DataTable

src/core/components/data-table/data-table-class.js:5–157

import Framework7Class from '../../shared/class.js';

class DataTable extends Framework7Class {
  constructor(app, params = {}) {
    super(params, [app]);

    const table = this;

    const defaults = {};

    // Extend defaults with modules params
    table.useModulesParams(defaults);

    table.params = extend(defaults, params);

    // El
    const $el = $(table.params.el);
    if ($el.length === 0) return undefined;

    table.$el = $el;
    table.el = $el[0];

    if (table.$el[0].f7DataTable) {
      const instance = table.$el[0].f7DataTable;
      table.destroy();
      return instance;
    }

    table.$el[0].f7DataTable = table;

    extend(table, {
      collapsible: $el.hasClass('data-table-collapsible'),
      // Headers
      $headerEl: $el.find('.data-table-header'),
      $headerSelectedEl: $el.find('.data-table-header-selected'),
    });

    // Events
    function handleChange(e) {
      if (e.detail && e.detail.sentByF7DataTable) {
        // Scripted event, don't do anything
        return;
      }
      const $inputEl = $(this);
      const checked = $inputEl[0].checked;
      const columnIndex = $inputEl.parents('td,th').index();

      if ($inputEl.parents('thead').length > 0) {
        if (columnIndex === 0) {
          $el.find('tbody tr')[checked ? 'addClass' : 'removeClass']('data-table-row-selected');
        }
        $el
          .find(`tbody tr td:nth-child(${columnIndex + 1}) input`)
          .prop('checked', checked)
          .trigger('change', { sentByF7DataTable: true });
        $inputEl.prop('indeterminate', false);
      } else {
        if (columnIndex === 0) {
          $inputEl.parents('tr')[checked ? 'addClass' : 'removeClass']('data-table-row-selected');
        }