@quasiris/qsc-data-table

quasiris-data-table-library

Install package

npm i @quasiris/qsc-data-table

Project setup

npm install

Build library

npm run build-lib

Publish to npm

npm publish

Run demo

npm run serve

###How to use

Add globall

import QscDataTable from '@quasiris/qsc-data-table';
Vue.component('qsc-data-table', QscDataTable);


<template>
    <qsc-data-table :columns="dataTable.columns"
                         :rows="dataTable.rows"
                         :filters="true"
                         :filters-list="searchQuery.searchFilters"
                         v-on:addFilter="handleAddFilter($event)"
                         v-on:addNotFilter="handleAddNotFilter($event)"
                         v-on:removeFilter="handleRemoveFilter($event)"
         />
</tempalte>
  <script>
    data() {
        return {
          dataTable: {
            suggestUrl: 'https://qsc-dev.quasiris.de/api/v1/search/suggest/hornbach-de/search',
            columns: ['name', 'type', 'entries', 'timestamp'],
            rows: [
              {
                name: 'quasiris',
                type: 'qsc',
                id: 1,
                entries: [
                  'entries'
                ],
                timestamp: "2021-02-10T22:20:48.638+00:00"
              },
              {
                name: 'quasiris',
                type: 'qsc',
                id: 2,
                entries: [
                  'entries'
                ]
              },
              {
                name: 'quasiris',
                type: 'qsc',
                id: 3,
                entries: [
                  'entries'
                ]
              },
              {
                name: 'quasiris',
                type: 'qsc',
                id: 4,
                entries: [
                  'entries'
                ]
              },
              {
                name: 'quasiris',
                type: 'qsc',
                id: 5,
                entries: [
                  'entries'
                ]
              },
            ],
          },
          searchQuery: {
            page: 1,
            q: "*",
            rows: 20,
            searchFilters: [{
              id: "name",
              values: ['quasiris']
            }],
            sliders: [],
          },
        }
      },
       methods:{
        
        }
 </script>