Droptablesテーブル：スタイリングテーブル

1.テーブルでフォーマットする

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

行の高さと列の幅はピクセル単位で定義できます。 [メニュー形式]>[列/行サイズの適用列のサイズ変更]/[行のサイズ変更]を選択。ポップアップウィンドウで、範囲を選択し、列または行にpxを設定できます。 [完了]ボタンをクリックして終了します。

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

各表のメニューテーマにテーマ選択オプションがあります。テーマをクリックするだけで適用できます。

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

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

sortableパラメーターを使用すると、フロントエンドでAJAXデータを並べ替えることができます。 メニュー形式>並べ替えで確認できます。

テーブルの配置とは、テーブル全体を含むdivを配置することです。たとえば、すべてのテーブルを中央に配置します。 メニューフォーマット>テーブルアラインで見つけることができます。

セルのハイライトもオプションとして利用できます。構成で[行]、[列]、または[両方]オプションを有効にできます。デフォルトでは無効になっています。ハイライトの色と不透明度を調整できます。

セルマウスホバーのツールチップも利用できます（コンポーネントオプションからアクティブ化する必要があります）。テーブルの各セルで、右クリックするとツールチップオプションが表示されます。

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

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

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

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

これが、フロントエンドからDroptablesを見ることができるものです。

注：フロントエンドでテーブルマネージャインターフェイスを全画面で表示するには、 [テンプレートスタイル]> [ Droptablesフロントエンド]を選択する必要があります。

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

テーブルの所有者は、[メニューテーブル]>[テーブルアクセス]から設定できます。

5.行と列のフリーズ

カラム凍結

列のフリーズは、[メニュー形式]>[レスポンシブオプション。最大5列までフリーズできます。最初の列から数えます。

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

フリーズする列を選択すると、テーブルをスクロールして、常に固定列を表示できます。

行のフリーズ

これは、 [メニュー形式]> [テーブルヘッダー]にあります。ここから、オプションをオンにして、行をフリーズするように設定できます（最大5行）。

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

次に、設定に続いて、最初の行がフロントエンドでフリーズされます。

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

フィルタリングオプションは、[メニュー形式]>[フィルター。クリックしてパブリックデータフィルタリングフィールドを有効にすると、アクティブにできます。

フィルターの例：

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

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

8.カスタムCSS

一歩先を行きましょう。 [メニュー形式]>[カスタムCSS]でCSSを追加できます。

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

CSSコードは、コードミラーを使用して色付けされています。 CSSコードはコードを少なくすることができ、それも機能します！

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

私のテーブルは応答性がありますか、それとも小さなデバイスでスクロールを使用しますか？

列を非表示にする

Droptablesオプションとして優先ツールを使用してレスポンシブデザインを処理します。デフォルトでは、レスポンシブ機能は無効になっているため、オーバーフローが発生します (ただし、モバイルではうまく機能します)。 非表示列オプションを使用するには [メニューフォーマット] > [レスポンシブオプション] に移動する必要があります。

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

スクロール付きのテーブル（少量の列に適しています）

列が非表示のテーブル（大量の列に適しています）

繰り返されるヘッダー

これは、サイトの小さな領域にテーブルを挿入する場合のもう1つのオプションです。 [メニュー形式]>[レスポンシブオプション]に移動する必要が次に、[レスポンシブタイプ]>[繰り返しヘッダー]を選択します。

あなたの要求に応じてカスタマイズするオプションがあります：

レスポンシブブレークポイント（px）：ピクセル単位でブレークポイント値を選択して、テーブルがこのレスポンシブモードに切り替わるタイミングを定義します
レスポンシブ最大高さ（px）：レスポンシブモードがアクティブになっている場合、ブレークポイント値に応じて、テーブルが非常に長くならないように最大高さを定義します
レスポンシブモードのスタイリング：このレスポンシブモードにデフォルトのスタイリングを適用するか、テーブルの色を使用します

その後、フロントエンドでテーブルがどのように表示されるかを確認できます。

10.表をダウンロード

テーブルを一般のユーザーと共有するには、 [メニューテーブル]、 [Excel のエクスポート] ボタンオプションにチェックを入れます。フロントエンドでダウンロードする場合、ファイルの種類は *.xlsx になります。

11.ページ付け

この機能は、各テーブルエディションの[メニュー形式]>[ページ付け] トグルボタンを使用して、ページに表示する行数を有効にして選択します。

12.単一セルのフォーマット

フォーマットを設定できます：日時、通貨、 Droptables。まず、a/multiセルを選択する必要があります。次に、 [メニュー形式]>[日時]に移動します。

その後、通貨と数は同じ方法で行うことができます。

13. フロントエンドの印刷テーブル

場合によっては、表を印刷する必要があります。、フロントエンドに印刷ボタンを表示するにはメニューテーブル印刷ボタンにチェックを入れる。