DataTabsServerTableLiteVisualizer

<template>
  <div>
    <data-tabs-server-table-lite-visualizer
      :active-tab="activeTab"
      :tabs="tabs"
      :data-url="dataUrl"
      @input="handleInputTab"
    >
      <template #header-extra-content>
        <!-- Header extra content slot -->
      </template>
      <template #top-extra-content>
        <!-- Top extra content slot -->
      </template>
    </data-tabs-server-table-lite-visualizer>
  </div>
</template>

export default {
  name: "App",
  data() {
    return {
      activeTab: 'first',
      dataUrl: '/first',
      tabs: [
        {
          id: 'first',
          label: 'First',
          title: 'First ',
          dataUrl: '/first',
          tableItems: {
            title: 'First table',
            // ...tableDefinition,
          },
        },
        {
          id: 'second',
          label: 'Second',
          title: 'Second ',
          dataUrl: '/second',
          tableItems: {
            title: 'Second table',
            // ...tableDefinition,
          },
        },
        {
          id: 'third',
          label: 'third',
          title: 'third',
          dataUrl: '/third',
          tableItems: {
            title: 'third',
            // ...tableDefinition,
          },
        },
      ],
    }
  },
  methods: {
    handleInputTab(value) {
      this.activeTab = value
    },
  }
}