jio-table

Props

Prop name	Description	Type	Values
data	The data to display in the table, this is an array of objects	Array	-
fields	The fields to display in the table, this is an array of the key names from the data object	Array	-
fieldDetails	The details of the fields to display in the table, this is an object with the field name as key and an object with "label" as value	TableFieldDetailItem	-
selectable	The option to set the table selectable or not. The value of the checkbox will return in de data array	boolean	-
sortable	The option to make the table sortable or not.	boolean	-

View on Gitlab

General

This is the standard table component.

View design in Figma

Code examples

A simple table.

<template>
  <div class="jio-core">
    <jio-table
      :data="items"
      :fields="fields"
      :fieldDetails="fieldDetails"
      :selectable="false"
      :sortable="true"
    />
  </div>
</template>

<script setup lang="ts">
const items: TableItem[] = [
  {
    column1: "AAAAA",
    column2: "BBBBB",
    column3: "CCCCCC",
    column4: "AABB",
    path: "/row-1",
  },
  {
    column1: "BBBBB",
    column2: "AAAAA",
    column3: "CCCCCC",
    column4: "AAAB",
  },
  {
    column1: "CCCCC",
    column2: "BBBBB",
    column3: "AAAAA",
    column4: "ABBB",
  },
];
const fields: TableFieldItem[] = ["column1", "column2", "column3", "column4"];
const fieldDetails: TableFieldDetailItem = {
  column1: {
    label: "Kolom 1",
  },
  column2: {
    label: "Kolom 2",
  },
  column3: {
    label: "Kolom 3",
  },
  column4: {
    label: "Kolom 4",
  },
};
</script>

jio-table ​

Props ​

General ​

Code examples ​

jio-table

Props

General

Code examples