Droptables: テーブルのスタイル設定

1. 表のフォーマット

ツールバーでは、フォント、フォントサイズ、テキストスタイル、セルの背景色、テキストの色、セルの水平および垂直の配置など、セルのスタイルを設定できます。これは、単一のセルまたは複数のセルに適用できます。.

行の高さと列の幅はピクセル単位で指定できます。メニューの 「書式」>「列/行のサイズを適用」を選択し、 「列のサイズ変更」または「行のサイズ変更」をクリックして 「完了」 終了してください。

2. テーマと並べ替えのオプション

があります テーマ選択 に 「テーマ」。テーマをクリックするだけで適用できます。

テーブルに既にデータがある場合、テーマを適用するとすべてのデータが削除されます。新しいテーブルにテーマを適用すると、サンプルデータとスタイルが追加され、編集できるようになります。.

同じ メニューテーマ > 代替カラーのでテーブルの線に色を付けることができます ヘッダー と フッターのスタイリング 。プラグインの設定でテンプレートスタイルを選択するか、独自のスタイルを作成できます。

sortable パラメータを使用すると、フロントエンドで AJAX によるデータソートを実行できます。 メニューの [書式] > [ソート]。

テーブルの配置とは、テーブル全体を含むdiv要素を中央揃えにするなどの調整のことです。 メニューの「書式」>「テーブルの配置」。

セルのハイライトもオプションとして利用できます。設定で「線」、「列」、「両方」のいずれかのオプションを有効にできます。デフォルトでは無効になっています。ハイライトの色と不透明度を調整できます。

セルにマウスオーバーした際にツールチップを表示する機能も利用可能です（コンポーネントオプションから有効化する必要があります）。テーブルの各セルを ツールチップ 右クリックすると

ツールチップの幅をピクセル単位で設定できます。ツールチップと編集用エディタが表示されます。.

コンテンツを追加して保存すると完了です。マウスをホバーすると、ツールチップがパブリック側に表示されます。.

4. ACLとフロントエンド管理

Joomlaのフロントエンドからテーブルを管理できます。Joomlaのメニューマネージャーから 新しいメニュー 項目を追加し、タイプとして「 テーブルの管理」を選択し、 Droptables テンプレートとして

フロントエンドから Droptables Manager を確認できるのは次の通りです。.

注：フロントエンドでテーブルマネージャーのインターフェースを全画面表示するには、 「テンプレートスタイル」> Droptables フロントエンド」を選択してください。

JoomlaユーザーグループのACLを使用して、テーブル編集アクションを制御できます。まず、テーブルを表示できるユーザーを設定するには、 「ユーザーロール」 タブ Droptables 。

から、テーブルの所有者を設定できます 「テーブル」＞「テーブルへのアクセス」

5. 行と列の固定

列の凍結

列の固定は、メニューの 「書式」>「レスポンシブオプション」。最大5列まで固定できます。列数は最初の列から数えられます。

列/行を固定するには、テーブルの高さを固定できる追加オプションがあります (テーブルコンテナーの高さが無限である可能性があるため)。.

固定する列を選択すると、テーブルをスクロールして固定された列を常に表示できるようになります。.

行の凍結

から設定できます メニューの「書式」＞「表ヘッダー」。ここからオプションをオンにして、固定する行数（最大5行）を設定できます。

テーブルの高さを設定する場合は、 レスポンシブオプションに戻ってください。

すると、設定に従ってフロントエンドで最初の行が固定されます。.

6. 列データのフィルタリング

フィルタリングオプションは、メニューの 「書式」＞「フィルタ」。公開データフィルタリングフィールドを有効にするには、クリックして有効化してください。

フィルターの例:

7. セルのパディングと境界線の半径

ツールバーには、セルのパディングと境界線の半径を調整するのに役立つ境界線アイコンがあります。.

8. カスタムCSS

でCSSを追加できます メニューの「フォーマット」>「カスタムCSS」。

セル、行、列にはそれぞれ座標があり、これらを識別してカスタムCSSを適用できます。R は行、Cは列です。ここでは、行1（r1）、列4（c4）= dtr1 dtc4です。

CSSコードはコードミラーを使って色分けされています。CSSコードは少ないコードでも問題なく動作します。

9. レスポンシブなJoomlaテーブル

テーブルはレスポンシブですか、それとも小型デバイスではスクロールが必要ですか?

列を非表示にする

Droptables 、オプションとして優先度ツールを使用してレスポンシブデザインに対応しています。デフォルトでは、レスポンシブ機能は無効になっており、オーバーフローが発生します（ただし、モバイルでは問題なく動作します）。 列を非表示にする オプションを使用するには、メニューの「フォーマット」>「レスポンシブオプション」に移動してください。

レスポンシブモードは高度な機能で、モバイル端末で列を非表示にする優先順位を設定できます。列が非表示になっている場合、列の表示/非表示を切り替えるためのチェックボックス付きのモバイルメニューが表示されます。
列のサイズはテーブル編集時に固定されます。すべての列のサイズがコンテナに対して大きすぎる場合は、オーバーフローが発生し、モバイル端末でも簡単にスクロールできるようになります。

スクロール付きの表 （列数が少ない場合に適しています）