Table-field plugin - The field type "table" does not exist

[Akiyele]

Hi there,

i am trying to install the plugin GitHub - ragi96/table-field: A Table Field for Kirby V3 for a table field.
The error message is “The field type “table” does not exist”.
But when i understand kirby right, it is initialized in the src/index.js of the plugin?

import table from "./components/table.vue";
panel.plugin('ragi96/table-field', {
    fields: {
        'table': table,
    }
});

My blueprint:

type: fields
fields:
  modules:
    label:
      en: Page sections
      de: Seitenabschnitte
    type: blocks
    fieldsets:
      grid: fieldsets/grid
      editor: fieldsets/editor
      text-image: fieldsets/text-image
      cpt: fieldsets/cpt
      hero: fieldsets/hero
      media-image: fieldsets/media-image
      media-video: fieldsets/media-video
      gallery: fieldsets/gallery
      slider: fieldsets/slider
      slideshow: fieldsets/slideshow
      articles: fieldsets/articles
      projects: fieldsets/projects
      table:
        label: Table Block
        fields:
          table:
            label: Table
            type: table

Thanks for advises.
Greetings
Stefan

[texnixe]

You cannot use dashes in your field keys, change

 media-image

etc. either to camelCase or snake_case

[Akiyele]

Hi Sonja,
thanks for your answer.
But the

media-image

was and is working.
Even when i change it to camel case, the “type” problem still exists.
Any other advise?

[texnixe]

Does the table field work outside of the blocks field?

[Akiyele]

Same problem.
Normally the panel.plugin would invoke the field table right?
When i remove the plugin it says “Invalid field type (“table”)” so it has to be working somehow.
I noticed, that there is a table.yml in the kirby 3.5 standard version (kirby/config/blocks/table/table.yml) maybe this is somehow causing problems?

title: Article
sections:
content:
type: fields
fields:
headline:
label: Headline
type: text
intro:
label: Intro
type: textarea
text:
label: Text
type: textarea
table:
label: Table
type: table

Somehow i don’t get the blockquote to work today

[pixelijn]

I justed tested this and it work both within the blocks field as outside.

Is the plugin correctly installed in /site/plugins?

[Akiyele]

Hi pixelijn,
thanks for the help.
I just copied the folder into the structure, is there any other installation process?
What have you put in your blueprint that it was working?

[pixelijn]

That looks how it should be.

Try and delete the media folder and refresh your browser cache.

[Akiyele]

Same error message.
Could my blueprint structure be wrong?

[pixelijn]

This is what I used to test:

fields:
  table:
    label: Table field
    type: table
  blocks:
    label: Text
    type: blocks
    fieldsets:
      - heading
      - text
      - audio
      - gist
      - markdown
      table:
        label: Table Block
        fields:
          table:
            type: table

[Akiyele]

Still the same problem.
Which Kirby Version do you have?
I’ve got 3.5.3

[pixelijn]

Tested with 3.5.3.1

[Akiyele]

Ahhh, yes it works.
But not with the blocks.

[Akiyele]

Yes it does work outside of the blocks field.

[Akiyele]

I had other plugins which were destroying the table-field plugin.
Thanks for the help.

[Mattrushka]

I followed your thread and it helped me to set up the table plugin. Thanks everyone for contributing.
Everything works as expected. If I use it as a field outside blocks it works (bottom part of screenshot).
Only the preview inside a layout block is not working for me (top part of screenshot).

Note: both tables contain the same data and both table datas are perfectly shown inside my template. I am using Kirby Version 3.5.7.

Any ideas why?

[Akiyele]

Hi Mattrushka,

I havent figured out how to set up the preview.
I’ve tried couple of hours and then decided to put it aside. But would be glad if anyone had a solution.

[Mattrushka]

@Akiyele many thanks for your quick reply. I guess the only good news here is that my plugin installation works as expected

I invested couple of hours, too, to see if I can make it work in the block view. But I failed, too.

But I created a quick workaround which enables the editors to add an (optional) table title. This title is then shown in the block preview (instead of the “No entries” default).

The YAML look like this now:

table:
   label: Table Block
   fields:
      tabletitle:
         type: text
      table:
         type: table

In my case a use the table plugin in a custom block. So extend the block’s index.js with:

blocks: {
    table: {
        template:`<span>{{ content.tabletitle }}</span>`
    }
}

[Akiyele]

That’s what my colleague did too.

[Akiyele]

Hey Mattrushka,

i got it now.
That is how you could show and edit the table-field plugin in the panel overview.

import table from './components/table.vue'
panel.plugin('ragi96/table-field', {
  fields: {
    table: table,
  },
  blocks: {
    table: {
      template: `
        <table>
            <tr v-for="(row, rowIndex) in content.table" >
              <td v-for="(data, dataIndex) in row">
                <input type="text" ref="data" :value="data" @input="updateItem(content, rowIndex, dataIndex, $event)" />
              </td>
            </tr>
        </table>`,
      methods: {
        updateItem(content, rowIndex, dataIndex, event) {
          content.table[rowIndex][dataIndex] = event.target.value
          this.$emit('update', {
            ...this.content,
            ...content,
          })
        },
      },
    },
  },
})