ServerTableLiteComponent

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

Example

<template>
  <div>
    <section>
      <server-table-lite-component
        data-url="/services/event-info"
        data-base-url="/services"
        v-bind="servicesDefinition"
      />
    </section>
  </div>
</template>;

export default {
  name: "App",
  data() {
    return {
      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: {
                  "button-clicked": 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
dataUrl	The URL to conect to the API end-point	`String`	`false`	null
dataBaseUrl	The base URL to conect to the API end-point.If it's contained in data Url it triggers the request to the end-point	`String`	`false`	null
modalWidth	The modal width	`Number`	`false`	400
stickyHeaders	Show a sticky table header	`Boolean`	`false`	true
notify	Notify Error with statusCode 500	`Boolean`	`false`	true
eventConstants	To check events errors with eventsErrorCheckMixin	`Object`	`false`	[object Object]

Events

Event Name	Description	Parameters
form-close	Fire an event to the parent when the form is closed	-
before-form-open	Fire an event to the parent before the form will open	-
form-open	Fire an event to the parent before when the form is open	-

Slots

Name	Description	Default Slot Content
extra-header-buttons	Header extra buttons	-