2019-09-20

Craft CMS のテーブルフィールドをユーザが自由に作れる Table Maker プラグインを試してみた #craftcms


Table Maker というプラグインがあったので試してみた。

Table Maker
https://plugins.craftcms.com/t...

プラグインをプラグインストアからインストールする。

フィールドの作成とセクションへの設定

フィールドの種類として、「Table Maker」を選択してフィールドを作成する。

そのフィールドをセクションに設定すると、こんな感じでテーブル用の入力欄が表示される。

上がテーブルの設定。下がコンテンツの投入。

こんな感じで投入できる。

デフォルトのテーブルフィールドですね。

基本は行を増やすというのはわかるのだけど、n行2列みたいな、テーブルはつくれないものかね。。。

この場合は1列目は見出しですよー、というルールにすればできそうだけど。 

データの確認

データはこんな感じでセットされてる。

テンプレート周り

データがはいってるので、表組みとしては

{{ entry.testtablemaker.table }}

と書けば以下のようなHTMLが出力される。

<table>
    <thead>
        <tr>
<th align="left" width="20">見出し1</th><th align="left" width="40">見出し2</th><th align="left" width="40">見出し3</th>
        </tr>
    </thead>
    <tbody>
<tr><td align="left">項目1</td><td align="left">値1</td><td align="left">値1−2</td></tr><tr><td align="left">項目2</td><td align="left">値2</td><td align="left">値2−2</td></tr>
    </tbody>
</table>

表示サンプル


まぁ、このマークアップが〜、とか色々気になるときは、columnsだったりrowsで取り出せばよさそう。

1列目はこんな感じで取り出したり

{% for row in entry.testtablemaker.rows %}
  {{ row[0] }}
{% endfor %}

見出し行(1行目)で取り出すなら

{% for column in entry.testtablemaker.columns %}
  {{ column.heading }} |
{% endfor %}

ってやれば見出し行の内容が取り出せる。

Redactor でテーブル作るのでもいいけど、マトリックスフィールドのブロックの1つにいれておくとか、これでもいい場合があるのかも?しれない。

フィールドの設定画面のラベルについて

フィールドの設定でラベル?っぽいのが入れられたけど、入れてみたらこんな感じだった。 

設定内容

編集画面

設定の方の名前が間違ってるんだろうなー。