表組

データを表組形式で取り扱うことは、業務システムではとくに多いと言えるかもしれません。表示するだけでなく、データの各レコードおよびデータのまとまりとして編集するタスクも日常的です。ABUIでは業務システムのUIで有用な様々な形式の表組のパターンを揃えています。

表組は、幅の狭いスマートフォンの解像度での表示にはあまり向かない表示形式です。列数が多いものはとくにスムーズな閲覧が困難になります。本当に表形式が妥当なのかも見直した上で、掲載する情報を絞ったり、リスト形式に再編するなど、スマートフォンでのユースケースと目的に応じて、ユーザーにとって最適となるよう検討します。

行の背景色を交互に変えて区別しやすくしたり、現在マウスオーバーしている行やセルの色を変えるほか、行やセル、値をシステム機能色で着色することができます。

表組みの右肩には単位などを、下には注釈を付けられます。

入力のある表組

表組の中に入力を設けることができます。表組形式でのデータの編集はあまり大きくなく簡易なものにとどめます。巨大で複雑なスプレッドシートをブラウザ上で編集するのは動作も重くなり使い勝手もあまりよくありません。またモバイル端末には適していません。まず、そのユーザーの利用体験において本当に必要な入力がなんなのかをユーザー目線できちんと定義した上で、それでも大きな表組み形式での入力に合理性がある場合はExcelやGoogleスプレッドシートなどのスプレッドシートアプリで編集したデータをアップロードして入力する方式を検討します。

表組に行を追加したり、表組の行を並び替えるための各種パターンも用意されています。

スクロール

テーブルヘッダーの追従

高さを成りゆきにした表組の場合、スクロールによってテーブルヘッダーが見えなくなると、各列が何を表しているのかわかりづらくなる場合があります。スクロールに合わせてテーブルヘッダーを追従させることでこれを解決できます。

複雑な固定／スクロール

テーブルのヘッダーや先頭・末尾のカラムを固定できます。列数が多い場合は、まずは表示の必要性が低い列を削除することを検討します。それでも列数が多い場合、先頭からいくつか識別に必要な列を固定し、残りの列を表組内でスクロールします。各行の右端にボタンがあるような場合は、右端の列も固定できます。この場合各行のセルの結合はできません。

行の折りたたみ

行を折りたたんでおくことができます。表組みの高さは成りゆきになります。