テーブルブロックの使い方

この記事では、SANGO Gutenberg プラグインが独自に拡張したテーブルブロックについて紹介します。

SANGO Gutenbergでは独自にテーブルブロックを拡張しており、通常のテーブルブロックの機能に加え独自の機能をいくつか追加しております。

目次非表示

サンプル例

例えば、SANGO Gutenbergを使えば以下のようなテーブルが実現できます。

ヘッダー	テーブル	Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ヘッダー	テーブル	Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。

まずはエディターを開き、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「テーブルブロック」と書かれたブロックを選択します。

次に、テーブルブロックに対してSANGO Gutenbergが独自に拡張している設定項目について紹介します。

以下のように最初の列を見出しセルにすることができます。

見出し	ここに内容が入ります
見出し	ここに内容が入ります

また、見出しセルには「見出し色」「見出し背景色」を設定することで色づけすることもできます！

また、列だけではなく行に対しても同様に以下のように色付けすることができます。

見出し	見出し
ここに内容	ここに内容
ここに内容	ここに内容

行を見出しにするにはテーブルブロックに標準で備わっている「ヘッダーセクション」にチェックを入れます。

また以下のテーブルのように罫線色を変更することもできます。

ここに内容	ここに内容
ここに内容	ここに内容

ここに内容	ここに内容
ここに内容	ここに内容

またページやテーブルをスクロールした際に行や列を固定することもできます。ただし、行の固定と列の固定の併用はできませんのでご注意ください。

また、行を固定する場合、スクロールヒントと併用するとテーブルを横スクロールできることがユーザーに伝わりやすいのでおすすめです。

ヘッダー	テーブル	Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ヘッダー	テーブル	Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

テーブル内の情報によっては列が大きくなりすぎたり、または小さくなりすぎるケースがあります。そこでSANGO Gutenbergでは以下の設定でセルの最大幅、最小幅を設定できるようにしています。