第5章：ソートを追加（ヘッダークリックで昇順／降順）

目的

ヘッダー左クリックでその列を昇順／降順にソートし、ヘッダーに ▲/▼ を表示します。

代表コード

def _on_sort_by(self, col: str):
    prev = self.sort_state.get(col)
    direction = "desc" if prev == "asc" else "asc"
    self._apply_header_sort(col, direction)
    self.apply_filter()  # 表示を再描画

def _apply_header_sort(self, col: str, direction: str):
    idx = self.data_columns.index(col)
    def keyfunc(item):
        row = item[1]
        v = row[idx] if idx < len(row) else ""
        try:
            return (0, float(v))  # 数値優先
        except Exception:
            return (1, str(v).lower())
    reverse = (direction == "desc")
    self.data_rows.sort(key=keyfunc, reverse=reverse)
    self.sort_state = {col: direction}
    self.sorted_by = col

コツ

• データ本体（self.data_rows）を並べ替えてから再描画する
• ヘッダー文字列に ▲/▼ を付けると分かりやすい

前へ → 第4章
次へ → 第6章：ヘッダー右クリックでフィルタ