vue3-table-component v0.0.19

vue3-table-component

SampleCode

import VTable from '@makeupyourmind/vue3-table-component';

QuickStart

component

  <VTable
    v-model="selected"
    :is-loading="false"
    :use-api-sorting="false"
    :headers="headers"
    :items="desserts"
    :is-pagination-mode-enabled="false"
    :pagination-options="{
      totalPages: 1,
      perPage: 10,
    }"
    single-select
    show-select
    @handle-api-sorting="handleApiSorting"
    @row-click="rowClick"
  />

data

const selected = ref([]);

const headers = reactive([
  {
    text: 'Dessert (100g serving)', // Text that will be dipslayed in header
    // One of items shoud have key equals `name`. items = [{ name: 'Some name' }]
    // Then 'Some name' will be displayed in the header
    value: 'name',
    sortable: true, // Make column sortable
    resizable: true, // Make column resizable
    width: '350px', // Use custom width for column
  },
  {
    text: 'Calories',
    value: 'calories',
    sortable: true,
    resizable: true,
    width: '360px',
    defaultSort: 'asc|desc|ASC|DESC',
    fixed: true,
    style: {
      className: 'calories-class' | ['calories-class', 'one-more-class'],
      expectedValue: 250,
      condition: '>',
    },
  },
  {
    text: 'Fat (g)',
    value: 'fat',
  },
  {
    text: 'Carbs (g)',
    value: 'carbs',
  },
]);

const desserts = reactive([
  {
    name: 'Frozen Yogurt',
    calories: 159,
    fat: 6.0,
    carbs: 24,
  },
  {
    name: 'Ice cream sandwich',
    calories: 237,
    fat: 9.0,
    carbs: 37,
  },
  {
    name: 'Cupcake',
    calories: 305,
    fat: 3.7,
    carbs: 67,
  },
  {
    name: 'Lollipop',
    calories: 392,
    fat: 0.2,
    carbs: 98,
  },
]);

Component Props

Header props

Slots

pagination

Support slot that uses to display component pagination. By default, uses own pagination

<VTable :is-pagination-mode-enabled="true">
    <template #pagination>
    <!-- Your custom pagination goes here  -->
    </template>
</VTable>

loader

Overwrite default loader

<VTable :is-loading="true">
    <template #loader>
    <!-- Your custom loader goes here  -->
    </template>
</VTable>

Events

@handle-api-sorting - event fires when we want to use API sorting (:use-api-sorting="true"),

Send to API sortable fields in array format like [{field: 'name', order: 'asc'}]

<VTable
  ...restProps
  @handle-api-sorting="handleApiSorting"
>
</VTable>

export default {
    setup() {
        const handleApiSorting = (sortableFields) => {
          console.log('handleApiSorting', sortableFields);
          // some API request goes here where we paste these sortableFields
        };
    
        return {
          handleApiSorting
        }
    }
}

@row-click - Handle row click. As param would be the clicked item.

<VTable
  ...restProps
  @row-click="rowClick"
>
</VTable>

export default {
    setup() {
        const rowClick = (clickedItem) => {
          console.log('row click', clickedItem);
        };

        return {
          rowClick
        }
    }
}