I have encounted a problem as below:

<vue-good-table
   :columns="fields"
    :rows="enrollmentPlans"
    styleClass="vuetable recruit__tb">
     <template slot="table-row" scope="props">
       <td width="15%"><input class="course__input" type="text" v-model="props.row.hour"></td>
     </template>
</vue-good-table>

The problem is that the v-model in the input elememen seems not work, while i change the input value, the data is unchanged.I'm confused, any help is apperiated.

Is there a generic way to manipulate data before outputting to the column? Something like this?

{ label: 'Action',
          field: 'actions',
          width: '10%',
          sort: true,
          format (value, row) {
            var X = value.replace('action_', '')
            var N = X.replace(/_/g, ' ')
            return N
          } }

(this works with quasar's q-data-table, but for projects where I don't want to use quasar, this would be super useful)

Errors:
  2  http://eslint.org/docs/rules/semi

 @ multi ./build/hot-reload ./src/main.js

 error  in ./~/vue-good-table/src/components/Table.vue

Module build failed: Error: Couldn't find preset "env" relative to directory "/Users/stephen/takeaction_quasar14/node_modules/vue-good-table"
    at /Users/stephen/takeaction_quasar14/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/stephen/takeaction_quasar14/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/stephen/takeaction_quasar14/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/stephen/takeaction_quasar14/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/stephen/takeaction_quasar14/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/stephen/takeaction_quasar14/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/stephen/takeaction_quasar14/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/stephen/takeaction_quasar14/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/stephen/takeaction_quasar14/node_modules/babel-loader/lib/index.js:49:20)
    at Object.module.exports (/Users/stephen/takeaction_quasar14/node_modules/babel-loader/lib/index.js:174:20)

 @ ./~/vue-good-table/src/components/Table.vue 8:2-92
 @ ./~/vue-good-table/src/index.js
 @ ./src/main.js
 @ multi ./build/hot-reload ./src/main.js

Previous build worked fine...

if I change the default in the vue it works but if I try to set it in the html it has no effect.

I could probably hack something together or edit the current component but I'm sure you could do this more efficiently than me. Just let me know, thanks!

Moment.js is well known for a very high size
There are many issues around this moment/moment#2373
I saw that vue-good-table uses moment only to format dates in a couple of places
A good alternative for such operations is https://github.com/date-fns/date-fns

With date-fns you can import only the functions you need (e.g format) and not import the whole library to do this operation. This helps a lot reducing the overall vue-good-table size when used in production.

Update:
Here is some proof:
Simple app (vue-cli wepback with vue only)

As you can see the vendor file has 60kb which contains only Vue basically

Same app with a very basic vue-good-table added

Size went up from 60kb up to 688 kb because of moment.js

Hello!

While all the other text in the table can be internationalised, there is one item that can't:

1-10 of 100

Could we have an option to at least change the word "of"?

Thanks! :-)

columns: [
						{
							label: '',
							field: 'shortName',
							filterable: false,
							width: '75px'
						},
						{
							label: 'Trust',
							field: 'fullName',
							type: 'text',
							html: false,
							filterable: false,
							width: '300px'
						},
						{
							label: 'Currency',
							field: 'currency',
							type: 'text',
							filterable: false,
							width: '300px'
						},
						{
							label: 'Price (last)',
							field: 'priceLast',
							type: 'number',
							html: false,
							width: '300px'
						},
						{
							label: 'Price (High/Low)',
							field: 'priceHighLow',
							type: 'number',
							html: false,
							width: '300px'
						},
						{
							label: 'NPS - Est',
							field: 'npsEst',
							type: 'number',
							width: '300px'
						},
						{
							label: 'NPS - Pub',
							field: 'npsPub',
							type: 'number',
							width: '300px'
						},
						{
							label: 'NPS - Date',
							field: 'npsDate',
							type: 'date',
							inputFormat: 'YYYYMMDD',
							outputFormat: 'MMM Do YY',
							width: '300px'
						},
						{
							label: 'NPS - Freq',
							field: 'npsFreq',
							type: 'number',
							width: '300px'
						}
					],

Here is my data for the colums, the table is working fine, however i need to specify the width of the columns. This is not workign for me.

Like row templates, add possibility of defining column headers in html like adding font awesome icons

It seems when you choose All from Rows per page option it somehow breaks the pagination. You can then paginate and it only adds rows. I would expect that when I choose All the pagination should either disappear or be disabled, but still display the correct text ("all records", ...).

After the table is loaded the rows order is not exactly as read from my database...
That data is sorted by index.
The data is shown like this:

• 104
• 2
• 4
• 7
• 12
• ... etc
• 94
• 95
• 103
• 3
• 105
• 108
• ... etc
• 129
• 220

There is no defaultSortBy, pagination=false and no sorting click was done.

I want to have the first field to have a checkbox for each row, and then when the user selects a checkbox it will add it to the data model, how would i do this?

I am trying to use the first column as an image column, basically I am declaring the field as:
'<img class= "img-thumbnail img-search" src="' + config.imageServerURI + data.profilePic + '"/>'
and the column configuration as:
{ label: 'Profile Image', field: 'image', html: true, width: '100px', },

The problem is the title is displaying in the right place (the first position) and the data itself is displaying on the last column. Am I doing something wrong? I managed to work around the problem by setting every column as html: true.

A suggestion, if I may, would be to create an image column that receives a css class.

First of all. Nice job so far you all are doing very well with this component. This is the easiest vue table component to implement I found on the internet and it meets at least my requirements.

I saw the td templating option with something like this

<template slot="table-row" scope="props">
    <td>{{ props.row.name }}</td>
    <td>{{ props.row.age }}</td>
    <td>{{ props.row.btn }}</td>
  </template>

This template works perfectly and it gives you full content manipulation. However is I define this template optionI would need to rewrite all rows td. But now..
How about defining the template in the htmlContent Prop on the columns definitions?

<vue-good-table title="Users"
                            :columns="[
                            { label:'Customer ID', field:'CustomerID' },
                            { label:'Name', field:'Name' },
                            { label:'Email', field:'Email' },
                            { label:'Account Number', field:'AccountNumber' },
                            { label:'Primary Phone', field:'PrimaryPhone' },
                            { label:'Postal Address', field:'PostalAddress' },
                             //Something like this
                            { label:'Actions', field:'ID', html:true, htmlContent:'<button v-on:click=\'delete(props.row.ID)\'>Delete</button>' }
                            ]"
                            :rows="rows"
                            :paginate="true"
                            :line-numbers="true"
                            style-class="table table-bordered table-striped condensed" />

I tried this but its only display the ID value rather than the button instead... I also need a value passed down to the event. Any working example?

Thanks in advance!

Hello,

The following error is displayed when the component is run.

I just started using templates, and I have found that they seem to break filters I had on the rows. For example, This is my template row:

<td>{{ props.row.date }}</td>

And it will display the unixtime value from my dataset just fine. But in my col defs I have this:

{ label: 'Date',
          field: function (row) {
            var X = row.date * 1000
            return X
          },
          width: '15%',
          sort: true,
          type: 'date',
          inputFormat: 'x',
          outputFormat: 'MMM D, YYYY '
        }

which is being completely ignored now that I am using a template. Is there a way to have my formatting still get applied when using a template?

In order to disable sorting on that column, so column header can be clicked and event generated

Is there the possibility to specify the class of each row td?

PS: Created PR

When I update properties on a row, these changes are not reflected in the table.
It ends up with stale data.

Hello,

Im making the options in my table selectable, in which a user can select a single row and it will be added to a array of "Selected Options".

I followed the answer from here: #43

When i check the checkbox, it calls the method in which i can console.log the results and it works. Is it possible to make it so that when a option is selected it will be added to a array and when its deselected it will be removed?

Thanks a lot.

I'm not sure if this is currently possible, looking through the docs I don't believe it is.

It would be great to have the ability to pass in a string as a prop to the table component.
I have two use cases for this

1. It makes it possible to use a search bar other than the provided one or in a different location than the provided one
2. I have a case where when I type in a search string, I am emitting an event.

<vue-good-table>
  :search="searchQuery"
  :columns="columns"
  :rows="items"
  :paginate="false"
/>

Edit: I've mocked something up that doesn't cause any breaking changes, I want to make a few improvements then I will push it for you to see (hopefully by tonight, otherwise tomorrow)

Hide an ID column using column width of 0px does not work.
Column itself needs to be present because of event handlers (editing a row for example) but holds no further interesting data.

There is in issue regarding the table to being reactive to changes in the aray used for :row

For example per column property "setEditable".
After editing finished (td blur?) fire event.

The user should be able to delete the row and on confirmation, delete the row in the table and support for a custom method call (send the row details this method) where a developer can write there own code to delete data on server side.

Thanks for previous fix of the pagination. I've found another one related to pagination. Steps to recreate:

1. On table populated with data with let's say 10 rows per page, go to 2nd page.
2. Choose to display All
3. Instead of all data, only last row is displayed until you click on Previous.

When global search is used and the search term is not empty, sorting by clicking on the table header doesn't seem to work.

I tried to use this package in a project that uses Browserify and I could not get it to work.

Even with the parameter "sortable: false" in the columns array, it continues sorting.

{
label: 'Member',
field: 'memberName',
sortable: false
},

I noticed a value of 0 (zero) and leaving a value out will both result in a blank cell. For example with these rows:

rows: [
    {id:1, name:"John",score: 0},
    {id:7, name:"Jane"},
  ],

I want to distinguish these two cases - is it possible to force displaying the 0 (zero)?

Hi

What this aims to do is to add a scrollbar for when there is overflow on the x-axis.

1. How to test the component locally? Do I have to setup a whole new project and use the library there?
2. The current demos folder structure doesn't allow npm install
3. Is there going to be a browser bundle so we can test stuff easily on jsfiddle for example ?

In my table, I have a Gender column, the data from the server is m or f for male or female respectively.

You should allow the use of icons for some particular data.

Ex: You can ask the user to supply icon HTML and place the icon in the row.

columns: [
	{
		label: 'Gender',
		field: 'gender',
		filterable: true,
		icon:{
			'm': '<i class="fa fa-male" aria-hidden="true"></i>',
			'f': '<i class="fa fa-female" aria-hidden="true"></i>'
		}
	}
],

Column that has type='number' sorts like

103
114
12
121
etc...

I'd like to use this component (looks nice), but I have run into an issue. When I try to load the page using the component, I get this:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VueGoodTable>
       <Reports> at /Users/User/Documents/project/x3/resources/assets/js/components/Reports.vue
         <MainPage> at /Users/User/Documents/project/x3/resources/assets/js/components/MainPage.vue

I am using other vue components installed via NPM successfully. I'm using a very recent install of Homestead, so Laravel 5.4 with Vue 2.1.10, Webpack, Laravel Mix.

I've googled it but found nothing that fixes it so far. So I figured it would be worth posting here.

Thanks!

The plugin is meant to be used with existing Vue 2.x projects. It uses ES6 features so as long as your build process includes a transpiler, you're good to go.
It would be great with an proper example, I'm running this: https://github.com/wolfeidau/cognito-vue-bootstrap and would like to add vue-good-table but, being new in the world of webpack, vue etc - I have no idea what or how I should do this.
I've tried multiple guides but they also make vast assumptions.

So please, could someone help me out? :)

The Vue good table don't have an option to can setup the rows to be selectable using checkboxes

Hi, my date column is output in unixtime (ie 1486231256 ) and I have tried both 'U' (php designation) and 'X' (moment.js designation), but both result in "invalid date" message. Is there a way to format these in my table?

From within Google Developer tools I removed

.label:not(:last-child) {
/* margin-bottom: 0.5em; */
}

Hey, thanks for really good table :) It would be great to have option for fuzzy or maybe regexp filtering.

I am currently attempting to use 'onClick' as per the instructions, however I get the following error:

'Uncaught TypeError: this.onClick is not a function'

Please add an example of onClick being used to the documentation.

Any way to get this working with custom elements?

Data from the server:

[{"fullname":"Rohith Kumar","email":"[email protected]","gender":"m","telephone":"8888888888","altertelephone":"5555555555","address":"address","dob":"1990-01-01","signon":"2017-07-31T10:14:01.198Z","active":true,"admin":true}]

Data from vue-good-table props.row

{ "row": { "fullname": "R k", "email": "[email protected]", "gender": "m", "telephone": "1321321321", "altertelephone": "", "address": "s", "dob": "1985-02-02", "signon": "2017-08-07T08:23:20.809Z", "active": false, "admin": false }, "formattedRow": { "fullname": "", "email": "", "gender": "", "telephone": "", "altertelephone": "", "address": "", "dob": "", "signon": "", "active": "", "admin": "" }, "index": 1 }

Table Configuration

<vue-good-table
		title="User"
		:columns="columns"
		:rows="rows"
		:lineNumbers="true"
		:defaultSortBy="{field: 'fullname', type: 'asc'}"
		:globalSearch="true"
		:paginate="true"
		styleClass="table table-bordered table-striped">
		<template slot="table-row" scope="props">
			<td>{{ props.row.fullname }}</td>
			<td>{{ props.row.email }}</td>
			<td align="center">
				<i v-if="props.row.gender == 'm'" class="fa fa-male fa-2x" aria-hidden="true"></i>
				<i v-if="props.row.gender == 'f'" class="fa fa-female fa-2x" aria-hidden="true"></i>
			</td>
			<td>{{ props.row.telephone }}</td>
			<td>{{ props.row.address }}</td>
			<td>{{ props.row.dob}}</td>
			<td align="center">
				<i v-if="props.row.active == true" class="fa fa-check-square-o fa-2x text-success" aria-hidden="true"></i>
				<i v-if="props.row.active == false" class="fa fa-ban fa-2x text-danger" aria-hidden="true"></i>
			</td>
			<td align="center">
				<i v-if="props.row.admin == true" class="fa fa-check-square-o fa-2x text-success" aria-hidden="true"></i>
				<i v-if="props.row.admin == false" class="fa fa-ban fa-2x text-danger" aria-hidden="true"></i>
			</td>
			<td>{{ props.row.signon}}</td>
			<td><button @click="edit(props.row.id)">Edit</button></td>
			<td><button @click="delete(props.row.id)">Delete</button></td>
		</template>
	</vue-good-table>

Column:

columns: [
	{
		label: 'Name',
		field: 'fullname'
	},
	{
		label: 'Email ID',
		field: 'email'
	},
	{
		label: 'Gender',
		field: 'gender'
	},
	{
		label: 'Telephone',
		field: 'telephone'
	},
	{
		label: 'Address',
		field: 'address'
	},
	{
		label: 'DOB',
		field: 'dob',
		type: 'date',
		inputFormat: 'YYYY-MM-DD',
		outputFormat: 'Do MMM YY'
	},
	{
		label: 'Active',
		field: 'active'
	},
	{
		label: 'Admin',
		field: 'admin'
	},
	{
		label: 'Registered',
		field: 'signon',
		type: 'date',
		inputFormat: 'YYYY-MM-DDTHH:mm:ss.sssZ',
		outputFormat: 'Do MMM YY'
	},
	{
		label: 'Edit'
	},
	{
		label: 'Delete'
	}
],

Screen Shot
In this screen shot, I didn't use props.formattedRow.dob because the column will be empty.

Another issue is in the column header DOB and Registered is aligned to right, it should be left aligned.

Hi,

I'm got the following error trying to use this module in electron-vue:

ERROR in ./~/vue-loader/lib/template-compiler?{"id":"data-v-4314b6ab"}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-good-table/src/components/Table.vue
  Module not found: Error: Can't resolve '../images/search_icon.png' in '/Users/.../node_modules/vue-good-table/src/components'

I had to do the following hack to get it to compile:

mkdir node_modules/vue-good-table/src/images
cp node_modules/vue-good-table/dist/static/img/search_icon.6cf060d.png node_modules/vue-good-table/src/images/search_icon.png

Would be nice to be able to specify which column should be ordered by default

The main property in package.json points to src/index.js and not to /dist/vue-good-table.min.js

is it a mistake?
and if not - why is it so?

Hi,
it would be great to choose if search in the whole table on each character typed or on submit (enter key).

I have a 15k+ table and it's impossible to search "live".