Table

Full featured table component.

Usage

<script setup>
import { Table } from 'gurunkit';
</script>

<template>
  <Table
    :columns="[
      { id: 'name', name: 'Name' },
      { id: 'email', name: 'Email' },
    ]"
    :data="[
      { name: 'Josh', email: 'josh@email.com' },
      { name: 'Admin', email: 'admin@email.com' },
      { name: 'Lim', email: 'lim@email.com' },
    ]"
  />
</template>

Name	Email
Josh	josh@email.com
Admin	admin@email.com
Lim	lim@email.com

Column

Set table columns via the columns prop. It is should be an array of object with the following structure:

• id the key of each data item that will displayed.
• name the column name.

Data

Set table data via the data prop. It is should be an array of object with any structure.

Each object should have a property defined as the id in the columns prop.

Custom Column Value

You can render a custom value in specific column by adding a value property to the object in the columns array.

The value property should be a valid function that returns a a string and receive an item prop containing the rendered item.

{
  id: 'name',
  name: 'Name',
  value: ({ item }) => `Name: ${item.name}`
}

Example:

<script setup>
import { Table } from 'gurunkit';
import { h } from 'vue';
</script>

<template>
  <Table
    :columns="[
      {
        id: 'name',
        name: 'Name',
        value: ({ item }) => `Name: ${item.name}`,
      },
      { id: 'email', name: 'Email' },
    ]"
    :data="[
      { name: 'Josh', email: 'josh@email.com' },
      { name: 'Admin', email: 'admin@email.com' },
      { name: 'Lim', email: 'lim@email.com' },
    ]"
  />
</template>

Name	Email
Name: Josh	josh@email.com
Name: Admin	admin@email.com
Name: Lim	lim@email.com

Custom Render Column

You can render a custom component in specific column by adding a render property to the object in the columns array.

The render property should be a valid component that will be rendered and receive an item prop containing the rendered item.

{
  id: 'name',
  name: 'Name',
  render: ({ item }) => h('p', { class: 'font-bold' }, item.name)
}

Example:

<script setup>
import { Table } from 'gurunkit';
import { h } from 'vue';
</script>

<template>
  <Table
    :columns="[
      {
        id: 'name',
        name: 'Name',
        render: ({ item }) => h('p', { class: 'font-bold' }, item.name),
      },
      { id: 'email', name: 'Email' },
    ]"
    :data="[
      { name: 'Josh', email: 'josh@email.com' },
      { name: 'Admin', email: 'admin@email.com' },
      { name: 'Lim', email: 'lim@email.com' },
    ]"
  />
</template>

Name	Email
Josh	josh@email.com
Admin	admin@email.com
Lim	lim@email.com

Empty Message

When the data props is empty, an empty message is displayed. Use the empty-message prop to customize the message.

<script setup>
import { Table } from 'gurunkit';
import { h } from 'vue';
</script>

<template>
  <Table
    :columns="[
      { id: 'name', name: 'Name' },
      { id: 'email', name: 'Email' },
    ]"
    :data="[]"
    empty-message="Tidak ada data"
  />
</template>

Name	Email
Tidak ada data

API

Props

Name	Type	Required	Default	Description
columns	{ id: string, name: string, render?: Vue.Component, value?: ({ item: any }) => string }[]	✅	[]	Table columns
data	any[]	❌	[]	Table data
empty-message	string	❌	Empty data	Message show when data is empty