aquilesb / v-datatable-light Goto Github PK
View Code? Open in Web Editor NEWA lightweight vue datatable component with no dependencies
License: MIT License
A lightweight vue datatable component with no dependencies
License: MIT License
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.