hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/table_controller.js

@@ -0,0 +1,1198 @@
+import RegistryController from "../base/registry_controller.js"
+import Sortable from "sortablejs"
+
+export default class extends RegistryController {
+
+  static targets = [
+    "row",
+    "selectionCheckbox",
+    "selectionAll",
+    "expandToggle",
+    "filterDropdown",
+    "filterOption",
+    "filterSearch",
+    "scrollContainer",
+    "dragHandle",
+    "scrollBar",
+    "scrollBarThumb"
+  ]
+  static values = {
+    selectedRowKeys: String,
+    selectionType: String,
+    preserveSelectedRowKeys: Boolean,
+    sortDirections: String,
+    filterOnClose: Boolean,
+    filterMode: String,
+    filterSearch: Boolean,
+    editableConfig: Object,
+    serverSide: Boolean,
+    href: String,
+    sortFieldParam: { type: String, default: "sort_field" },
+    sortOrderParam: { type: String, default: "sort_order" },
+    turboFrame: String,
+    rowDrag: { type: Boolean, default: false },
+    rowDragHandle: { type: Boolean, default: false },
+    columnDrag: { type: Boolean, default: false },
+    dataUrl: String,
+    columnsConfig: String,
+    pageSize: { type: Number, default: 10 }
+  }
+
+  setup() {
+    this._selectedRowKeys = new Set(this.#parseJson(this.selectedRowKeysValue, []))
+    this._selectionType = this.selectionTypeValue || "checkbox"
+    this._sortDirections = (this.sortDirectionsValue || "ascend,descend").split(",")
+    this._filters = new Map()
+    this._sorter = null
+    this._expandedRowKeys = new Set(this.#expandedRowKeysFromDom())
+    this._shouldCellUpdateHooks = new Map()
+    this._rowSortable = null
+    this._columnSortable = null
+    this._pagination = { current: 1, pageSize: this.pageSizeValue || 10, total: 0 }
+    this._columnsConfig = this.#parseJson(this.columnsConfigValue, [])
+    this.#syncSelection()
+    this.#syncDefaultFilters()
+    this.#syncDefaultSorter()
+    this.#syncExpandedRows()
+    this.#setupScrollSync()
+    this.#setupDragSorting()
+    this.#setupDataLoading()
+  }
+
+  registerApi() {
+    const api = {
+      getSelectedRowKeys: () => this.getSelectedRowKeys(),
+      setSelectedRowKeys: (keys) => this.setSelectedRowKeys(keys),
+      clearSelection: () => this.clearSelection(),
+      selectAll: () => this.selectAll(),
+      invertSelection: () => this.invertSelection(),
+      getSorter: () => this.getSorter(),
+      setSorter: (sorter) => this.setSorter(sorter),
+      clearSorter: () => this.clearSorter(),
+      getFilters: () => this.getFilters(),
+      setFilters: (filters) => this.setFilters(filters),
+      clearFilters: (options = {}) => this.clearFilters(options),
+      getExpandedRowKeys: () => this.getExpandedRowKeys(),
+      setExpandedRowKeys: (keys) => this.setExpandedRowKeys(keys),
+      toggleRowExpansion: (key) => this.toggleRowExpansion(key),
+      registerShouldCellUpdate: (name, fn) => this.registerShouldCellUpdate(name, fn),
+      unregisterShouldCellUpdate: (name) => this.unregisterShouldCellUpdate(name),
+      getRowOrder: () => this.getRowOrder(),
+      getColumnOrder: () => this.getColumnOrder(),
+      loadData: (options = {}) => this.loadData(options),
+      setPage: (page) => this.setPage(page),
+      setPageSize: (size) => this.setPageSize(size),
+      getPagination: () => this.getPagination(),
+      refresh: () => this.refresh()
+    }
+
+    this.element.hakumiComponent = {
+      name: "table",
+      version: 1,
+      singleton: false,
+      api
+    }
+
+    this.#exposeApi(api)
+  }
+
+  disconnect() {
+    this.#teardownScrollSync()
+
+    // Clean up sortable instances
+    if (this._rowSortable) {
+      this._rowSortable.destroy()
+      this._rowSortable = null
+    }
+    if (this._columnSortable) {
+      this._columnSortable.destroy()
+      this._columnSortable = null
+    }
+
+    delete this.element.hakumiTable
+    super.disconnect()
+  }
+
+  toggleAll(event) {
+    if (this._selectionType !== "checkbox") return
+    const checked = event.target.checked
+    const keys = this.#rowKeys()
+    if (checked) {
+      keys.forEach((key) => this._selectedRowKeys.add(key))
+    } else if (!this.preserveSelectedRowKeysValue) {
+      this._selectedRowKeys.clear()
+    }
+    this.#syncSelection()
+    this.#dispatchSelectionChange()
+  }
+
+  toggleRow(event) {
+    const key = event.target.dataset.rowKey
+    if (!key) return
+
+    if (this._selectionType === "radio") {
+      this._selectedRowKeys.clear()
+      if (event.target.checked) this._selectedRowKeys.add(key)
+    } else {
+      if (event.target.checked) {
+        this._selectedRowKeys.add(key)
+      } else if (!this.preserveSelectedRowKeysValue) {
+        this._selectedRowKeys.delete(key)
+      }
+    }
+    this.#syncSelection()
+    this.#dispatchSelectionChange()
+  }
+
+  toggleExpand(event) {
+    event.preventDefault()
+    const key = event.currentTarget.dataset.rowKey
+    if (!key) return
+    this.toggleRowExpansion(key)
+  }
+
+  toggleSort(event) {
+    const th = event.currentTarget
+    if (!th.dataset.sortable || th.dataset.sortable === "false") return
+    if (event.target.closest(".hakumi-table-filter")) return
+    const key = th.dataset.columnKey
+    
+
+    const currentOrder = (this._sorter?.field === key || this._sorter?.key === key) 
+      ? this._sorter.order 
+      : null
+    const nextOrder = this.#nextSortOrder(currentOrder)
+
+    this.setSorter({ key, order: nextOrder })
+  }
+
+  toggleFilter(event) {
+    event.preventDefault()
+  }
+
+  applyFilters(event) {
+    const input = event.target
+    const dropdown = input.closest(".hakumi-table-filter-dropdown")
+    if (!dropdown) return
+    const key = dropdown.dataset.columnKey
+    const multiple = dropdown.dataset.filterMultiple === "true"
+    const selectedValues = Array.from(dropdown.querySelectorAll("input:checked")).map((el) => el.value)
+
+    if (!multiple && selectedValues.length > 1) {
+      const last = selectedValues[selectedValues.length - 1]
+      dropdown.querySelectorAll("input").forEach((el) => {
+        el.checked = el.value === last
+      })
+      this._filters.set(key, [last])
+    } else {
+      this._filters.set(key, selectedValues)
+    }
+
+    if (this.filterOnCloseValue) {
+      this.#applyFiltersToRows()
+    }
+  }
+
+  confirmFilters(event) {
+    event.preventDefault()
+    this.#applyFiltersToRows()
+    event.currentTarget.closest("details")?.removeAttribute("open")
+  }
+
+  clearFilters(eventOrOptions = {}) {
+    const options = eventOrOptions?.preventDefault ? { closeDropdown: true, confirm: true } : eventOrOptions
+    if (eventOrOptions?.preventDefault) eventOrOptions.preventDefault()
+    const { closeDropdown = true, confirm = true } = options
+
+    this._filters.clear()
+    this.filterOptionTargets.forEach((input) => {
+      input.checked = false
+    })
+    if (confirm) this.#applyFiltersToRows()
+    if (closeDropdown) {
+      this.element.querySelectorAll("details[open]").forEach((detail) => detail.removeAttribute("open"))
+    }
+  }
+
+  filterSearch(event) {
+    const input = event.target
+    const query = input.value.toLowerCase()
+    const options = input.closest(".hakumi-table-filter-dropdown")?.querySelectorAll(".hakumi-table-filter-option") || []
+    options.forEach((option) => {
+      const text = option.textContent.toLowerCase()
+      option.style.display = text.includes(query) ? "" : "none"
+    })
+  }
+
+  getSelectedRowKeys() {
+    return Array.from(this._selectedRowKeys)
+  }
+
+  setSelectedRowKeys(keys) {
+    this._selectedRowKeys = new Set(Array(keys).map(String))
+    this.#syncSelection()
+    this.#dispatchSelectionChange()
+  }
+
+  clearSelection() {
+    this._selectedRowKeys.clear()
+    this.#syncSelection()
+    this.#dispatchSelectionChange()
+  }
+
+  selectAll() {
+    this.#rowKeys().forEach((key) => this._selectedRowKeys.add(key))
+    this.#syncSelection()
+    this.#dispatchSelectionChange()
+  }
+
+  invertSelection() {
+    const keys = this.#rowKeys()
+    const next = new Set()
+    keys.forEach((key) => {
+      if (!this._selectedRowKeys.has(key)) next.add(key)
+    })
+    this._selectedRowKeys = next
+    this.#syncSelection()
+    this.#dispatchSelectionChange()
+  }
+
+  getSorter() {
+    return this._sorter
+  }
+
+  setSorter(sorter) {
+    if (!sorter || !sorter.key || !sorter.order) {
+      this.clearSorter()
+      return
+    }
+    this._sorter = { field: sorter.key, order: sorter.order }
+    this.#applySorterToHeaders()
+    
+    if (this.hasDataUrlValue) {
+      this._pagination.current = 1
+      this.loadData()
+    } else if (this.#isServerSide()) {
+      this.#navigateWithSort()
+    } else {
+      this.#sortRows()
+    }
+    this.#dispatchChange()
+  }
+
+  clearSorter() {
+    this._sorter = null
+    this.#applySorterToHeaders()
+    
+    if (this.hasDataUrlValue) {
+      this._pagination.current = 1
+      this.loadData()
+    } else if (this.#isServerSide()) {
+      this.#navigateWithSort()
+    }
+    this.#dispatchChange()
+  }
+
+  getFilters() {
+    return Object.fromEntries(this._filters.entries())
+  }
+
+  setFilters(filters = {}) {
+    this._filters = new Map(Object.entries(filters).map(([key, values]) => [key, Array(values)]))
+    this.#syncFilterInputs()
+    this.#applyFiltersToRows()
+  }
+
+  getExpandedRowKeys() {
+    return Array.from(this._expandedRowKeys)
+  }
+
+  setExpandedRowKeys(keys) {
+    this._expandedRowKeys = new Set(Array(keys).map(String))
+    this.#syncExpandedRows()
+  }
+
+  toggleRowExpansion(key) {
+    const stringKey = String(key)
+    if (this._expandedRowKeys.has(stringKey)) {
+      this._expandedRowKeys.delete(stringKey)
+    } else {
+      this._expandedRowKeys.add(stringKey)
+    }
+    this.#syncExpandedRows()
+    this.#dispatchChange()
+  }
+
+  registerShouldCellUpdate(name, fn) {
+    if (typeof fn !== "function") {
+      console.warn(`[Hakumi Table] registerShouldCellUpdate: "${name}" must be a function`)
+      return
+    }
+    this._shouldCellUpdateHooks.set(name, fn)
+  }
+
+  unregisterShouldCellUpdate(name) {
+    this._shouldCellUpdateHooks.delete(name)
+  }
+
+  getRowOrder() {
+    const rows = this.rowTargets.filter(row => row.dataset.rowType === "data")
+    return rows.map(row => row.dataset.rowKey)
+  }
+
+  getColumnOrder() {
+    const headerRow = this.element.querySelector(".hakumi-table-header-row")
+    if (!headerRow) return []
+    const ths = headerRow.querySelectorAll("th[data-column-key]")
+    return Array.from(ths).map(th => th.dataset.columnKey)
+  }
+
+  async loadData(options = {}) {
+    if (!this.hasDataUrlValue) return null
+    
+    const page = options.page ?? this._pagination.current
+    const pageSize = options.pageSize ?? this._pagination.pageSize
+    const sorter = options.sorter ?? this._sorter
+    
+    const params = new URLSearchParams()
+    params.set("page", page)
+    params.set("per_page", pageSize)
+    if (sorter?.field) {
+      params.set("sort_field", sorter.field)
+      params.set("sort_order", sorter.order || "ascend")
+    }
+    
+    const fullUrl = `${this.dataUrlValue}?${params.toString()}`
+    
+    this.element.classList.add("hakumi-table-loading")
+    
+    try {
+      const response = await fetch(fullUrl, {
+        headers: { "Accept": "application/json" }
+      })
+      
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      
+      const json = await response.json()
+      
+      this._pagination = {
+        current: json.pagination.current,
+        pageSize: json.pagination.pageSize,
+        total: json.pagination.total
+      }
+      
+      if (json.sorter) {
+        this._sorter = json.sorter
+      }
+      
+      this.#renderRows(json.data)
+      this.#updatePagination()
+      this.#dispatchLoadComplete(json)
+      return json
+    } catch (error) {
+      this.#dispatchLoadError(error)
+      throw error
+    } finally {
+      this.element.classList.remove("hakumi-table-loading")
+    }
+  }
+
+  setPage(page) {
+    if (page < 1) return
+    this._pagination.current = page
+    return this.loadData({ page })
+  }
+
+  setPageSize(size) {
+    this._pagination.pageSize = size
+    this._pagination.current = 1
+    return this.loadData({ page: 1, pageSize: size })
+  }
+
+  getPagination() {
+    return { ...this._pagination }
+  }
+
+  refresh() {
+    return this.loadData()
+  }
+
+  #renderRows(data) {
+    const tbody = this.element.querySelector("tbody")
+    if (!tbody) return
+    
+    const columns = this.#getColumnConfig()
+    const rows = data.map((record, index) => this.#buildRow(record, index, columns))
+    
+    tbody.innerHTML = rows.join("")
+    this.#syncSelection()
+  }
+
+  #getColumnConfig() {
+    const headerRow = this.element.querySelector(".hakumi-table-header-row")
+    if (!headerRow) return []
+    
+    return Array.from(headerRow.querySelectorAll("th[data-column-key]")).map(th => ({
+      key: th.dataset.columnKey,
+      dataIndex: th.dataset.field || th.dataset.columnKey,
+      sortValue: th.dataset.sortField
+    }))
+  }
+
+  #buildRow(record, index, columns) {
+    const rowKey = record.key || record.id || index
+    const cells = columns.map(col => {
+      const displayValue = record[col.dataIndex] ?? ""
+      const sortValue = col.sortValue ? (record[col.sortValue] ?? displayValue) : displayValue
+      return `<td class="hakumi-table-cell" data-column-key="${col.key}" data-sort-value="${this.#escapeHtml(sortValue)}">${this.#escapeHtml(displayValue)}</td>`
+    }).join("")
+    
+    return `<tr class="hakumi-table-row" data-row-key="${rowKey}" data-row-type="data" data-hakumi--table-target="row">${cells}</tr>`
+  }
+
+  #escapeHtml(text) {
+    const div = document.createElement("div")
+    div.textContent = String(text)
+    return div.innerHTML
+  }
+
+  #dispatchLoadComplete(json) {
+    this.dispatch("loadComplete", { detail: json })
+  }
+
+  #dispatchLoadError(error) {
+    this.dispatch("loadError", { detail: { error } })
+  }
+
+  #setupDataLoading() {
+    if (!this.hasDataUrlValue) return
+    this.#syncPaginationFromComponent()
+    this.#bindPaginationEvents()
+    this.loadData()
+  }
+
+  #syncPaginationFromComponent() {
+    const paginationEl = this.element.querySelector(".hakumi-table-pagination .hakumi-pagination")
+    if (!paginationEl) return
+    
+    const controller = this.application.getControllerForElementAndIdentifier(paginationEl, "hakumi--pagination")
+    if (controller) {
+      this._pagination.pageSize = controller.pageSizeValue || this._pagination.pageSize
+    }
+  }
+
+  #getPaginationComponent() {
+    const paginationEl = this.element.querySelector(".hakumi-table-pagination .hakumi-pagination")
+    return paginationEl?.hakumiPagination || paginationEl?.hakumiComponent?.api
+  }
+
+  #updatePagination() {
+    const paginationEl = this.element.querySelector(".hakumi-table-pagination .hakumi-pagination")
+    if (!paginationEl) return
+    
+    const controller = this.application.getControllerForElementAndIdentifier(paginationEl, "hakumi--pagination")
+    if (!controller) return
+    
+    const { current, pageSize, total } = this._pagination
+    
+    controller.totalValue = total
+    controller.pageSizeValue = pageSize
+    controller.currentValue = current
+    controller.refresh()
+  }
+
+  #bindPaginationEvents() {
+    const container = this.element.querySelector(".hakumi-table-pagination")
+    if (!container || container._paginationBound) return
+    container._paginationBound = true
+    
+    container.addEventListener("hakumi--pagination:change", (e) => {
+      e.stopPropagation()
+      const page = e.detail.current
+      if (page !== this._pagination.current) {
+        this._pagination.current = page
+        this.loadData()
+      }
+    })
+    
+    container.addEventListener("hakumi--pagination:sizeChange", (e) => {
+      e.stopPropagation()
+      const size = e.detail.pageSize
+      if (size !== this._pagination.pageSize) {
+        this._pagination.pageSize = size
+        this._pagination.current = 1
+        this.loadData()
+      }
+    })
+  }
+
+  editCell(event) {
+    const cell = event.currentTarget
+    if (cell.querySelector(".hakumi-table-cell-editor")) return
+
+    const tableConfig = this.editableConfigValue || {}
+    const mode = tableConfig.mode || "cell"
+
+    if (mode === "row") {
+      this.#editRow(cell)
+    } else {
+      this.#editSingleCell(cell)
+    }
+  }
+
+  #editSingleCell(cell) {
+    const { input, editor, originalContent, originalValue, config } = this.#createCellEditor(cell)
+    input.focus()
+
+    const rowElement = cell.closest("tr")
+    const rowKey = rowElement?.dataset.rowKey
+    const columnKey = config.key || cell.dataset.columnKey
+    const dataIndex = config.data_index
+
+    const save = () => {
+      if (!editor.isConnected) return
+
+      const newValue = input.value
+      const detail = { rowKey, columnKey, dataIndex, value: newValue, originalValue }
+
+      if (!this.#shouldUpdateCell(cell, detail)) {
+        if (originalContent) originalContent.style.display = ""
+        editor.remove()
+        return
+      }
+
+      if (originalContent) {
+        originalContent.textContent = newValue
+        originalContent.style.display = ""
+      }
+      cell.dataset.value = newValue
+      editor.remove()
+
+      this.#dispatchEdit(detail)
+    }
+
+    const cancel = () => {
+      if (!editor.isConnected) return
+      if (originalContent) originalContent.style.display = ""
+      editor.remove()
+    }
+
+    input.addEventListener("blur", save)
+
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault()
+        input.blur()
+      } else if (e.key === "Escape") {
+        e.preventDefault()
+        input.removeEventListener("blur", save)
+        cancel()
+      }
+    })
+  }
+
+  #editRow(clickedCell) {
+    const row = clickedCell.closest("tr")
+    if (!row || row.classList.contains("hakumi-table-row-editing")) return
+
+    row.classList.add("hakumi-table-row-editing")
+    const rowKey = row.dataset.rowKey
+    const editableCells = row.querySelectorAll("td[data-editable='true']")
+    const editors = []
+
+    editableCells.forEach((cell) => {
+      const { input, originalContent, originalValue, config } = this.#createCellEditor(cell)
+      input.dataset.columnKey = config.key || cell.dataset.columnKey
+      input.dataset.dataIndex = config.data_index
+      input.dataset.originalValue = originalValue
+
+      editors.push({ cell, input, originalContent, originalValue, config })
+    })
+
+    const clickedInput = clickedCell.querySelector(".hakumi-table-cell-input")
+    if (clickedInput) {
+      clickedInput.focus()
+    } else if (editors.length > 0) {
+      editors[0].input.focus()
+    }
+
+    const saveRow = () => {
+      const changes = []
+      let allValid = true
+
+      editors.forEach(({ cell, input, originalContent, originalValue, config }) => {
+        const newValue = input.value
+        const columnKey = config.key || cell.dataset.columnKey
+        const dataIndex = config.data_index
+        const detail = { rowKey, columnKey, dataIndex, value: newValue, originalValue }
+
+        if (!this.#shouldUpdateCell(cell, detail)) {
+          allValid = false
+          return
+        }
+
+        changes.push({ cell, originalContent, newValue, detail })
+      })
+
+      if (!allValid) {
+        cancelRow()
+        return
+      }
+
+      changes.forEach(({ cell, originalContent, newValue }) => {
+        if (originalContent) {
+          originalContent.textContent = newValue
+          originalContent.style.display = ""
+        }
+        cell.dataset.value = newValue
+        cell.querySelector(".hakumi-table-cell-editor")?.remove()
+      })
+
+      row.classList.remove("hakumi-table-row-editing")
+
+      this.#dispatchRowEdit({
+        rowKey,
+        changes: changes.map(({ detail }) => detail)
+      })
+    }
+
+    const cancelRow = () => {
+      editors.forEach(({ cell, originalContent }) => {
+        if (originalContent) originalContent.style.display = ""
+        cell.querySelector(".hakumi-table-cell-editor")?.remove()
+      })
+      row.classList.remove("hakumi-table-row-editing")
+    }
+
+    editors.forEach(({ input }) => {
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault()
+          saveRow()
+        } else if (e.key === "Escape") {
+          e.preventDefault()
+          cancelRow()
+        }
+      })
+    })
+
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi:table:row-editing", {
+        bubbles: true,
+        detail: { rowKey, save: saveRow, cancel: cancelRow }
+      })
+    )
+  }
+
+  #dispatchEdit(detail) {
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi:table:edit", {
+        bubbles: true,
+        detail
+      })
+    )
+  }
+
+  #dispatchRowEdit(detail) {
+    const params = this.#changesToParams(detail.changes)
+    
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi:table:row-edit", {
+        bubbles: true,
+        detail: {
+          ...detail,
+          params
+        }
+      })
+    )
+  }
+
+  #changesToParams(changes) {
+    const params = {}
+    if (!changes || !Array.isArray(changes)) return params
+    
+    changes.forEach(({ columnKey, dataIndex, value }) => {
+      const key = dataIndex || columnKey
+      if (key) {
+        params[key] = value
+      }
+    })
+    return params
+  }
+
+  #shouldUpdateCell(cell, detail) {
+    const hookName = cell?.dataset.shouldCellUpdate
+    if (!hookName) return true
+
+    const hook = this.#resolveHook(hookName)
+    if (typeof hook !== "function") {
+      console.warn(`[Hakumi Table] shouldCellUpdate hook "${hookName}" is not a function`)
+      return true
+    }
+
+    try {
+      const result = hook(detail)
+      if (result === false) return false
+
+      if (typeof result === "string") {
+        this.element.dispatchEvent(
+          new CustomEvent("hakumi:table:cell-update-prevented", {
+            bubbles: true,
+            detail: {
+              ...detail,
+              reason: result
+            }
+          })
+        )
+        return false
+      }
+
+      return true
+    } catch (error) {
+      console.error(`[Hakumi Table] shouldCellUpdate hook "${hookName}" failed`, error)
+      return true
+    }
+  }
+
+  #resolveHook(name) {
+    if (!name) return null
+
+
+    if (this._shouldCellUpdateHooks.has(name)) {
+      return this._shouldCellUpdateHooks.get(name)
+    }
+
+
+    if (typeof window === "undefined") return null
+
+    if (window.HakumiTableShouldCellUpdate && typeof window.HakumiTableShouldCellUpdate[name] === "function") {
+      return window.HakumiTableShouldCellUpdate[name]
+    }
+
+    return name.split(".").reduce((acc, key) => (acc ? acc[key] : undefined), window)
+  }
+
+  #exposeApi(api) {
+    this.element.hakumiTable = api
+  }
+
+  #isServerSide() {
+    return this.serverSideValue || this.hasHrefValue
+  }
+
+  #navigateWithSort() {
+    if (!this.hasHrefValue) return
+
+    const url = new URL(this.hrefValue, window.location.origin)
+    
+
+    const currentUrl = new URL(window.location.href)
+    currentUrl.searchParams.forEach((value, key) => {
+      if (!url.searchParams.has(key)) {
+        url.searchParams.set(key, value)
+      }
+    })
+
+
+    if (this._sorter && this._sorter.key && this._sorter.order) {
+      url.searchParams.set(this.sortFieldParamValue, this._sorter.key)
+      url.searchParams.set(this.sortOrderParamValue, this._sorter.order)
+    } else {
+      url.searchParams.delete(this.sortFieldParamValue)
+      url.searchParams.delete(this.sortOrderParamValue)
+    }
+
+
+    url.searchParams.set("page", "1")
+
+
+    if (this.hasTurboFrameValue && this.turboFrameValue) {
+      const frame = document.getElementById(this.turboFrameValue)
+      if (frame) {
+        frame.src = url.toString()
+        return
+      }
+    }
+
+
+    if (window.Turbo) {
+      window.Turbo.visit(url.toString())
+    } else {
+      window.location.href = url.toString()
+    }
+  }
+
+  #createCellEditor(cell) {
+    const config = this.#parseJson(cell.dataset.editableConfig, {})
+    const originalContent = cell.querySelector(".hakumi-table-cell-content")
+    const originalValue = cell.dataset.value ?? (originalContent?.textContent?.trim() || "")
+
+    const editor = document.createElement("div")
+    editor.className = "hakumi-table-cell-editor"
+
+    const input = document.createElement("input")
+    input.type = config.input_type || "text"
+    input.value = originalValue
+    input.className = "hakumi-table-cell-input"
+
+    editor.appendChild(input)
+
+    if (originalContent) originalContent.style.display = "none"
+    cell.appendChild(editor)
+
+    return { input, editor, originalContent, originalValue, config }
+  }
+
+  #syncSelection() {
+    const keys = this._selectedRowKeys
+    this.selectionCheckboxTargets.forEach((input) => {
+      const key = String(input.dataset.rowKey)
+      input.checked = keys.has(key)
+      const row = input.closest("tr")
+      if (row) row.classList.toggle("hakumi-table-row-selected", input.checked)
+    })
+
+    this.selectionAllTargets.forEach((input) => {
+      const total = this.#rowKeys().length
+      const selected = keys.size
+      input.checked = total > 0 && selected === total
+      input.indeterminate = selected > 0 && selected < total
+    })
+  }
+
+  #rowKeys() {
+    return this.rowTargets
+      .filter((row) => row.dataset.rowType === "data")
+      .map((row) => String(row.dataset.rowKey))
+  }
+
+  #expandedRowKeysFromDom() {
+    const expandedRows = this.element.querySelectorAll("tr[data-row-type='expanded'].is-expanded")
+    return Array.from(expandedRows).map((row) => String(row.dataset.rowKey))
+  }
+
+  #applySorterToHeaders() {
+    const ths = this.element.querySelectorAll("th[data-column-key]")
+    const sorterKey = this._sorter?.field || this._sorter?.key
+    ths.forEach((th) => {
+      if (sorterKey && th.dataset.columnKey === String(sorterKey)) {
+        th.dataset.sortOrder = this._sorter.order
+        th.classList.add("hakumi-table-header-sorted")
+      } else {
+        delete th.dataset.sortOrder
+        th.classList.remove("hakumi-table-header-sorted")
+      }
+    })
+  }
+
+  #sortRows() {
+    if (!this._sorter || !this._sorter.order) return
+    const tbody = this.element.querySelector("tbody")
+    if (!tbody) return
+
+    const sorterKey = this._sorter.field || this._sorter.key
+    const rows = this.rowTargets.filter((row) => row.dataset.rowType === "data")
+    const compare = (a, b) => {
+      const aValue = this.#cellValue(a, sorterKey)
+      const bValue = this.#cellValue(b, sorterKey)
+      if (aValue === bValue) return 0
+      if (this._sorter.order === "ascend") {
+        return aValue > bValue ? 1 : -1
+      }
+      return aValue < bValue ? 1 : -1
+    }
+
+    rows.sort(compare)
+    rows.forEach((row) => {
+      const expandedRow = tbody.querySelector(`tr[data-row-type='expanded'][data-row-key='${row.dataset.rowKey}']`)
+      tbody.appendChild(row)
+      if (expandedRow) tbody.appendChild(expandedRow)
+    })
+  }
+
+  #applyFiltersToRows() {
+    const filters = this._filters
+    this.rowTargets.forEach((row) => {
+      if (row.dataset.rowType !== "data") return
+      const match = Array.from(filters.entries()).every(([key, values]) => {
+        if (!values || values.length === 0) return true
+        const cellValue = this.#cellValue(row, key)
+        return values.includes(cellValue)
+      })
+      row.hidden = !match
+      const expandedRow = row.nextElementSibling
+      if (expandedRow?.dataset.rowType === "expanded") {
+        expandedRow.hidden = !match || !this._expandedRowKeys.has(String(row.dataset.rowKey))
+      }
+    })
+    this.#dispatchChange()
+  }
+
+  #cellValue(row, key) {
+    const cell = row.querySelector(`td[data-column-key='${key}']`)
+    const raw = cell?.dataset.sortValue || cell?.textContent?.trim() || ""
+    const number = Number.parseFloat(raw)
+    if (!Number.isNaN(number) && raw !== "") return number
+    return raw
+  }
+
+  #syncDefaultFilters() {
+    const ths = this.element.querySelectorAll("th[data-default-filter]")
+    ths.forEach((th) => {
+      const defaultValue = this.#parseJson(th.dataset.defaultFilter, [])
+      if (defaultValue.length > 0) this._filters.set(th.dataset.columnKey, defaultValue)
+    })
+    if (this._filters.size > 0) {
+      this.#syncFilterInputs()
+      this.#applyFiltersToRows()
+    }
+  }
+
+  #syncFilterInputs() {
+    this.filterOptionTargets.forEach((input) => {
+      const key = input.closest(".hakumi-table-filter-dropdown")?.dataset.columnKey
+      const values = this._filters.get(key) || []
+      input.checked = values.includes(input.value)
+    })
+  }
+
+  #syncDefaultSorter() {
+
+    const ths = this.element.querySelectorAll("th[data-default-sort]")
+    for (const th of ths) {
+      const defaultOrder = th.dataset.defaultSort
+      if (defaultOrder && defaultOrder !== "") {
+        this._sorter = { key: th.dataset.columnKey, order: defaultOrder }
+        this.#applySorterToHeaders()
+
+        if (!this.#isServerSide()) {
+          this.#sortRows()
+        }
+        break
+      }
+    }
+  }
+
+  #syncExpandedRows() {
+    this.rowTargets.forEach((row) => {
+      if (row.dataset.rowType !== "data") return
+      const key = String(row.dataset.rowKey)
+      const expandedRow = row.nextElementSibling
+      if (!expandedRow || expandedRow.dataset.rowType !== "expanded") return
+      const expanded = this._expandedRowKeys.has(key)
+      
+      expandedRow.hidden = !expanded
+      expandedRow.classList.toggle("is-expanded", expanded)
+      
+      const button = row.querySelector("[data-hakumi--table-target='expandToggle']")
+      if (button) {
+        button.setAttribute("aria-expanded", expanded)
+        button.classList.toggle("is-expanded", expanded)
+      }
+    })
+  }
+
+  #setupScrollSync() {
+    if (!this.hasScrollContainerTarget) return
+
+    this._scrollHandler ||= () => this.#syncScrollState()
+    this.scrollContainerTarget.addEventListener("scroll", this._scrollHandler, { passive: true })
+    
+    if (this.hasScrollBarTarget) {
+      this._scrollBarHandler ||= () => this.#syncFromScrollBar()
+      this.scrollBarTarget.addEventListener("scroll", this._scrollBarHandler, { passive: true })
+      this.#updateScrollBarThumb()
+    }
+    
+    this.#syncScrollState()
+  }
+
+  #teardownScrollSync() {
+    if (this._scrollHandler && this.hasScrollContainerTarget) {
+      this.scrollContainerTarget.removeEventListener("scroll", this._scrollHandler)
+    }
+    if (this._scrollBarHandler && this.hasScrollBarTarget) {
+      this.scrollBarTarget.removeEventListener("scroll", this._scrollBarHandler)
+    }
+    this._scrollHandler = null
+    this._scrollBarHandler = null
+  }
+
+  #syncScrollState() {
+    if (!this.hasScrollContainerTarget) return
+
+    const el = this.scrollContainerTarget
+    const maxScrollLeft = el.scrollWidth - el.clientWidth
+    const hasLeft = el.scrollLeft > 0
+    const hasRight = el.scrollLeft < maxScrollLeft - 1
+
+    this.element.classList.toggle("hakumi-table-scroll-left", hasLeft)
+    this.element.classList.toggle("hakumi-table-scroll-right", hasRight)
+    
+    if (this.hasScrollBarTarget && !this._syncingFromBar) {
+      this._syncingFromContainer = true
+      this.scrollBarTarget.scrollLeft = el.scrollLeft
+      this._syncingFromContainer = false
+    }
+  }
+  
+  #syncFromScrollBar() {
+    if (!this.hasScrollContainerTarget || this._syncingFromContainer) return
+    
+    this._syncingFromBar = true
+    this.scrollContainerTarget.scrollLeft = this.scrollBarTarget.scrollLeft
+    this._syncingFromBar = false
+  }
+  
+  #updateScrollBarThumb() {
+    if (!this.hasScrollBarThumbTarget || !this.hasScrollContainerTarget) return
+    
+    const el = this.scrollContainerTarget
+    this.scrollBarThumbTarget.style.width = `${el.scrollWidth}px`
+  }
+
+  #nextSortOrder(currentOrder) {
+    if (!currentOrder) return this._sortDirections[0]
+    const index = this._sortDirections.indexOf(currentOrder)
+    if (index === -1 || index === this._sortDirections.length - 1) return null
+    return this._sortDirections[index + 1]
+  }
+
+  #dispatchSelectionChange() {
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi:table:selection-change", {
+        bubbles: true,
+        detail: { selectedRowKeys: this.getSelectedRowKeys() }
+      })
+    )
+  }
+
+  #dispatchChange() {
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi:table:change", {
+        bubbles: true,
+        detail: {
+          selectedRowKeys: this.getSelectedRowKeys(),
+          sorter: this._sorter,
+          filters: this.getFilters()
+        }
+      })
+    )
+  }
+
+  #parseJson(value, fallback) {
+    try {
+      return JSON.parse(value || "")
+    } catch {
+      return fallback
+    }
+  }
+
+  #setupDragSorting() {
+    if (this.rowDragValue) {
+      this.#setupRowDrag()
+    }
+    if (this.columnDragValue) {
+      this.#setupColumnDrag()
+    }
+  }
+
+  #setupRowDrag() {
+    const tbody = this.element.querySelector("tbody")
+    if (!tbody) return
+
+    const options = {
+      animation: 150,
+      ghostClass: "hakumi-table-row-ghost",
+      chosenClass: "hakumi-table-row-chosen",
+      dragClass: "hakumi-table-row-drag",
+      filter: ".hakumi-table-expanded-row",
+      onEnd: (evt) => {
+        if (evt.oldIndex === evt.newIndex) return
+        
+        const row = evt.item
+        const rowKey = row.dataset.rowKey
+        
+
+        const expandedRow = row.nextElementSibling
+        if (expandedRow?.dataset.rowType === "expanded") {
+          row.parentNode.insertBefore(expandedRow, row.nextSibling)
+        }
+        
+        this.#dispatchRowReorder(evt.oldIndex, evt.newIndex, rowKey)
+      }
+    }
+
+
+    if (this.rowDragHandleValue) {
+      options.handle = ".hakumi-table-drag-handle"
+    }
+
+    this._rowSortable = Sortable.create(tbody, options)
+  }
+
+  #setupColumnDrag() {
+    const headerRow = this.element.querySelector(".hakumi-table-header-row")
+    if (!headerRow) return
+
+    this._columnSortable = Sortable.create(headerRow, {
+      animation: 150,
+      ghostClass: "hakumi-table-column-ghost",
+      chosenClass: "hakumi-table-column-chosen",
+      dragClass: "hakumi-table-column-drag",
+      filter: ".hakumi-table-selection-column, .hakumi-table-expand-column",
+      onEnd: (evt) => {
+        if (evt.oldIndex === evt.newIndex) return
+        
+        const th = evt.item
+        const columnKey = th.dataset.columnKey
+        
+
+        this.#reorderBodyColumns(evt.oldIndex, evt.newIndex)
+        
+        this.#dispatchColumnReorder(evt.oldIndex, evt.newIndex, columnKey)
+      }
+    })
+  }
+
+  #reorderBodyColumns(oldIndex, newIndex) {
+    const rows = this.element.querySelectorAll("tbody tr")
+    rows.forEach(row => {
+      const cells = Array.from(row.children)
+      if (cells[oldIndex] && cells[newIndex]) {
+        const cell = cells[oldIndex]
+        const reference = oldIndex < newIndex ? cells[newIndex].nextSibling : cells[newIndex]
+        row.insertBefore(cell, reference)
+      }
+    })
+  }
+
+  #dispatchRowReorder(oldIndex, newIndex, rowKey) {
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi--table:rowReorder", {
+        bubbles: true,
+        detail: {
+          oldIndex,
+          newIndex,
+          rowKey,
+          order: this.getRowOrder()
+        }
+      })
+    )
+  }
+
+  #dispatchColumnReorder(oldIndex, newIndex, columnKey) {
+    this.element.dispatchEvent(
+      new CustomEvent("hakumi--table:columnReorder", {
+        bubbles: true,
+        detail: {
+          oldIndex,
+          newIndex,
+          columnKey,
+          order: this.getColumnOrder()
+        }
+      })
+    )
+  }
+
+}