テーブル

テーブル

シンプルテーブル

名前日付最終確認
プロジェクトアルファ 2026-01-10
プロジェクトベータ 2026-02-18
プロジェクトガンマ 2026-03-25

部屋より広い

ページが必要とする幅で描画され、周囲のスクロールゾーン - ゾーン、ページ - にオーバーフローしますが、自身のスクロールバーは持ちません。要求された場合(`scroll: true`)、ここでのように、独自のフレーム内で横にスクロールし、周囲のページはそのままです:スクロールしないコンテナ内の他の要素の間のテーブルとして機能します。スティッキーテーブルはこれを放棄します:ページに固定されたヘッダーと独自にスクロールするフレームは同時に持つことはできません。
カラム 1カラム 2カラム 3カラム 4カラム 5カラム 6カラム 7カラム 8カラム 9カラム 10カラム 11カラム 12
十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値
十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値
十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値 十分に長い値

アクション付きテーブル

ソース更新日時アクション
ソースアルファ 2026-01-12
ソースベータ 2026-02-20

ストライプ行、ポインタの下で照らされる

ソース更新日時アクション
ソースアルファ 2026-01-12
ソースベータ 2026-02-20
プロジェクトアルファ 2026-01-10
プロジェクトベータ 2026-02-18
プロジェクトガンマ 2026-03-25

チェック可能な行

各行の先頭にあるボックス、すべてのためのヘッダーに一つ、そして上にあるアクション: チェックされた行をそれぞれのアドレスに送信し、何もチェックされていない間は手の届かないところに留まります。

0選択中
ソース更新日時アクション
ソースアルファ 2026-01-12
ソースベータ 2026-02-20
プロジェクトアルファ 2026-01-10

ファイル、合計、各行のアクション

名前で読み取られるパス、先頭から切り取られたフォルダ。バーは行の数で終了し、`all`とマークされたアクションは何もチェックされていない状態で機能します — すべての行を取得し、期待されるものであればバーを先導します。

0選択中 合計3
ファイル
03-DOCUMENTS/QAL - Syst Document/Obsolète/QAL-D-12-identification-and-validation-of-quality-system-software-v1.md
05-INSTRUCTIONS/RES/RES-I-02-it-access-change-v2.md
README.md

フィルター

テーブルの先頭にあるフィルターのバー、各フィルターは控えめなメニューで、実行するとどのように絞り込むかを示します。サーバーではページのクエリに存在し — 各オプションはリンクです — コントローラーはそれから行を絞り込みます; Vueでは、APIのためにページに渡される値であるか、すでに持っている行にテーブルが適用します。各オプションはボックスです — 一つの選択肢のために丸く — トーンがあるときは色がつき、ステータスまたはカテゴリです。

合計4
名前オーナー状態
Alpha design open
Beta platform closed
Gamma design closed
Delta support open

ソート

ソートするヘッダーはサーバーのリンクであり、vueのボタンです:昇順、降順、次にページが宣言した順序に戻ります。空の日時は両方とも最後に表示され、名前は言語がそれらを順序付ける方法で比較されます。ここでは、テーブルは自分に与えられた行をソートします;リストをページングするコントローラーは同じクエリを読み取ります。

合計5
名前 市 最後の測定 アクション
Adam Petit Angers
Zoé Martin Zürich
Eric Bernard Lyon
Élodie Durand Évry
Basile Leroy Écully

ブラウザ内でのソート、twigから

`vue: true` は同じ列と行をvueの双子に渡します:それはブラウザ内で全体のリストをソートし、検索しますが、ページの読み込みはありません。ページが全体を保持するリストに対して - 短いもの、またはAPIが提供しないもの。

選択時のアクション

十分なアクションがあるときの同じバー: 一つが選ばれ、その後適用されます。

0選択中
ソース更新日時アクション
ソースアルファ 2026-01-12
ソースベータ 2026-02-20
プロジェクトアルファ 2026-01-10

リンクとアイコンのセル

ソース状態
ソースアルファ
ソースベータ

読み込み中

ソース更新日時アクション

空の状態

ソース更新日時アクション
データがありません。

カラムの整列

名前(左)ステータス(中央)金額(右)
Alpha Centered 42.00 €
Beta Centered 128.50 €
Gamma Centered 7.99 €

コード、数値、合計

`cell: 'code'` はモノフォントで識別子を設定します; `cell: 'number'` または `unit` はページのロケールで数値を表示します。`negative: true` はエラー音でゼロ未満の数値を描画し、そのマイナス記号も示します。`totals` はページが引き渡す行で、他の行の下に描画されます - テーブルは合計を計算せず、1ページまたはフィルタリングされたリストを保持します。サーバーによって描画され、その後vueによって描画されます。

コードアイテムネット供給面積
VS-2041 Atlas 12 18.5 m²
LO-0007 Boréal -4 9 m²
VS-1180 Cyprès 0 6.5 m²
LO-0315 Dune -11 22.5 m²
合計 -3 56.5 m²

Markdownから

Markdownで書かれ、`markdown_ds`を通過したテーブル: カラム、その整列、各セルのマークアップはドキュメントから読み取られ、ここで他のテーブルと同様に描画されます。`markdown`は、ページでないもの — メール、フィードなどのために、平文の`<table>`を保持します。

NameStatusAmount
Alpha ready 42.00 €
Beta draft 128.50 €
Gamma pending 7.99 €

グループ行

グループのみを持つ行は行ではありません: それは二つのグループの間の線であり、単語が与えられます。それはテーブルを横断し、続くものの名前を付けます — メニューセパレーターと同じ読み方です。

名前日付
最初のグループ
プロジェクトアルファ 2026-01-10
プロジェクトベータ 2026-02-18
第二のグループ
プロジェクトガンマ 2026-03-25

ステータスセル

状態は円であり、誰かが選んだ色ではありません: セルはタイプ名、またはカウントとタイトルのあるタイプを取り、システムの残りが描くステータスアイコンを描画します。ページ内にスタイルを適用することはありません。

パイプラインビルドテストデプロイ
プロジェクトアルファ 42
プロジェクトベータ 3
プロジェクトガンマ

スティッキーヘッダー

長いテーブルは、行ごとだけでなく、カラムごとにも読まれます。`sticky`を使用すると、ヘッダーが表示されたままで、行がその下をスクロールします; 自分の何かが上部に固定されたページは、`--table-sticky-top`でどれだけ下にあるかを示します。

#名前状態
1 Row 1
2 Row 2
3 Row 3
4 Row 4
5 Row 5
6 Row 6
7 Row 7
8 Row 8
9 Row 9
10 Row 10
11 Row 11
12 Row 12

独自のゾーン内のテーブル

テーブル全体に与えられた `zone--table` ゾーン:それを上から駆動し、足元にページを持ち、スクロールするものから分けられ、上下にゾーンの底までテーブルのグラウンドが広がります。サーバーまたはvueによって書かれた任意のテーブルが入ります。左側のように `natural` を使用すると、テーブルは列の幅を保持し、伸びも縮みもしません。

#名前状態
1 Row 1
2 Row 2
3 Row 3

Vueエンティティテーブル

選択付きVueテーブル

クライアント上の同じ契約: チェックされたキーはv-model:selectedを通じて戻り、各アクションはbulk-actionとして発行され、アドレスのあるものはサーバーテーブルがそれを投稿するように投稿されます。これらには何もないので、下の行は何が行われたかを示します。ページあたり三行、バーの最後に合計、アーカイブすべては何もチェックされていない必要があります。

合計なしのページネーション

APIが合計を返さないとき、ページャーは前へ/次へに戻ります。

サーバーによって描画されたページネーション

`pagination(page, pages_count)` はリストのページをリンクとして描画します:各ページはそのページが持つルートとクエリ - 検索、ソート - を保持し、`page` のみを変更します。表示される数字はvueのページャーのもので、最初のページ、最後のページ、現在のページ、その隣のページです。`compact` はページ番号の周りに前後のページを保持します;`route` と `params` は別のアドレスを通ります。

Vue日付フォーマッタ