aquilesb / v-datatable-light Goto Github PK

Hi,
Could it be possible to hide headers?
Thanks !

Is there any way to handle row click event?

Thanks

Hi
I have used "v-datatable-light": "^0.8.0", for one of my projects. I am having small issue. Appreciate if you could help me to sort out the matter.
How I align the column values either left or right? Default all the cell values centre.

Thank you
Hiroshana

How to add another actions on same td?

Hi I got the following the error after just running the instlall

$ npm run serve

[email protected] serve /home/ec2-user/environment/edb.interface/v-datatable-light
vue-cli-service serve ./example/main.js --open

/home/ec2-user/environment/edb.interface/v-datatable-light/node_modules/open/index.js:11
const wslToWindowsPath = async path => {
^^^^

SyntaxError: Unexpected identifier
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object. (/home/ec2-user/environment/edb.interface/v-datatable-light/node_modules/@vue/cli-shared-utils/lib/openBrowser.js:9:14)

npm ERR! Linux 4.14.72-68.55.amzn1.x86_64
npm ERR! argv "/home/ec2-user/.nvm/versions/node/v6.14.4/bin/node" "/home/ec2-user/.nvm/versions/node/v6.14.4/bin/npm" "run" "serve"
npm ERR! node v6.14.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] serve: vue-cli-service serve ./example/main.js --open
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script 'vue-cli-service serve ./example/main.js --open'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the v-datatable-light package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! vue-cli-service serve ./example/main.js --open
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs v-datatable-light
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls v-datatable-light
npm ERR! There is likely additional logging output above.

Hello,

I am having issue working with server-side data and showing in tables.

can you explain me how we can use server side data please ?

Regards
Hiroshana

This doesn't look supported but I'll ask in case I missed it - is there a way to make this responsive for mobile? What I'm envisioning is that below a certain width the display changes to individual cards instead of rows and the data appears with the column name.

Issue when sort, not sort all row data. But only sort data appear in one page. In other page data not sorted

Hello,
I am using 0.81 version and seen something issues on pagination.

1. Ex, In your all the examples three (https://codepen.io/aquilesb/pen/wVaBPv), you are using 21 records and if we select 10 records per page, it shows first page -10, second page 10 and third should be 1, but here last page doesn’t show. Only show 2 pages.

Appreciate your support and advice on this regard.

Thank you
Hiroshana

Hi,

I need to push some data to server side when clicking on Edit button, problem is, 'this' is not defined in this context.

Any ideas?

Looks like slot-scope and the method of binding properties has been deprecated as of Vue version 2.6.XX. I'm having trouble figuring out how to access data passed into the actions slot when clicking a button. The example provided does the following:

<input
    slot="actions"
    slot-scope="props"
    type="button"
    class="btn btn-info"
    value="Edit"
    @click="dtEditClick(props);"
  >

For more info on the new way slots are handled, see this: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md

In the b72fc8d commit to src/components/DataTable.vue, the following change:

-    :class="headerItemClass(item, css.theadTh)"
+    :class="[css.theadTh, `header-column-${columnIndex}`]"

made the headerItemClass function become an unused function as far as I can tell. This means the no-sortable class is no longer applied to non-sortable th elements, so I can't specifically style non-sortable th elements via .no-sortable in my css.

I know I can style specific th elements using the .header-column-n classes, but I mainly just wanted to make you aware of the (as far as I can tell) now-unused headerItemClass function remaining in the code and in case you did not intend to make the no-sortable class be no longer available.

Thanks so much for this awesome package!

Hello Aquiles Boff,
Thank you, last time helping me to sort out alignment stuff in column using css but same issue in header. I have tried css for table header but it doesn't work for me. I much appreciate if you could help me and given an idea for how to align headers?
Here is css cording

.mybillspayments .v-datatable-light thead tr th.header-item .th-wrapper:nth-of-type(1){
justify-content: flex-end;
}

Thank you
Hiroshana