すべてのAppSmithでテーブルを使用して知っておく必要があります

Statistical data and database information are often represented using table models. These models might be used to represent large amounts of data sets hence there is a need for customization between table sets to help distinguish them. Finding a suitable application to help develop tables that meet up to these requirements is often times an uphill task. Appsmith is an open-source framework that enables developers to easily build internal tools for applications and add functionality to it. With Appsmith we can also build tables, link them up to an API or database and perform crud applications with it.

ゴール
このチュートリアルでは、AppSmithのスタイルテーブルのスタイルを学びます.また、どのように学びます
外観を変更するには、テーブルのさまざまな側面をカスタマイズするには
表データが表示されます.別のテーブルに別のスタイルを適用すると、それらを区別するために役立ちます.

なぜスタイルテーブルを必要とするのですか
AppSmith上の多数のテーブルを構築している状況では、これらのテーブルを区別できるようにするために、各テーブルにラベルを追加する必要があります.また、色のグラデーション、セルの色、罫線、ボックスの影からの各個々のテーブルに異なるスタイルを適用することができます.スタイリングは、テーブルの全体的な外観を改善し、スタイルが具体的に格納されたデータを識別するために使用されるときに、それが簡単に視聴者がテーブルで見る必要があることを特定することができます.例えば、テーブルは、アカウント内の利益や損失を反映したテーブル列の特定のセル色を持つことができ、これは、テーブル内の一般的なアクセスと理解性を容易にするために、組織内でテーブルを作成することができます.我々は多くのスタイルの影から、テキストや背景色の他の間で適用することができます.

どのようにスタイリング作品appsmithで
AppSmithテーブルは、行と列のデータソースからデータを表す順序形式を提供します.このテーブルはまた、大量のデータを表示するために使用することができ、データは、表示されるデータの量がページごとに制限されているサーバー側のページ付けの形式で配置することができます.以下にいくつかの例を挙げます.


AppSmithはプロパティペインを提供します.このパネルには、テーブル内のデータソース、行、列、およびそれらに対して実行できるアクションが含まれます.ウィジェットでさまざまな結果を生成するために適用できる多数のスタイルも、プロパティペインで見つかります.このスタイルペインを取得するには、スタイルを希望するウィジェットを選択し、cog-wheel 右上のアイコン.The Style セクションは、ポップアップメニューの下部にあります.

このパネルは、どのウィジェットが選択されているかによって異なります.上の画像はStyle テーブルウィジェットのパネル.トップから始まると、我々はfolliowingオプションがあります:あるCell Background , the Text Color , Font Style , Text Align and Vertical Alignment . 我々は、このチュートリアルの過程でこれらのオプションを通過し、それぞれの効果を議論します.
これらのスタイルのオプションではJavaScriptのトグルボタンがあります.をクリックするJS トグルボタンは、オプションの入力のモードを変更し、適用するプロパティの文字またはJavaRptの文字列を入力します.例えば、Js 可視プロパティをトグルし、フィールドに「false」を入力したり、{{false}} . 後者は口ひげ構文で囲まれたJavaScriptです.このチュートリアルの後半部分では、口ひげ構文がどのようなものであり、使用方法についてもっとお話します.

テーブルのスタイリング
以下に、いくつかのデータを持つテーブルウィジェットがあります.あなたのテーブルを選択する場合は、あなたのテーブルを編集するために使用できるギアのアイコンを持つポップアップを取得します

ギアアイコンをクリックすると、テーブルを編集するには、プロパティペインが開きます.ペインをスクロールすると、スタイルをテーブルに追加するセクションが表示されます.


セル背景とテキストカラー
このセクションでは、AppSmithによって提供されるさまざまなスタイルについて学び、どのようにテーブルを使用して異なる結果を生成することができます.の最初の2つのオプションStyles セクションでは、オプションを私たちのテーブルの背景の色を変更すると我々のテキストの色を提供します.

上で、私は私の細胞の背景のために黒い色を選びました、そして、私は私のテキスト色を白にセットしました.代わりに、プロパティフィールドの色のための16進数コードを入力することによってここで提供されるもの以外の異なる色を使用することができます.例として、16進法のコードがある紫色です.#ed18cd . あなたがパレットから色を選ぶことができて、あなたがCoolorsをチェックすることができるか、あなたのブラウザーのために拡張を得ることができる16進コードを得るサイトを探すならば.

フォントサイズの変更
次のオプションは、私たちの能力を我々のテーブル内のテキストのフォントサイズを変更することができます.“見出し1”から最大のフォントサイズと“段落2”最小フォントサイズであるから選択するさまざまなオプションがあります.

ここでは、「テキストサイズ」プロパティを見出し1に設定することで、私のテーブルのフォントサイズを増やしました.
フォントスタイル、テキスト整列、垂直方向の配置
残りの3つのオプションを使用すると、フォントスタイルをカスタマイズすることができますし、水平方向と垂直方向にテキストを正当化する.

同時に“大胆”と“斜体”のフォントスタイルを同時に追加することができます.テキストのAlignプロパティを使用すると、左、中央または右のセルのいずれかのテキストを配置するオプションを提供します.言い換えれば、それは私たちの水平軸にテキストを配置することができます.次のプロパティは、垂直方向の配置を使用して、テーブルのテキストの垂直位置を調整します.最初のオプションは、セルの上部にテキストを配置し、2番目の位置は、テキストを中心と最後の位置は、セルの下部にあるテキスト.
また、これらのスタイルをテーブル全体に適用するのではなく、特定のセルだけを対象としてこれらのスタイルを適用することができます.

条件の履行に基づくスタイルの追加
AppSmithは、特定の基準を満たす特定のテーブルの要素にスタイルを提供できる機能を提供します.JavaScriptを使用してこの基準を定義することができます.また、どのようなスタイルを適用すべきかを示します.これを行うには、この条件を適用する列にプロパティペインを開きます.

以上で、私はphone カラム.この列のテキスト色を設定する条件を追加します.我々は、電話列の各行の値が偶数か奇数で、特定の色を割り当てるかどうかチェックします.プロパティーペイン要素にJavaScriptを追加することができますmustache . これは主に2つの巻き括弧で囲まれたJavaScriptコードです{{ }} . この構文を使用すると、JavaScriptデータや関数をテーブルに追加できます.

  {{currentRow.phone %2 == 0? "red" : "blue"}}

JavaScript関数の書き方に関するいくつかの例は、appsmithドキュメントにあります.上記のコマンドは、行が偶数であるかどうかを調べます.これを追加することができますText Color あなたの列のオプション.有効にするJS フィールドにJavaScriptを作成し、上のスニペットを追加できるようにトグルします.

ここでは、フィールドはphone 列の赤のテキストの色を持っている他の青のテキストの色があります.特定の基準が満たされるならば、あなたは異なるスタイルをテーブルに適用することができます.

セル背景色としてグラデーションの追加
AppSmithは、我々は通常のように背景色としてグラデーションを追加することができますCSS Stylesheet . ここでの例ですCSS 勾配

linear-gradient(90deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%)

我々は、我々の中でこれを加えることができますBackground プロパティー

結果の色の変更は、テーブルのウィジェットで行われます.

内部ツールビルダとしてのAppsmithの他の応用
AppSmithは内部ツールの多くを構築するための機能の多くを提供しています.AppSmithでは、管理パネル、ダッシュボード、ワークフロー、アプリケーションを構築することができます.AppSmithはいずれかのUIウィジェットを使用してゼロからこれらの内部ツールを作成するオプションを提供したり、選択した内部ツールを作成するために既存のテンプレートをカスタマイズすることができます.
あと何?AppSmithを使用すると、内部ツールにデータベースやAPIからデータを供給することができます.また、更新を追加することができますし、右からAppSmithからのクルーズ操作を実行します.

結論
この記事では、我々はどのようにより良い視覚的な外観のためのappsmithのスタイルテーブルをカバーし、他のテーブルと区別する手段として機能するカバー.