spatie / vue-table-component Goto Github PK

Hi,

I was wondering if you are planning to support pagination?
Maybe something like this vuejs-uib-pagination

BTW awesome component

One of the nice features of datatable is the choice of using content based on json data or just add the datatable functionality to table markup already in the dom. E.g. Rendered by blade.

That would be a nice addition to this 👍🏻

Hello,

I noticed after import TableComponent from 'vue-table-component'; my file size grows by +-700kb's.

If i inspect the index.js file in node_modules/vue-table-component/dist/i see a size of 231kb
If i inspect the app.js file in node_modules/vue-table-component/docs/build/i see a size of 988kb

• Could you explain if this large file size increase i am experiencing is correct, it doesnt match either of the above file sizes?
• If so could you explain why the largeness of this file size?
• Could you explain which files are necessary to load or another way to load in this table component that could reduce the file size?
• Could this possibly be a build issue in my setup (webpack)? or perhaps a build issue of yours?

Many thanks,
Gregg

There should be a way to raise events or handle click events for each row. Many times clicking on a table row would trigger an event. Would be very nice to have such a feature.

Just a call back function or on click of row, $emit with the name of event and the data to pass.

First of all, thank you for the awesome package.
I`ve got a problem only when im using yarn production:
ERROR in build.js from UglifyJs
Unexpected token: name (context) [./~/vue-table-component/dist/index.js:35069,0][build.js:95786,12] error Command failed with exit code 2

Everthing works perfectly if im using yarn dev.
I`m using vue cli with webpack-simple template.
Thank you in advance for your help.

Can i build and sort with this plugin hard tables like this (with colspan/rowspan)?
http://joxi.ru/8An0REOHqX9wMm

Hey! Thanks for creating this component.

Is it possible to sort on multiple columns?

I might just be missing the obvious but I can't figure out how to get styling on the component. I was hoping that once installed it would look like the demo. Functionality seems to work fine, it just looks ugly as hell.

Include Font-awesone? when sort asc and desc?

A null value returns a Cannot read property 'toString' of null error. In getSortableValue() could we check for undefined or null? Or should I be removing null values?

if (value === undefined || value === null) { return ''; }

Hi there, pretty amazing and lightweight work!
Is there a way to render a string that contains white spaces (or any other special character, for that matter) in your awesome vue-table-component?
To reproduce the issue: in your demo, go from the working row:

data="[
{ firstName: 'John', lastName: 'Lennon', instrument: 'Guitar',
editUrl: '<a href='#john'>Edit</a>', birthday: '04/10/1940', songs: 72 }]"

to this non-working row (John becomes Joh n):

data="[
{ firstName: 'Joh n', lastName: 'Lennon', instrument: 'Guitar',
editUrl: '<a href='#john'>Edit</a>', birthday: '04/10/1940', songs: 72 }]"

The developer doesn't know any css, so please make the demo page look pretty.

The demo page can be viewed by running yarn start and pointing your favourite browser to http://localhost:2000.

Hello,

I would like to know if it would be possible to sort a column of numbers that might be formatted to a currency? For example my data has numbers in plain format like 1000.00 . When i pass the data into the table i use :formatter to add a currency symbol and comma separate the number so it looks like
£ 1,000.00 . This breaks the sorting :(

Would you consider something like: sort-value and show-value ?
If sort-value is not present then sorting will use show-value so its not forced.

Do you know of any way I can achieve this?

Many thanks,
Gregg

Hi,

Quick question: is it possible to add an on-click event to one of the generated TableRows. Let's say you have a edit button you would expect to have a way to call a method for the onclick instead of just putting in a general a:href link.

I basically need to find a way to make the data so that VueJs understands that when I click on a button in the table it performs some kind of action.

Below example is always rendered as a normal string and therefor the event is not useable.

'<a title="Verwijderen" @click="alert"><i class="fa fa-fw fa-trash-o"></i></a>'

Let me know if you have a solution for this. Maybe I'm missing something or maybe this functionality doesn't exist yet.

Hi,

Is it possible to add support for simple pagination like Laravel do.

Simple pagination will only have two buttons.
Next and Previous.

I feel there should be some way to add classes to the main table tag so that the component can be used with CSS frameworks like Bootstrap where the ".table" class is required for the styling.

Hello,

I'm testing to see how this package could fit in asgardcms. However We use http://element.eleme.io/#/en-US/component/table which doesn't seem to be compatible with this package.

In any case, I've followed the docs to add a custom class:

import { TableComponent, TableColumn } from 'vue-table-component';

TableComponent.settings({
    tableClass: 'table',
    filterPlaceholder: 'Filter table…',
    filterNoResults: 'There are no matching rows',
});

But this throws the following error:

Thanks,

getFilterableValue(columnName) {
const value = this.getValue(columnName).toString().toLowerCase();

    return stripTags(value);
}

When the value in the data is null the component fails here.

I have a CRUD setup, I am loading table from ajax, now when I add a new item I want to push some data into a table but it's not working. I need to call this.$refs.table.refresh(); which hits the server.

How can I data.push(item) into the array show it in the table?

here is my method which fetches data

loadTableData(param) {
    let params  = $.param(param);

    this.tableLoading = true;
    return axios.get(this.url + '?' + params).then((res) => {

        this.tableLoading = false;
        this.result = res.data.data;

        return {
            data: this.result,
            pagination: {
                currentPage: res.data.meta.current_page,
                totalPages: res.data.meta.last_page,
                count: res.data.meta.total
            }
        }
    })
}

Please help, I have used this table in many places, don't want to try some other data table 😦

Hello,

it's possible to add one input per column for filtering like this one?

#budy

I'm quite new to Vue so this could be user error, but in the Vue dev tools I can see that my table data prop has updated following an async fetch, yet the data doesn't update in the view. If I wait to initialize Vue until the fetch has completed, all works fine.

I'm wondering if this is because rows seem to be created only on mounted and should also be re-computed on the updated hook (or perhaps beforeUpdate?

how to add a column displaying serial number of a row

I really like the simplicity of your vue table! However, I cannot get the show-caption and show-filter props to do anything. I tried supplying both strings "false" as well as boolean false

<table-component
  :data="[
    { firstName: 'John', birthday: '04/10/1940', songs: 72 },
    { firstName: 'Paul', birthday: '18/06/1942', songs: 70 },
    { firstName: 'George', birthday: '25/02/1943', songs: 22 },
    { firstName: 'Ringo', birthday: '07/07/1940', songs: 2 },
  ]"
  table-class="table is-striped"
  show-caption="false"
  show-filter="false"
  sort-by="songs"
  sort-order="asc">
  <table-column show="firstName" label="First name"></table-column>
  <table-column show="songs" label="Songs" data-type="numeric"></table-column>
  <table-column show="birthday" label="Birthday" :filterable="false" data-type="date:DD/MM/YYYY"></table-column>
</table-component>

Is there some way to set a class for the thead elemen? Bootstrap 4 will have classes like <thead class="thead-default"> or <thead class="thead-inverse"> so would be nice if that is possible.

If it's not possible I could send a PR for it.

Currently the sort function is returning a blank string from getSortableValue() when the value is undefined.

    getSortableValue(columnName) {
        const dataType = this.getColumn(columnName).dataType;

        let value = this.getValue(columnName);

        if (value === undefined) {
            return '';
        }
...

The effect of this is that undefined values get sorted ahead of everything else when sorting ascending.

I deal with data that has a lot of holes in it, and it was irritating to have null values appearing before existing values.

It would be a pretty trivial update to the getSortPredicate() function to always place undefined values at the end, regardless of sorting ascending or descending. But before writing it up and fixing tests and what not, I just wanted to make sure this is something you guys would like.

Btw I tried what seems like a dozen table components for my project before settling on this. Its seriously awesome!

When setting the show-filter and show-caption options to false, neither of them are effective.
version: "vue-table-component": "^1.7.0",

          <table-component
          :data="trades"
          cache-lifetime= "0"
          sort-by="inputDate.dateFormat"
          sort-order="asc"
          show-caption="false"
          show-filter="false"
          filter-no-results="Sorry no results have been found">
          <table-column show="inputDate.dateFormat" label="Input Date" data-type="date:DD/MM/YYYY"></table-column>
          <table-column show="tradeNo" label="Trade No" data-type="numeric"></table-column>
          <table-column show="description" label="Description" :filterable="false"></table-column>
        </table-component>

also when trying:

import TableComponent from 'vue-table-component';
Vue.use(TableComponent);

TableComponent.settings({
    showFilter: false,
});

Many thanks,
G

Lets say the object we pass to the TableComponent has a first_name and last_name attribute, however we only want to show the combined first_name and last_name under the label "Name". Can this be done?

Hello Spatie Team, thanks a lot for sharing this nice component.

I'm using laravel spark and I have installed it successfully vue-table-component.

Although when I try to use it with the Retrieving data asynchronously feature it just does not work, the page get blank and the console says:Uncaught ReferenceError: "regeneratorRuntime is not defined", I guess it has something to do with the async and wait commands in the fetchdata function.

I am just learning vue.

I appreciate your feedback.

Possible feature

Ability to have custom Caption text
Im looping through set of data and creating many tables. It would be nice if I could pass a value to a caption-text prop so I could have a heading for my tables.

Hi, I really like this package and I use a lot in my project, but it's bothersome to set cacheId for erver table.

Would it be better that cacheId could self generated?

I would be nice to have event listener support for row clicks, which could be pre-set as data properties.

Hello again,

sorry for annoying you. I use the formatter function to build links in my table like

results in:

It's possible to bring back the old v-html behaviour that will not escape raw html?

Thanks in advance!

budy

I have confirmed I am using version 1.7.0 and I am trying to use the tfoot slot but it does not appear to be working.

Inside my table component, I am using:

<template slot="tfoot" scope="{ rows }">
    <tr>
        <th>Totals:</th>
	<th>{{ rows.reduce((sum, value) => { return sum + value.data.initial_amount; }, 0) }}</th>
	<th>{{ rows.reduce((sum, value) => { return sum + value.data.balance; }, 0) }}</th>
	<th>{{ rows.reduce((sum, value) => { return sum + value.data.remaining; }, 0) }}</th>
	<th>{{ rows.reduce((sum, value) => { return sum + value.data.payment; }, 0) }}</th>
    </tr>
</template>

I don't have any kind of tfoot tags in the dom either.

Thank you very much for the lovely vue-table-component! Very easy to use and light-weighted! Just wonder if you guys can open-source the demo table code as well.

Best!

It would be nice if you could add class to a row depending on a value in that row's data.

On production It's too slow (will cause chrome hang) when it remove the row by this.data.splice(index, i).

In my sense, I will remove and add the row frequently, So there is any way to hide the row rather rerender the dom?

How can refresh/update data at store/update/delete in a crud example ?

Should be possible to set the strings globally and on a per component basis.

Hello,

Could we please have dynamic column?

i.e you can configure the columns required on runtime.

I'm using the latest version of the component.
The problem is that for the huge data, the components generates a large list of pagination links.

If data has 1000 records and each page having 10 records then the component generates 100 pagination links.

Is there a way to skip some pagination links from the pagination list like in the attached image?

Hi there. Awesome component! Even after adding babel-regenerator-runtime, I run in exactly the problem mentioned at #40
So I did this, which works fine except I don't see the pagination. My pagination is in response.data.pagination, how do I transmit it to the component ?
If I try this.table = response.data (which contains the data and pagination arrays) I get the error Invalid prop: type check failed for prop "data". Expected Array, Function, got Object.

<template>
       <table-component :data="table">
           <table-column show="id" label="id" data-type="numeric"></table-column>
           <table-column show="key" label="key"></table-column>
           <table-column show="lg" label="lg"></table-column>
           <table-column show="text" label="text"></table-column>
       </table-component>
</template>

<script>
    export default {
        props: {
            'url':{}
        },
        data: function() {
            return {
                'table':[]
            }
        },
        methods: {
            fetchData() {
                axios.get(this.url).then(response => {
                    console.log(response.data)
                    this.table = response.data.data
                })
            }
        },
        mounted() {
            this.fetchData()
        }
    }
</script>

Alternatively, if you make an example of having the async fetchData work without the regenerator bug, that might solve the issue!

Custom TableColumn's don't appear to be filterable even when :filterable="true" is set. How can I filter a custom TableColumn?

Hi,

I was thinking about sending a PR which adds a sorting arrow next to the column for the current sorted column. We can add an option to enable or disable it of course.

What do you think?

The column sort-by prop fails if I try to sort by a data property that isn't being shown in a column. It should probably still work for data that is hidden.

When binding data on table-column, table would not be updated as data is updating.

Here is a simple demo.
https://jsfiddle.net/p0fe9s06/5/

I have done some research and found Evan You(@yyx990803) has mention in vuejs/vue#4332

It seems you are trying to make a slot container communicate with a slot child - in most cases this means the two components are coupled by-design, so you can do something like this.$parent.$emit(...) from the child, and listen to that event in the parent with this.$on(...).

So I try to add watch in the TableColumn

watch: {
    show() {
        this.$parent.$emit('columnUpdate');
    },
    label() {
        this.$parent.$emit('columnUpdate');
    },
    headerClass() {
        this.$parent.$emit('columnUpdate');
    },
    cellClass() {
        this.$parent.$emit('columnUpdate');
    },
    hidden() {
        this.$parent.$emit('columnUpdate');
    },
    filterable() {
        this.$parent.$emit('columnUpdate');
    },
...

and this in the TableComponent

async mounted() {
    this.columns = this.$slots.default
        .filter(column => column.componentInstance)
        .map(column => new Column(column.componentInstance));

    await this.mapDataToRows();

+   this.$on('columnUpdate', () => {
+       this.columns = this.$slots.default
+           .filter(column => column.componentInstance)
+           .map(column => new Column(column.componentInstance));
+
+       this.mapDataToRows();
+   });
},

Although it works fine, but it's not seems like an elegant approch.

Does anybody have a clue about this?

Hello,

it's possible to add another data or string to table-column? For example

<table-column show="myFirstData" label="First data"></table-column>
<table-column show="mySecondData" label="Second data" ></table-column> or
<table-column show="someText" label="Some text" ></table-column>

export default{ data () { return { myFirstData: [], mySecondData: [], someText: 'whoops' }

Is there a way to access the current index of the row that's updated based on the current sort order? I was hoping that I could just do something like {{row.index}} inside the template of the table-column component.