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

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

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