メインコンテンツにスキップ

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

1. 表のフォーマット

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

 

テーブル形式

 

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

 

行と列のサイズ

 

 

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

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

 

テーマ選択

 

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

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

 

代替色

 

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

 

並べ替えとフィルターテーブル

 

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

 

テーブルアライン

 

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

 

テーブルの強調表示

 

3.セルにツールチップを追加します

セルのマウスホバーに関するツールチップも利用できます (コンポーネント オプションから有効にする必要があります)。 テーブル上の各セルを右クリックするとツールチップ

 

テーブルセルツールチップ

 

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

 

ツールチップエディタ

 

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

 

ツールチップホバー

 

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

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

 

メニュー- droptables

 

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

 

Droptablesテーブル- Droptablesエンド

 

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

 

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

 

フロントエンドテーブルエディション

 

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

 

ユーザーグループACL

 

5. 行と列の固定

カラム凍結

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

 

凍結カラム

 

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

 

テーブルの高さ

 

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

 

修正行表示

 

行のフリーズ

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

 

行フリーズテーブルヘッダー

 

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

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

 

行凍結

 

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

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

 

ソートフィルター

 

フィルターの例:

 

データフィルター

 

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

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

 

パディングボーダー

 

 

8.カスタムCSS

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

 

カスタムCSS

 

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

 

css座標

 

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

 

css-custom-table

 

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

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

列を非表示にする

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

 

レスポンシブ-非表示-列

 

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

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

 

レスポンシブテーブルスクロール

 

列が非表示になっているテーブル(大量の列の場合に適しています)

 

レスポンシブテーブルカラムハイド

 

繰り返されるヘッダー

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

 

繰り返しヘッダー

 

ご要望に応じてカスタマイズできるオプションがあります:

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

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

 

繰り返しヘッダーフロントエンド

 

10. ダウンロード表

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

 

エクスポート-Excel

 

11.ページ付け

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

 

ページネーションオプション

 

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

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

 

日時セル

 

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

 

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

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

 

印刷ボタン