テーブル
シンプルテーブル
| 名前 | 日付 | 最終確認 |
|---|---|---|
| プロジェクトアルファ | 2026-01-10 | |
| プロジェクトベータ | 2026-02-18 | |
| プロジェクトガンマ | 2026-03-25 |
部屋より広い
| カラム 1 | カラム 2 | カラム 3 | カラム 4 | カラム 5 | カラム 6 | カラム 7 | カラム 8 | カラム 9 | カラム 10 | カラム 11 | カラム 12 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 |
| 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 |
| 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 | 十分に長い値 |
アクション付きテーブル
ストライプ行、ポインタの下で照らされる
チェック可能な行
各行の先頭にあるボックス、すべてのためのヘッダーに一つ、そして上にあるアクション: チェックされた行をそれぞれのアドレスに送信し、何もチェックされていない間は手の届かないところに留まります。
ファイル、合計、各行のアクション
名前で読み取られるパス、先頭から切り取られたフォルダ。バーは行の数で終了し、`all`とマークされたアクションは何もチェックされていない状態で機能します — すべての行を取得し、期待されるものであればバーを先導します。
| ファイル | |
|---|---|
| 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のためにページに渡される値であるか、すでに持っている行にテーブルが適用します。各オプションはボックスです — 一つの選択肢のために丸く — トーンがあるときは色がつき、ステータスまたはカテゴリです。
| 名前 | オーナー | 状態 |
|---|---|---|
| Alpha | design | open |
| Beta | platform | closed |
| Gamma | design | closed |
| Delta | support | open |
ソート
ソートするヘッダーはサーバーのリンクであり、vueのボタンです:昇順、降順、次にページが宣言した順序に戻ります。空の日時は両方とも最後に表示され、名前は言語がそれらを順序付ける方法で比較されます。ここでは、テーブルは自分に与えられた行をソートします;リストをページングするコントローラーは同じクエリを読み取ります。
ブラウザ内でのソート、twigから
`vue: true` は同じ列と行をvueの双子に渡します:それはブラウザ内で全体のリストをソートし、検索しますが、ページの読み込みはありません。ページが全体を保持するリストに対して - 短いもの、またはAPIが提供しないもの。
選択時のアクション
十分なアクションがあるときの同じバー: 一つが選ばれ、その後適用されます。
リンクとアイコンのセル
| ソース | 状態 |
|---|---|
| ソースアルファ | |
| ソースベータ |
読み込み中
| ソース | 更新日時 | アクション |
|---|---|---|
|
|
||
空の状態
| ソース | 更新日時 | アクション |
|---|---|---|
| データがありません。 | ||
カラムの整列
| 名前(左) | ステータス(中央) | 金額(右) |
|---|---|---|
| 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>`を保持します。
| Name | Status | Amount |
|---|---|---|
| Alpha | ready |
42.00 € |
| Beta | 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` は別のアドレスを通ります。