Stimulus table controller

table_controller.js

import { Controller } from "stimulus"
import $ from "jquery"

export default class extends Controller {

  static targets = ["filter", "table", "pagination", "row"]

  connect() {
    this.page = Number(this.data.get("page")) || 1;
    this.perPage = Number(this.data.get("per-page")) || 20;
    this.filterRows();
    $(this.filterTargets).filter(':text').on('input', this.filterChanged.bind(this));
    $(this.filterTargets).filter(':checkbox').on('click', this.filterChanged.bind(this));
    $(this.paginationTarget).on('click', this.pageChanged.bind(this));
  }

  pageChanged(event) {
    if ($(event.target).hasClass("disabled")) return;
    const page = $(event.target).data('page');
    if (page == 'prev') { this.page -= 1 }
    else if (page == 'next') { this.page += 1 }
    else this.page = page;
    this.filterRows();
  }

  filterChanged() {
    this.page = 1;
    this.filterRows();
  }

  showRow(row, index, filterValues) {
    const perPage = this.perPage;
    const firstRow = (this.page - 1) * perPage;
    const lastRow = firstRow + perPage;
    // set shouldHide to true if any filter returns true (true in this case means "don't show")
    const shouldHide = filterValues.some((filter) => {
      const rowData = row.data(filter.field);
      if (filter.type == 'search' && rowData && rowData.match && !rowData.match(filter.value)) {
        return true;
      }
      else if (filter.type == 'checkbox' && filter.value && !rowData) {
        return true;
      }
    })
    const isInView = index >= firstRow && index < lastRow;
    return { valid: !shouldHide, show: isInView && !shouldHide };
  }

  filterValues() {
    return this.filterTargets.map((f) => {
      const filter = $(f);
      const field = filter.attr('name');
      let value = filter.val();
      let type = 'search';
      if (filter.is(':checkbox')) {
        type = 'checkbox';
        value = filter.is(':checked')
      }
      return { field, type, value };
    })
  }

  filterRows() {
    const filterValues = this.filterValues();
    let index = 0;
    this.rowTargets.forEach((tableRow) => {
      const results = this.showRow($(tableRow), index, filterValues);
      if (results.valid) index += 1;
      tableRow.style.display = results.show ? "table-row" : "none";
    })
    this.entries = index;
    this.paginate();
  }

  paginate() {
    const allPages = Math.ceil(this.entries / this.perPage);
    const pages = this.calculateVisiblePages(allPages);
    const parent = $(this.paginationTarget);
    parent.html('');
    parent.append(this.navigationEntry("prev", '&lt;', false, this.page == 1));
    let previousPage = null;
    pages.forEach((page) => {
      if (page - previousPage > 1) {
        parent.append(this.navigationEntry('', '...', false, true));
      }
      parent.append(this.navigationEntry(page, page, this.page == page, false));
      previousPage = page;
    })
    parent.append(this.navigationEntry("next", '&gt;', false, this.page == allPages));
  }

  calculateVisiblePages(allPages) {
    const visiblePages = new Set();
    visiblePages.add(1);
    visiblePages.add(this.page);
    if (allPages > 1) {
      visiblePages.add(2);
      visiblePages.add(allPages);
      visiblePages.add(allPages - 1);
    }
    if (this.page > 1) { visiblePages.add(this.page - 1); }
    if (this.page < allPages) { visiblePages.add(this.page + 1); }
    return Array.from(visiblePages).sort((a,b) => a-b);
  }

  navigationEntry(value, label, active, disabled) {
    return `<a data-page="${value}" class="item${active ? " active" : ""}${disabled ? " disabled" : ""}">${label}</a>`
  }

}