TableComponent

This component allows you to create a custome server table. With server means it connects to a server API end-point. It depends on ValidationObserver from Vee Validate and it can receive any type of column-component created in the definition binded.

Example

TableComponent

<table-component
  :title="servicesDefinition.title"
  :records="records"
  :headers="servicesDefinition.vtable.headers"
>

export default {
  name: "App",
  data() {
    return {
      records: [],
      servicesDefinition: {
        vtable: {
          headers: [
            {
              text: "Service Id",
              value: "service_Id",
              align: "left",
              render: {
                type: NumberFormatColumnComponent,
              },
              sortable: true,
              class: "white-space-nowrap",
            },
            {
              text: "Service Name",
              value: "service_Name",
              align: "left",
              sortable: true,
              custom: true,
              render: {
                type: ContentButtonColumnComponent,
                props: {
                  content: "service_Name",
                  button: {
                    isRounded: true,
                    type: "",
                    icon: "monitor",
                    size: "is-small",
                    tooltip: {
                      label: "Visualize original values",
                      position: "is-top",
                      type: "is-white",
                    },
                  },
                },
                events: {
                  "button-clicked": this.showOriginalValues,
                },
              },
            },
            {
              text: "Service Provider",
              value: "service_Provider_Name",
              align: "left",
              sortable: true,
              custom: true,
              render: {
                type: ContentButtonColumnComponent,
                props: {
                  content: "service_Provider_Name",
                  button: {
                    isRounded: true,
                    type: "",
                    icon: "monitor",
                    size: "is-small",
                    tooltip: {
                      label: "Visualize original values",
                      position: "is-top",
                      type: "is-white",
                    },
                  },
                },
                events: {
                  "button-clicked": this.showOriginalValuesProvider,
                },
              },
            },
            {
              text: "Service Type",
              value: "service_Type_Name",
              align: "left",
              sortable: true,
              rendervalue: (v) => this.$snakeToTitle(v),
            },
            {
              text: "Event Actions",
              value: "",
              align: "left",
              render: {
                type: MultipleButtonsColumnComponent,
                props: {
                  buttons: [
                    {
                      icon: "monitor",
                      type: "is-primary",
                      tooltip: {
                        label: "Visualize events",
                        type: "is-primary",
                        position: "is-top",
                      },
                    },
                  ],
                },
                events: {
                  button0Clicked: this.visualizeServiceEvents,
                },
              },
              sortable: false,
            },
          ],
        },
        vbtn: {
          create: {
            show: false,
          },
        },
        title: "Services",
        sortTypeField: "sortType",
        findSearchField: "searchText",
        sortWithSign: true,
        sortFieldName: "sorts",
        paginationLengthField: "pageSize",
        headerIcon: "animation",
      },
    };
  },
};

Is mandatory that each column's header has it correspond value property. Is important to note that the value property is necesary not only to display a column text value, also it's received as a parameter on table sort event. If the value is not defined the sort method is not applied correctly.

The column's components available

Props

Name	Description	Type	Required	Default
title	-	`String`	`false`	"Table Component"
titleClass	-	`String`	`false`	"is-size-5"
subtitle	-	`String`	`false`	undefined
subtitleClass	-	`String`	`false`	"is-size-6"
headerIcon	-	`String`	`false`	"table-star"
headers	-	`Array`	`false`
stickyHeaders	Show a sticky table header	`Boolean`	`false`	true
isInModal	-	`Boolean`	`false`	false
records	-	`Array`	`false`
selected	-	`Object`	`false`	null
selectable	Selectable column	`Boolean`	`false`	false
focusable	-	`Boolean`	`false`	false
checkable	Column checkeable	`Boolean`	`false`	false
headerCheckable	-	`Boolean`	`false`	false
isRowChekable	-	`Function`	`false`	() => true
draggable	-	`Boolean`	`false`	false
draggableColumn	-	`Boolean`	`false`	true
dragEffect	-	`String`	`false`	"move"
isLoading	-	`Boolean`	`false`	false
isDetailed	-	`Boolean`	`false`	false
showDetailIcon	-	`Boolean`	`false`	true
showSearchFilter	-	`Boolean`	`false`	false
showTableConfigurations	-	`Boolean`	`false`	false
rowClass	-	`Function`	`false`	undefined
locale	Locale string {en, es ...} for display language on component	`String`	`false`	"es"
customHeaders	-	`Boolean`	`false`	false
opened	-	`Array`	`false`
checkedRowsIds	List of external Ids of checked rows to check	`Array`	`false`
getCheckedRows	Return [] of row objects that fit a criteria to sync to internal checked rows. Recives (ids, records)	`Function`	`false`	undefined
name	Name of the component that uses it	`String`	`false`	""

Events

Event Name	Description	Parameters
update:selected	-	-
checkedRows	-	-
clearSearch	-	-
columnDragStart	-	-
columndrop	-	-
contextmenu	-	-
dragStart	-	-
onDrop	-	-
filter	-	-
open-column-filter	-	-
cleanFilters	-	-

Slots

Name	Description	Default Slot Content
header-extra-content	-	-
header-buttons	-	-
right-header-content	-	-
footer	-	-
extra-content	Extra content	-