Now I can render in the column only prop value.

It will be great if I can render my template for each prop, e.g.:

<template>
  <vue-virtual-table
    :config="tableConfig"
    :data="tableData"
  >
    <template slot-scope="scope" slot="user-info">
      <div>{{scope.info}}</div>
    </template>

    <template slot-scope="scope" slot="age-info">
      <div>{{scope.info}}</div>
    </template>
  </vue-virtual-table>
</template>

<script>
import VueVirtualTable from 'vue-virtual-table'
export default {
  components: {
    VueVirtualTable
  },
  data: {
    tableConfig: [
      {prop: 'name', name: 'Name'},
      {prop: 'age', name: 'Age', slotName: 'age-info'},
      {prop: 'info', name: 'Info', slotName: 'user-info'}
    ],
    tableData: [
      {user: 'a1', age: 20},
      {user: 'a2', age: 21},
      {user: 'a3', age: 23}
    ]
  }
}
</script>

Thanks! @waningflow

Hi, I noticed that align items is meant for vertical align and it would be great if we can set horizontal align css style using justify content option.

I tested and if you don't mind, I'll make a PR for this change Document would be as below and UI would be

param | type | description | required | default -- | -- | -- | -- | -- alignItems | String | Same with flex. Control the content of a cell | No | center justifyContent | String | Defines how the browser distributes space between and around content items. | No | center

before

after (set age : justify-content left)

Found my self needing support for nested properties so here is the code if you are interested.

Added method getDescendantProp(obj, path).
The method getDescendantProp is applied were applicable in vue-virtual-table.vue.

Executed build
Bumped package version

Example method usage:

// Access user.name
this.getDescendantProp({user: {name: "userName", age: 43}},  "user.name")
>> userName
// Access user.age
this.getDescendantProp({user: {name: "userName", age: 43}},  "user.age")
>> 43

Hi There

First I'd like to say thank you for your very impressive component vue-virtual-table.

I'm about to build a big project under VueCLI and your component is just perfect.

Nonetheless I got one major issue. When I set in the configuration table "filterable" or "searchable" then the popover window do not shows up.. In real it shows up but very fast and close right after...

Then I can't use that properties which is really helpful.

Could you please help me out ?

Thank you

How would I go about handling LEFT and RIGHT click events on a row? Don't seem like 'click' or 'contextmenu' events are fired. Need access to row data when left or right clicking.

Hi.

I have tried everything to try and get this to work in the browser.

I have a Vue which is receiving a lot of data. I would ideally like to pass this directly to vue-virtual-table as a prop.

I have tried integrating with https://github.com/FranckFreiburger/http-vue-loader

my main.js

var app = new Vue({
    el: '#app',
    components: {
        // 'VueVirtualTable': window.httpVueLoader('./tableComponent.vue')
        'my-component': httpVueLoader('https://raw.githubusercontent.com/waningflow/vue-virtual-table/master/src/vue-virtual-table.vue')
    },
    data: {
        table_data: "",
        column_names: [{ prop: "first" }, { prop: "id" }, { prop: "last" }, { prop: "city" }]
    },

my index.html header

    <script defer src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script defer src="https://unpkg.com/http-vue-loader"></script>
    <script defer src="vue-virtual-table.min.js"></script> <!-- downloaded from this github -->
    <script defer src="vueScript.js"></script>

Any help getting this working would be immensely appreciated.

Thanks so much for wonderful component.

How can I access the nested properties of an object? { prop: 'nested properties here', name: 'HOST', searchable: true },

Is it possible to reflect several properties from an array in one column?

Thanks in advance!

Added click and contextmenu events when a row is left/right clicked. Both events emits props.item and $event.

Docs updated. Executed build script (only build) and is therefor pushing new dist files.

Is it possible to config a tooltip for custom slot columns? At the moment I use custom css (override with text-overflow: ellipsis) for too long text in columns so I want to display the full text in the tooltip. Or: Is there a way to config a static column/cell with line break?

Thanks in advance.

Hi, thank you very much for your great work - this vue component truely rocks! Is there a way to use a date column with formatted cell display (without template slot-scope) so that it is still sortable?

When appliying eClass to multiple _action slot components takes the class name of the last _action prop

tableConfig: [ { prop: "_action", name: ".", actionName: "checkbox", width: 30, eClass: { checkbox: 'true' }}, { prop: "_action", name: "Name", actionName: "userBlock", width: 180}, { prop: "emailAddress", name: "Email Address", width: 180 , alignItems: "left"}, { prop: "phoneNumber", name: "Phone Number" }, { prop: "company", name: "Company" }, { prop: "address", name: "Address" }, { prop: "_action", name: ".", width: 70, actionName: "actionCommon"}, ],

All the _action blocks takes the Class checkbox