GTable Examples ​

Basic table ​

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">
      <GTable :headers="headers" :items="items" :pagination="true" :items-per-page="5"
        classes="table-striped table-hover" />

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';

const headers = ref<GTableHeader[]>([
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' },
  { title: 'Email', field: 'email' }
]);



const items = ref([
{ id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
  { id: 3, name: 'Heinz Doe', email: 'heinz@example.com' },
  { id: 4, name: 'Carla Smith', email: 'carla@example.com' },
  { id: 5, name: 'Fiona Doe', email: 'fiona@example.com' },
  { id: 6, name: 'Max Smith', email: 'max@example.com' },
  { id: 7, name: 'Lotte Doe', email: 'lotte@example.com' },
  { id: 8, name: 'Alan Smith', email: 'alan@example.com' },
  { id: 9, name: 'Aaron Doe', email: 'aaron@example.com' },
  { id: 10, name: 'Bob Smith', email: 'bob@example.com' },
  { id: 11, name: 'Alice Doe', email: 'alice@example.com' },
  { id: 12, name: 'Steve Smith', email: 'steve@example.com' }
]);

</script>

Use render function to create cell content ​

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">
      <GTable :headers="headers" :items="items" :pagination="true" :items-per-page="5"
        classes="table-striped table-hover" />

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';

const headers = ref<GTableHeader[]>([
  { title: "ID", field: "id" },
  {
    title: 'Name',
    render: (item: any) => {
      return (
        item.firstname + " " + item.name
      );
    },
  },
  { title: 'Email', field: 'email' }
]);

const items = ref([
  { id: 1, firstname: 'John', name: 'Doe', email: 'john@example.com' },
  { id: 2, firstname: 'Jane', name: 'Smith', email: 'jane@example.com' },
  { id: 3, firstname: 'Heinz', name: 'Doe', email: 'heinz@example.com' },
  { id: 4, firstname: 'Carla', name: 'Smith', email: 'carla@example.com' },
  { id: 5, firstname: 'Fiona', name: 'Doe', email: 'fiona@example.com' },
  { id: 6, firstname: 'Max', name: 'Smith', email: 'max@example.com' },
  { id: 7, firstname: 'Lotte', name: 'Doe', email: 'lotte@example.com' },
  { id: 8, firstname: 'Alan', name: 'Smith', email: 'alan@example.com' },
  { id: 9, firstname: 'Aaron', name: 'Doe', email: 'aaron@example.com' },
  { id: 10, firstname: 'Bob', name: 'Smith', email: 'bob@example.com' },
  { id: 11, firstname: 'Alice', name: 'Doe', email: 'alice@example.com' },
  { id: 12, firstname: 'Steve', name: 'Smith', email: 'steve@example.com' }

]);

</script>

Use slots to pass template fragment to build cell content ​

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">
      <GTable :headers="headers" :items="items" :pagination="true" :items-per-page="5"
        classes="table-striped table-hover">

        <template #tmplUserActions="data">
          <div class="btn-group btn-group-sm" role="group" aria-label="User actions">
            <button type="button" class="btn btn-outline-primary">
              <i class="bi-pencil"></i> button with user id: {{
              data.value.id }}
              </button>
            <button type="button" class="btn btn-outline-primary" 
              @click="deleteItem(data.value)"><i
                class="bi-trash3"></i> delete example</button>
          </div>
        </template>

      </GTable>
    </div>
  </div>


  <!-- Bootstrap Modal -->
  <div class="modal fade" id="modalUserDelete" tabindex="-1" aria-labelledby="Delete User" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Example dialog</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Just a dialog example with row data: {{ toBeDeleted.id }} {{ toBeDeleted.email }}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="closeDelete">Cancel</button>

        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';
import { Modal } from 'bootstrap';


const headers = ref<GTableHeader[]>([
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' },
  { title: 'Actions', field: 'tmplUserActions' }
]);

const items = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
  { id: 3, name: 'Heinz Doe', email: 'heinz@example.com' },
  { id: 4, name: 'Carla Smith', email: 'carla@example.com' },

]);

const toBeDeleted = ref({});

function deleteItem(item: any) {
  toBeDeleted.value = item;
  const deleteModal = new Modal('#modalUserDelete', {});
  deleteModal.show();
}


function closeDelete() {
  toBeDeleted.value = {};
}

</script>

Use slots to show/modify loading and empty status ​

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">
      <GTable :headers="headers" :items="items" :pagination="true" 
        :items-per-page="5" 
        :showLoading="true"
        :loading="loading" classes="table-striped table-hover">

        <template #tmplLoading>
          <div class="col text-center">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </div>
        </template>

        <template #tmplEmpty>
          <div class="col text-center">
            <i class="bi bi-inbox"></i> No data available.
          </div>
        </template>

      </GTable>

      <p>
        <button class="btn btn-warning" @click="stopLoading">Stop loading</button> <button class="btn btn-success"
          @click="startLoading">Start loading again</button>
      </p>

    </div>
  </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';

const headers = ref<GTableHeader[]>([
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' }
]);

const items = ref([]);

const loading = ref(true);

function stopLoading() {
  loading.value = false;
}

function startLoading() {
  loading.value = true;
}

</script>

Checkbox styles ​

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">

      <h4 class="h4">Default style</h4>
      <div>
        <GTable :headers="headers" :items="items" :pagination="false" :items-per-page="5"
          classes="table-striped table-hover" />
      </div>

      <h4 class="h4">Switch style</h4>
      <div>
        <GTable :headers="headers2" :items="items" :pagination="false" :items-per-page="5"
          classes="table-striped table-hover" />
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';

const headers = ref<GTableHeader[]>([
  { field: "id", type: "checkbox" },
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' },
  { title: 'Email', field: 'email' }
]);

const headers2 = ref<GTableHeader[]>([
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' },
  { field: "id", type: "checkbox", checkboxStyle: "switch" },
  { title: 'Email', field: 'email' },
]);

const items = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
  { id: 3, name: 'Heinz Doe', email: 'heinz@example.com' },
  { id: 4, name: 'Carla Smith', email: 'carla@example.com' },

]);

</script>

Preset checkbox cells with callback function ​

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">
      <GTable :headers="headers" :items="items" :pagination="false" :items-per-page="5"
        classes="table-striped table-hover" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';

const headers = ref<GTableHeader[]>([
  {
    title: "", field: "id",
    type: "checkbox",
    checkboxStyle: "switch",
    isChecked: (item: any) => {
      return (item.rights > 500 ? true : false);
    }
  },
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' },
  { title: 'Email', field: 'email' }

]);

//
// example: user data with some rights values, admin access when value > 500
// 
const items = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com', rights: 100 },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', rights: 750 },
  { id: 3, name: 'Heinz Doe', email: 'heinz@example.com', rights: 0 },
  { id: 4, name: 'Carla Smith', email: 'carla@example.com', rights: 1000 },

]);

</script>

Get checkbox state change by event ​

Every time the state of a checkbox changes, an event is triggered and passed to the parent component. If multiple checkboxes in the table rows are changed by the checkbox in the table header, multiple events will be triggered, i.e. one event for each changed row state.

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">
      <GTable :headers="headers" :items="items" :pagination="false" :items-per-page="5"
        classes="table-striped table-hover" 
        checkEvent="myCheckEvent" @myCheckEvent="rightChanged" />
    </div>
    <div class="col-12">
      <p>
        Event Payload Dump: {{ currentPayload }}
      </p>
      <p>
        <button class="btn btn-primary" @click="clearPayload">Clear Payload</button>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';

const headers = ref<GTableHeader[]>([
  {
    title: "", field: "id",
    type: "checkbox",
    checkboxStyle: "switch",
    isChecked: (item: any) => {
      return (item.rights > 500 ? true : false);
    }
  },
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' },
  { title: 'Email', field: 'email' }

]);

const items = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com', rights: 100 },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', rights: 750 },
  { id: 3, name: 'Heinz Doe', email: 'heinz@example.com', rights: 0 },
  { id: 4, name: 'Carla Smith', email: 'carla@example.com', rights: 1000 },

]);

const currentPayload = ref([]);

function rightChanged(payload: any) {
  // do something with payload data!
  currentPayload.value.push(payload);
}

function clearPayload() {
  currentPayload.value = [];
}

</script>

Expand table row to display more information ​

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">
      <GTable :headers="headers" :items="items" :pagination="true" :items-per-page="5"
        classes="table-striped table-hover">

        <template #tmplExpandSomething="data">
          <div class="card card-body"><!-- {{  data.value }} -->
            <p>Got index of table row and item data of expanded row in slot props: {{ data }}. <br />So it's possible to
              display some additional information in a larger place, for example:
            </p>
            <p>Favorite car brand: {{ data.item.car }}

            </p>
          </div>
        </template>

      </GTable>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';

const headers = ref<GTableHeader[]>([
  { title: 'More Info', field: 'tmplExpandSomething', type: 'expandable' },
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' },
  { title: 'Email', field: 'email' }
]);


const items = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com', car: 'Mercedes' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', car: 'Volkswagen' },
  { id: 3, name: 'Heinz Doe', email: 'heinz@example.com', car: 'Tesla' },
  { id: 4, name: 'Carla Smith', email: 'carla@example.com', car: 'Chevrolet' },
  { id: 5, name: 'Fiona Doe', email: 'fiona@example.com', car: 'Toyota' },
  { id: 6, name: 'Max Smith', email: 'max@example.com', car: 'Zastava' },
  { id: 7, name: 'Lotte Doe', email: 'lotte@example.com', car: 'Audi' },
  { id: 8, name: 'Alan Smith', email: 'alan@example.com', car: 'BMW' },
  { id: 9, name: 'Aaron Doe', email: 'aaron@example.com', car: 'Hyundai' },
  { id: 10, name: 'Bob Smith', email: 'bob@example.com', car: 'Ford' },
  { id: 11, name: 'Alice Doe', email: 'alice@example.com', car: 'Renault' },
  { id: 12, name: 'Steve Smith', email: 'steve@example.com', car: 'Volvo' }
]);

</script>

Expand table row, get data of expanded row by expand event ​

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">

      <GTable :headers="headers" :items="items" :pagination="false" :items-per-page="5"
        classes="table-striped table-hover" 
        expandEvent="expand-row" @expand-row="expandRowListener">

        <template #tmplExpandSomething="data">
          <div class="card card-body">
            <p>Display some senseful information here...
            </p>
          </div>
        </template>

      </GTable>
    </div>

    <div class="col-12">
      <p class="h5">
        Data of current expand event which is fired when expand or collapse row
      </p>
      <p>
        Index: {{ eventData.index }}<br>
        Expanded status: {{ eventData.expanded }}<br>
        Item content: {{ eventData.item }}
      </p>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';

const headers = ref<GTableHeader[]>([
  { title: 'More Info', field: 'tmplExpandSomething', type: 'expandable' },
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' },
  { title: 'Email', field: 'email' }
]);

const items = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com', car: 'Mercedes' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', car: 'Volkswagen' },
  { id: 3, name: 'Heinz Doe', email: 'heinz@example.com', car: 'Tesla' },
  { id: 4, name: 'Carla Smith', email: 'carla@example.com', car: 'Chevrolet' },
  { id: 5, name: 'Fiona Doe', email: 'fiona@example.com', car: 'Toyota' }

]);

const eventData = ref(<any>{});

function expandRowListener(event: any) {
  eventData.value['expanded'] = event.expanded;
  eventData.value['index'] = event.index;
  eventData.value['item'] = event.item;
}


</script>

Expand table with integrated expand/collapse button in header or by function call from the parent component ​

Code snippet ​

vue
<template>
  <div class="row">
    <div class="col-12">
      <GTable ref="gtable10" :headers="headers" :items="items" :pagination="true" :items-per-page="5"
        classes="table-striped table-hover">

        <template #tmplExpandSomething="data">
          <div class="card card-body"><!-- {{  data.value }} -->
            <p>Got index of table row and item data of expanded row in slot props: {{ data }}. <br />
              So it's possible to display some additional information in a larger place, for example:
            </p>
            <p>Favorite car brand: {{ data.item.car }}

            </p>
          </div>
        </template>

      </GTable>

    </div>
    <div class="col-12">
      <p class="m-3">
        <button class="btn btn-warning" @click="collapseTest">Collapse All</button>&nbsp;
        <button class="btn btn-warning" @click="expandTest">Expand All</button>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GTable } from 'goar-components';
import type { GTableHeader } from 'goar-components';

const gtable10: any = ref(null);

const headers = ref<GTableHeader[]>([
  { title: 'More Info', field: 'tmplExpandSomething', type: 'expandable', expandableAll: true },
  { title: "ID", field: "id" },
  { title: 'Name', field: 'name' },
  { title: 'Email', field: 'email' }
]);

const items = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com', car: 'Mercedes' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', car: 'Volkswagen' },
  { id: 3, name: 'Heinz Doe', email: 'heinz@example.com', car: 'Tesla' },
  { id: 4, name: 'Carla Smith', email: 'carla@example.com', car: 'Chevrolet' },
  { id: 5, name: 'Fiona Doe', email: 'fiona@example.com', car: 'Toyota' },
  { id: 6, name: 'Max Smith', email: 'max@example.com', car: 'Zastava' },
  { id: 7, name: 'Lotte Doe', email: 'lotte@example.com', car: 'Audi' },
  { id: 8, name: 'Alan Smith', email: 'alan@example.com', car: 'BMW' },
  { id: 9, name: 'Aaron Doe', email: 'aaron@example.com', car: 'Hyundai' },
  { id: 10, name: 'Bob Smith', email: 'bob@example.com', car: 'Ford' },
  { id: 11, name: 'Alice Doe', email: 'alice@example.com', car: 'Renault' },
  { id: 12, name: 'Steve Smith', email: 'steve@example.com', car: 'Volvo' }
]);


function collapseTest() {
  gtable10.value.collapseAll();
}

function expandTest() {
  gtable10.value.expandAll();
}

</script>