# 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.

```js
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**

```js
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.**

```js
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**.

```js
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.

```js
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

```js
kontrl.table({
  name: "files",

  // Other settings

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

Or with one or more relations

```js
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**.

```js
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

```js
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

```js
// 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)
  ]
})
```