GitHubで見る

テーブルのスティッキーヘッダー

Bootstrap Tableのスティッキーヘッダー拡張機能。スクロール時にテーブルヘッダーをビューポートの上部に固定します。

このページ

この拡張機能は、テーブルにスティッキーヘッダー機能を提供します。ページがスクロールされると、テーブルヘッダーはビューポートの上部に固定され、ユーザーが大量のデータを表示する際に常に列タイトルを確認できるようになります。

使用方法

<link rel="stylesheet" href="extensions/sticky-header/bootstrap-table-sticky-header.css">
<script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script>

例

Sticky Header

オプション

  • 属性: data-sticky-header

  • 型: Boolean

  • 詳細:

    スティッキーヘッダー機能を有効にするかどうかを制御します。true に設定すると、テーブルヘッダーはページがスクロールされるときにビューポートの上部に固定されます。

  • デフォルト値: false

stickyHeaderOffsetLeft

  • 属性: data-sticky-header-offset-left

  • 型: Number

  • 詳細:

    スティッキーコンテナの左側のオフセットを設定します（単位：ピクセル）。例えば、ページのbodyの左側のパディングが 60px の場合、この値を 60 に設定すると、スティッキーヘッダーをページのコンテンツと揃えることができます。

  • デフォルト値: 0

stickyHeaderOffsetRight

  • 属性: data-sticky-header-offset-right

  • 型: Number

  • 詳細:

    スティッキーコンテナの右側のオフセットを設定します（単位：ピクセル）。例えば、ページのbodyの右側のパディングが 60px の場合、この値を 60 に設定すると、スティッキーヘッダーをページのコンテンツと揃えることができます。

  • デフォルト値: 0

stickyHeaderOffsetY

  • 属性: data-sticky-header-offset-y

  • 型: Number

  • 詳細:

    スティッキーヘッダーのウィンドウ上部からのオフセットを設定します（単位：ピクセル）。例えば、ページに高さが 60px の固定ナビゲーションバーがある場合、この値を 60 に設定すると、スティッキーヘッダーがナビゲーションバーで隠れるのを防ぐことができます。

  • デフォルト値: 0