Custom table fields

When you define a table, you can also choose how that table gets displayed.

Simple table fields

You can simple choose which fields are shown and their order by passing field names to tableFields.

kontrl.table({
  name: "users",
  
  // Other settings

  tableFields: [
    "first_name",
    "last_name",
    "email"
  ]
});

Simple dropdown Fields

tableFields are shown on the big table overview. When data is shown in a popup or in a dropdown you usually want to show less data.

This is where you use dropdownFields

kontrl.table({
  name: "users",

  // Other settings

  dropdownFields: [
    "first_name",
    "last_name"
  ]
})

Views

• A view is displayed as a column.
• A view is an advanced field.
• A view can only be used in “tableFields” and “dropdownFields.
• A view takes 1 parameter. The name of the column.

kontrl.table({
  name: "users",

  // Other settings

  tableFields: [
    "first_name",
    // Get the email and call it "Work email"
    kontrl.view("Work email").get("email")
  ]
})

Load relations

When using a view, you can also load hasOne values.

kontrl.table({
  name: "users",

  // Other settings

  relations: [
    kontrl.hasOne("avatar").fields("avatar_id").with("files")
  ],

  tableFields: [
    kontrl.view("Avatar").relation("avatar").get("url")
  ]
})

The result is that the URL will be shown from the files table.

Chaining relations

You can chain relations as much as you want.

kontrl.table({
  name: "posts",

  // Other settings

  relations: [
    kontrl.hasOne("author").fields("author_id").with("users")
  ],

  tableFields: [
    // 1. Make a view with name "Avatar"
    // 2. Get relation Author (aka users table)
    // 3. Get relation Avatar from users table
    // 4. Get the "url"
    kontrl.view("Avatar").relation("author").relation("avatar").get("url")
  ]

})

Change the type

You can display one type as another

kontrl.table({
  name: "files",

  // Other settings

  tableFields: [
    kontrl.view("image").get("url").asType(kontrl.types.image())
  ]
})

Or with one or more relations

kontrl.table({
  name: "users",

  // Other settings

  relations: [
    kontrl.hasOne("avatar").fields("avatar_id").with("files")
  ],

  tableFields: [
    kontrl.view("Avatar image").relation("avatar").get("url").asType(kontrl.types.image())
  ]
})

Split views

You can show multiple values in 1 column.

kontrl.table({
  name: "users",

  // Other settings

  tableFields: [
    kontrl.view("Name").split(
      kontrl.subView().get("first_name"),
      kontrl.subView().get("last_name")
    )
  ]
})

And lets load the avatar aswell

kontrl.table({
  name: "users",

  // Other settings

  tableFields: [
    kontrl.view("Name").split(
      kontrl.subView().relation("avatar").get("url").asType(kontrl.types.image()),
      kontrl.subView().get("first_name"),
      kontrl.subView().get("last_name")
    )
  ]
})

Custom cells

You can also add custom components to your tables.

Let’s make a mailto from our email in 3 steps.

1. Make a custom component
2. Make a custom type from that component
3. Use that type in our tableFields

// Custom mailto component
// The get("") value comes as a prop
const emailAsEmailToComponent = `{
  template: '<a class="link" @click.stop :href="prefix + data">{{ data }}</a>',
  props: ['data'],
  data: () => {
    return {
      prefix: 'mailto:'
    }
  }
}`;

// Lets make a custom type
const mailToTemplate = kontrl.customType({
  name: "mail_to",
  category: "string",
  collectionTemplate: {
    custom_component: emailAsEmailToComponent
  }
})

kontrl.table({
  name: "users",

  tableFields: [
    kontrl.view("email").get("email").asType(mailToTemplate)
  ]
})