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

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

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

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

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

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

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

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

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

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

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

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

データの確認

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

テンプレート周り

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

{{ entry.testtablemaker.table }}

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

<table>
    <thead>
        <tr>
<th align="left" width="20">見出し１</th><th align="left" width="40">見出し２</th><th align="left" width="40">見出し３</th>
        </tr>
    </thead>
    <tbody>
<tr><td align="left">項目１</td><td align="left">値１</td><td align="left">値１−２</td></tr><tr><td align="left">項目２</td><td align="left">値２</td><td align="left">値２−２</td></tr>
    </tbody>
</table>

表示サンプル

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

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

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

見出し行（１行目）で取り出すなら

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

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

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

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

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

設定内容

編集画面

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