@timus-networks/table NPM

Installation

First install package npm i @timus-networks/table
Add package to module property in nuxt.config.js file

{
  "modules": ["@nuxtjs/axios", ["@timus-networks/table", { "client": false, "typescript": false }]]
}

You can manually set the client and typescript support properties.
If you render this component on the client side, set the value to true.
If you prefer to use typescript during development, set typescript to true.
You can also set the namespace to define the module path's position within the .nuxt folder.

Language File

Set translate props to your translation method: <TnTable :translate='$t'></TnTable>

And add below text to your language files. Generally it is located in ~/locals/en.js file.

  "No Data": 'No data',
  "Total Records": 'Total {total} Records',
  "GoTo": 'Go to',
  "page": 'page',
  "Records per page": "Records per page:",

Events

The table will directly reflect the values provided from outside for select, filter, paging, and sort.
For actions like select, paging, filter and sort, specific events have been defined. When these events are triggered, the corresponding values are passed to designated methods. For example, upon making a selection, using @event-select=onSelect will activate the onSelect method, and the selected items will be passed to it. @event-select, @event-filter, @event-sort, @event-paging are defined.
When any action such as select, filter, sort, or paging is executed, the @emit event will automatically be triggered. This event aggregates the results of all the aforementioned actions into a single object. This can be especially useful for API requests, eliminating the need to merge these data separately. By using @emit=onAnyAction, you can access the aggregated data in the format {select, paging, sort, filter} in a single step.

Usage Example:

Just add data and columns attributes, and it will be handled with minimum requirements

Simple:

<template>
  <TnTable :data="tableData" :columns="tableColumns" />
</template>

Detailed:

<template>
  <div class="table-sample-page">
    <div>
      <h1 class="text-3xl font-bold w-full mb-4">Table Component Sample</h1>
    </div>

    <TnTable
      ref="table"
      height="500px"
      :data="tableData"
      :columns="tableColumns"
      :hide="[]"
      :select="tableOptions.select"
      :sort="tableOptions.sort"
      :filter="tableOptions.filter"
      :paging="tableOptions.paging"
      :translate="$t"
      no-filter
      no-select
      @event-filter="emit"
      @event-sort="emit"
      @event-select="emit"
      @event-paging="emit"
      @event="emit"
    >
      <!--
      <template #head.name>Name</template>
      <template #head.surname>Patates</template>
      <template #head.age>sad</template>
      template #filter.name>general</template>
      <template #filter.surname />
      <template #column.surname><button>...</button></template>
      <template #column.name><button>...</button></template>
      <template #column="scope">{{ scope.row }}</template>
    -->
      <template v-for="column in tableColumns" #[`column.${column.field}`]="scope">{{ scope.row[column.field] }}</template>
      <template #column.married="scope">
        <span :class="scope.row.married ? 'text-green-500' : 'text-red-500'">{{ scope.row.married ? 'Married' : 'Single' }}</span>
      </template>
    </TnTable>

    <pre class="exported mt-4 text-monospace bg-gray-50 p-2 rounded-md">
      {{ tableOptions }}
    </pre>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import { Column, TnTableEmitOutput } from '~/modules/@timus-networks/table';
  // import Hol from '@/assets/data/hollywood-50.json';

  const Hollywood = [
    {
      name: 'Johnny',
      surname: 'Depp',
      age: 58,
      birthday: '1963-06-09',
      horoscope: 'İkizler',
      height: '178cm',
      weight: '70kg',
      married: false,
    },
    {
      name: 'Sandra',
      surname: 'Bullock',
      age: 57,
      birthday: '1964-07-26',
      horoscope: 'Aslan',
      height: '171cm',
      weight: '54kg',
      married: true,
    },
  ];

  interface Data {
    tableColumns: Column[];
    tableData: any[];
    tableOptions: TnTableEmitOutput;
  }

  /* This will be your main table variables will send you backend */

  const option: TnTableEmitOutput = {
    filter: [
      { field: 'surname', value: 'Johansson' },
      {
        field: 'name',
        value: ['user-001', 'user-002', 'user-003'],
      },
    ],
    sort: [{ field: 'age', alignment: 'asc' }],
    paging: { page: 1, limit: 10, total: 323 },
    select: [Hollywood[0]],
  };

  export default Vue.extend({
    name: 'TableSample',
    data: (): Data => ({
      tableColumns: [
        /* All acceptable configuration for columns */
        {
          field: 'name',
          label: 'Name',
          width: '245px',
          sticky: 'left',
          filterConfig: {
            options: [
              { label: 'John Travolta', value: 'user-001' },
              { label: 'Scarlett Johansson', value: 'user-002' },
              { label: 'İlyas Salman', value: 'user-003' },
            ],
            type: 'select',
            multi: true,
            disable: false,
          },
        },
        /* simple (minimum) column configuration */
        { field: 'surname', label: 'Surname' },
        { field: 'age', label: 'Age', width: '200px' },
        { field: 'height', label: 'Height' },
        { field: 'weight', label: 'Weight', sticky: 'both' },
        { field: 'horoscope', label: 'Horoscope' },
        { field: 'birthday', label: 'Birthday' },
        { field: 'married', label: 'Married', sticky: 'right' },
      ],
      tableData: Hollywood, // <TnTable :data="tableData" /> The tableData property passed to the table component can either be set as an empty array or initialized with initial data.
      tableOptions: option, // handling all table options to one point
    }),
    methods: {
      emit(value: any) {
        this.tableOptions = value;
        console.log('emit:', value);
      },
    },
    mounted() {
      setTimeout(() => {
        this.tableOptions.sort = [{ field: 'surname', alignment: 'asc' }];
        this.tableOptions.select = [Hollywood[1], Hollywood[0]];
        this.tableOptions.paging.total = 2500;
        this.tableOptions.filter = [{ field: 'surname', value: 'Johansson' }];
        // this.tableData = [];
        console.log('Updated with Async Data sample');
      }, 3000);
    },
  });
</script>

Notlar

Tablo, dışarıdan sağlanan select, filter, paging ve sort değerlerini doğrudan yansıtacaktır.
select, paging ve sort gibi işlemlerin her biri için özel event'lar tanımlanmıştır. Bu event'lar tetiklendiğinde, belirlenen metotlara ilgili değerler iletilir. Örneğin, bir seçim işlemi gerçekleştiğinde @event-select=onSelect kullanılarak onSelect metodu aktif hale gelir ve seçilen öğeler bu metoda gönderilir.
Bir select, filter, sort ya da paging işlemi yapıldığında, @emit event'ı otomatik olarak tetiklenir. Bu event, yukarıda belirtilen tüm işlemlerin sonuçlarını tek bir objede toplar. Bu, API isteklerinde bu verileri ayrı ayrı birleştirmenize gerek kalmadan kullanışlı olabilir. @emit=onAnyAction kullanımıyla {select, paging, sort, filter} şeklindeki toplu bilgilere kolayca erişebilirsiniz.