Steve sits down with Vue developer Shashikant S. Wagh to talk about his Vue Sortable Table. They discuss the various config options and the main selling point that allows the user to re-order items in the table via drag and drop. Shashikant makes a very old-school book pick, and as always, Steve has his great dad jokes.

Hello everybody and welcome to yet another exciting episode of Views on View. I am Steve Edwards, the host with the face for radio and the voice for being a mime, but I'm still your host. Today, our very special guest, all our guests are very special, is I'm going to try to say this name right, Shashikant Wagh, coming to us live from India. So we are definitely a multinational podcast. How are you doing Shashikant?

 

Yeah, doing great.

 

Great.

 

How

 

So

 

about you?

 

before we get going into our topic of the day, why don't you tell us about yourself, who you are, who you work for, why you're famous, anything you want us to know about you.

 

So myself, Seshikan. I have been writing code since 2008 probably. I completed my bachelor's in 2014 but for the most part I am a CEPTOT developer. I started my career in mechanical industry. I started working as a CNC programmer. Then I realized I really enjoy writing code and then I started doing some other stuff with PHB. front end development and correctly work on view and react.

 

View and react, okay. Don't come across too many people that do both. There's some, I suppose. That's good. So you started out in PHP, you said?

 

Yeah I started in PHP.

 

So just straight PHP or using any type of tools or CMSs or frameworks like say Laravel or Kate PHP or WordPress or something like that.

 

Sure, so I started when I started learning PHP of course I started with the core PHP later I moved on the frameworks like code igniter and WordPress in further stages in my backend development career I moved on Laravel and symphony. So when I got into the core PHP I started learning PHP. started front-end development at that time I was working on a PHP with frameworks like Laravel and Symfony.

 

Okay, yeah, that's me. I deal with Laravel and Vue myself on a day-to-day basis, getting to like it more and more for sure. But okay, so the reason we're here discussing, or what we are discussing today is a tool that he has developed called Vue Sortable Table. Now, if you've ever done any front-end development that is very data intensive where you have a lot of data that you wanna show and... and allow users to filter and sort and that kind of stuff. Data tables are intricate and aren't just something you can whip up out of the box. I suppose you could if you really, really wanted to reinvent the wheel. I know in my past places I've used the data tables that are built into frameworks like Vutify or Bootstrap View or whatever, but this one... Well, I'll let you tell. Why don't you tell us about View Sortable Table and I guess start out why you developed it, you know, what was the need that you saw, and then go from there.

 

Sure, so I was working on one of the projects in which I need to sort the... set up update some values for the records when I move the columns sort the columns or drag and drop the columns within the table so I have to go through number of libraries on github and figure out the way to do that it was a better time consuming at earlier stages also the earlier solution I come up with has way as number of CSS issues when it a responsive design then in later stages I come up with the solution that I currently shared on the github I find that on the github some of the generic solutions are available in abundance but some of the what you can say niche solution or some quirky solutions not available that much so I feel like I have already spent that much of time and if I can contribute to an open community and someone can actually save that time using my open source project yeah I think that would be helpful to them and for me it would be a contribution to a larger community I'm going to use... Yeah, I can't hear you. I'm not really sure you can.

 

Sorry, I had my mic muted. Let's try that again. That's a

 

Thank

 

great

 

you.

 

edit for our editor. Let's try that again. Okay, so you mentioned that it's lightweight. So obviously you want to make this something that doesn't slow down your site, right? Cause you have to import a ton of JavaScript. So as little as possible, which is the theme du jour, I guess in the internet community, as little JavaScript as possible instead of everything. So you have a number of features in here. In addition to being lightweight, you said it's highly configurable. So what are some of the configuration options that you have in here that make it flexible?

 

Can you hear me?

 

Can you still not hear me? Okay, hold on. There we go. Okay. Can you hear me now? Hello. Can you hear me at all, Shashikant?

 

Can you hear me?

 

Yes. You can't hear me though?

 

Yeah, yeah, I can hear you.

 

Okay, so what was the last thing you heard

 

So,

 

me say?

 

yeah, can you repeat the last sentence? I just lost connection in between.

 

You lost connection. Okay.

 

Yep.

 

I'm gonna go back to, all right, still editing back to where I started asking about features. So you can still hear me, right?

 

Yeah, yeah, I can hear you.

 

Okay, please speak up a little bit too. It's hard to hear you. So I need you to

 

Sure

 

speak louder

 

sure.

 

the rest of the time.

 

Yeah yeah I can hear you.

 

Okay, but I just need you to speak up. So looking at the readme on your GitHub repo,

 

Yeah.

 

you're listing some of the features, right? You mentioned it's lightweight. So, you know, you obviously, the minimal amount of code to do the job to help performance. But then you mentioned that it's highly configurable. And so I'm wondering if you could maybe talk about some of the more important configuration options that you have for configuring your data table.

 

Всё. So I built this package on top of sortable.js So all the options available in the sortable.js You can configure sortable table with those options Along with these options, you can also pass V model for two way bindings You can also pass the number of name of the columns you will have in the table and you can also pass some actions want to perform like edit or delete on the column rows apart from that you can paginate the column you can add custom table classes and yeah the sortable config last option would be whatever options available in sortable js

 

Okay, so SortableJS, I had not heard of that project before. So here's the GitHub repo, SortableJS, slash sortable. And one of the things, did you mention filtering? Is that an option as well that's built into this?

 

are not this one so it's just a pure data table which would help you to just move your table rows within the table itself.

 

Okay, but no option to like have a search field that says, give me only rows that start with Steve, for instance.

 

no I had another project called data table so I may implement this feature there but I don't feel like I should use it here

 

Okay, but you do have pagination, well yeah, which is always crucial and something

 

So just

 

like that

 

a basic

 

because you don't

 

yeah.

 

want a thousand row table on one page, right?

 

Чёрт!

 

Right, okay. So now one thing that is worth pointing out is the version of view. This is written in view three and four view three, correct?

 

Yo.

 

Okay. Now it's interesting, I would be curious to see if this works with Vue 2.7, and the reason I say that is that Vue 2.7 has backported a lot of features from Vue 3, including, I don't know, well, Composition API was already, well, is now available in Vue 2. I'm trying to get out my stuff straight here. So yes, so I'd be curious to see if that would work in Vue 2.7, I guess you'd have to try it out.

 

I will definitely check them.

 

Definitely check. Okay, so looking through your blog post, is there anything else about view sortable table that is worth discussing or talking about?

 

I think view sortable table has been built only for very specific functionality that is to give keep your table a flexibility to move your rows around within the table and you can do some operations based on the events that would be fired when you perform these operations. In addition to that the view sortable table is really helpful to maintain responsive design for mobile and tablets. So I think this would be the crucial benefits of using user-tabletable.

 

Okay, so let me go back, see if I understood. You were talking about moving a rose around, so like dragging and dropping rose within

 

Yeah,

 

the table.

 

yeah, yeah. Yes, exactly.

 

So how does that work? Just thinking about how the pages are rendered. So let's say you come in and you display, you have a component or a page that displays your sortable table. And you drag and you drop your reorder. Is that state maintained the next time that you refresh the page and that the table is displayed? Or what's the benefit of being able to drag and drop like that? Is it just temporary?

 

sure so let's take a use case of let's take a use case of table called priorities so in priority table there are five priorities listed and each priority has been rendered as per the priority level set by the database or end user whatever you call it so if you want to want to give a user a functionality or ability to update the priority so it is very it is easier way to just move one priority row on the top to set the higher priority or move priority row to the bottom to lower its priority and when this drag or drop is completed you will get an event you can read that about in the readme file it will fire an event and you can update time updated on the front end so state

 

Okay,

 

would be

 

I

 

maintained

 

see.

 

even on the refresh.

 

Okay, so, so yeah, just dragging and dropping on the front end isn't necessarily gonna, it's not gonna persist. You have

 

Yeah,

 

to take

 

yeah,

 

advantage

 

yeah.

 

of the event that's fired.

 

И я.

 

And then in that event callback, then you can update your database with the new order, whatever it

 

Yeah.

 

is that you're dragging and dropping. So then that would. So that when you're, hmm, okay. So how does that work with sorting? So if I wanna sort, is the dragging and dropping the primary way of sorting then as compared to clicking on headers? So, I'm gonna go ahead and click on that.

 

No, actually I use the package name as a sortable table because I'm actually using sortable.js to do most of the work. So yeah, that would be the reason I chose the name sortable.js.

 

Okay, so yeah, so I'm looking at the sortable GitHub readme and it's talking about dragging and dropping and the benefit of that. Oh, so you can even drag from one list to another list.

 

Yep.

 

using the sortable multiple uh... Interesting, interesting. So that certainly gives you a little more manual control on your front end.

 

Yeah.

 

Instead of just having to click on headers or some other UI component, uh, to reorder, then you can manually drag and drop and then just persist that to your backend. Interesting. I remember, um, I know back in my Drupal days with jQuery, I can remember having that, uh, conundrum

 

See ya.

 

Or issue how do you do this and Drupal had a whole layer of things built into the jQuery that you could utilize To drag and drop in tables and stuff. But yeah, this is cool brings back memories of that That's an interesting way. That's that's nice to have a UI way to reorder things

 

Yeah.

 

with drag and drop for sure

 

and

 

excellent

 

now specifically on mobile devices I think it is more convenient to update the state by just moving the rows around rather than selecting the order from some drop down and then updating so I think it improves the user experience in general on the smaller devices

 

Okay, now I'm getting a better handle on what this does for you. Excellent. Quick edit, we'll throw an edit in here. I don't think that microphone you're holding up to your mouth is what your computer's using. I think it's using another audio input or like the built into your computer.

 

so it does not any effect in any other way.

 

Yeah, you might want to check in your, uh, in the mic settings in Riverside, you can see, uh, uh, what mic is being used.

 

in the setting.

 

If you just hover over the mic button at the bottom of your window there.

 

So there are two mic options but one is disabled and only one is

 

which one

 

available

 

is being used.

 

I can't really completely read it because it's a truncated the label

 

Huh, okay. All right, back

 

So

 

to it.

 

if I move closer to the laptop does it make any better

 

Yes,

 

or Okay,

 

it does.

 

sure. So I will

 

That

 

try this way

 

leaves me to believe that it's using your computer's microphone and not the one you were

 

Yeah,

 

holding there.

 

yeah I think so.

 

So anyway, all right, back to it. So, okay, so anything else about view sortable table that you wanted to talk about? I think we've covered the big uses of that and sortable.

 

Sure, so I'm currently planning on adding more test cases for the package apart

 

Uh huh.

 

from that, yeah, I'm actually looking for some new contributor for some other projects I have planned for the GitHub So yeah, if anyone feels interested in open source contribution, yeah, they can help me out with some of the things I want to do

 

All right, so yes, we will put the link to the GitHub repo in the show notes. So if you want to contribute to view data table and help him out and add some more great features then by all means, as with any open source project, jump in. Alrighty, so with that, we'll move on to PICs. PICs are part of the show that we get to talk about things that we like to talk about. Want to share and it doesn't necessarily have to do with view or JavaScript or coding or tech at all I will start out and Found an interesting article today on hacker news, which is one of my Things I like to browse Regularly because there's some interesting stuff in there amidst all the arcane and very geeky stuff One is the post that I found on QR codes and how they work. I know QR codes are something we use quite a bit. In our daily lives, whether it's, you know, a sign somewhere that here, scan this, and it'll take you to this website, or I see it in restaurants now where you can scan it, and it will take you to their online menu so you can see, and so on. So, it's a cool little post that gives some pretty good graphics and... details on how QR codes work. So I will post the link to that in the show notes. And with that, I will move on to the highlight of any of my, excuse me, podcasts, which is the dad jokes of the week. So for any of you that are fans of the classic office space movie, there's the whole. scene or set of scenes with the printer and PC load letter and how they destroy the printer. This joke brought those to mind but the other day I had a printer here in my office and I was confused when my printer started playing music and then I realized that the paper was jamming. There we go, delayed rim shot there, sorry. Question, what do you call it when you stab a milkshake with a straw? Shakespeare.

 

I'm gonna go.

 

It's a shake and you're sparing it. Yes, I know. Not supposed to explain the jokes, but sometimes I just feel the need anyway. And then, how do you tell a male ant apart from a female ant? They're all female, otherwise they would be called uncle. Yes, yes, thank you. And those are the dad jokes of the week. All right, Shashikant, do you have any picks for us?

 

I'm not really sure what to talk about so you may suggest some topic we can talk about

 

Oh, let's put it this way. Have you seen any movies or TV shows lately or any other view tools or libraries or any good new dishes?

 

So yeah, so I'm currently reading Plato's Republic.

 

Really?

 

So yeah, it's a really hard book to go through. it's

 

Uh huh.

 

really too much to process means if you go through the chapter I think in normal books you just move to the second chapter but I think in this book you really have to think about the content which has been shared by an author to consume it properly and yeah I am almost It's almost 2-3 months I'm still going through the book. I've really seen new perspective on shared by an author about many different things like politics, morality, the state timings, how we organize our society in general. Yeah, I'm actually most of the time fascinated by how humans interact or behave or how we think about things and come to the solutions. So yeah, this book definitely helped me to give new perspective or think about things in different way. Apart from

 

That is

 

that...

 

definitely probably the oldest school book I've ever heard mentioned on Pixar. I mean,

 

Ha

 

it's

 

ha

 

one of those books, it's one of those books that I think most of us have heard of in school

 

Всё.

 

or. heard about it at one point in our life and probably most of us have probably never read either.

 

Yeah.

 

Written around 380 BC, so yeah, like 2500 years old. Well, let me think, 23, 2400 years old. Is it big? How many pages is it? I guess, well, it depends on your version of it, I guess, right?

 

И я.

 

But yeah, I would imagine that's not a book that you can sit down like a novel and just read through, right? It takes you

 

Yeah,

 

a few times to reread

 

you just

 

and

 

can't

 

try to

 

finish

 

understand.

 

that book in a day or a week even if you're really serious about understanding what the author is trying to say. you have to take your time to digest it properly.

 

for sure, for sure. All right, well that is quite a pick. That is quite a pick for sure. All right, well thank you for sharing that with us. I will put a link to a copy of it somewhere in the show notes, because you can get it in many places for sure. All right, with that we will end this version of Views on Vue. Thank you, thank you Shashikant for coming on. I will certainly be taking a look at Vue data table since. I seem to run into that need more than once and I don't want to necessarily have to import a whole framework or use a whole framework just to have a data table for sure. So with that, we will sign off. Oh, before I forget and sign off is if, other than GitHub, is there Twitter or something else where people could get ahold of you or find out more about what you're working on?

 

I'm not that much active on social media but I think you can find my website either on my github profile or I will share it with you and you can put it in show notes

 

Oh, right. Okay. All right. When we will put that it's on the GitHub repo that will be in the show notes, but we can put that link separately as well. Alrighty. Well, thank you for coming on. It was good to hear about that and we will talk to everybody next time on views on view.