JavaScript table


Hey everyone,
I’m working on a Event manager application and I need to add information to a table such as time, summary, location etc.Example
I’m rather new to NativeScript so I’d really appreciate the help, if anybody has an example code with data binding as well it’ll be amazing!

Thanks in advance! :slight_smile:

–Searched Stack Overflow and GitHub App.
–CLI : 3.2.1
–Cross-platform modules: 3.2.0
Runtime(s): --Added a image as I didn’t understand. [See Plugin(s)]
Plugin(s): --Added a image as I didn’t understand. Image


You would just create a table with a GridLayout normally with columns and rows, if it needs to be dynamic perhaps generate through code…

You can see how to dynamically create a grid here

But if it’s just a static set of rows and columns everytime, perhaps just data-bind it?


I’ve been looking for days and couldn’t find a way to do a table in NativeScript, I know it sounds silly but it’s just the truth :frowning: Do you by any chance have an example or a template I could use?
And I’d like to have the option to Add,Delete row from the app so it’s not static.



See the link above… the code in the “The Basics of Building Layouts” section

A grid layout IS a table (rows and columns). So in this case lets say we load the view, do the callback to get the data, then loop through the results to generate our columns and rows on the fly, then maybe have a StackLayout somewhere on the page to plop the grid into and do like

<StackLayout id="placeholder" />
  var stack = page.getViewById("placeholder");
  var myGrid = myGenerateGridFunction();

Tables look pretty crappy on a phone though, you SURE that’s where you want to go?


Sorry for the minor delay in response.
My goal is to have a table which represents a schedule for an event, I’d like to have the option to edit the table from inside the app and editing the values.
I’m open to suggestions as I’m relatively new to NativeScript and Web programming, do you have anything better on your mind that can fulfill what I need?



Personally I came from web and had to re-learn design for native mobile.

Honestly you can do whatever you want, I’d suggest browsing for native mobile UI pattern samples for this type of thing. But usually for “editing” you wouldn’t want it inline as much as like click the row or click an icon to go to a new view where the fields are listed out, then save and go back.

Like you could also use a Nativescript UI Calendar maybe and click days to drill down, or hell I don’t know :slight_smile:

But if you want a literal table, just go with gridview and go off the samples I listed above, shouldn’t take more than a few minutes to figure it out.


But usually for “editing” you wouldn’t want it inline as much as like click the row or click an icon to go to a new view where the fields are listed out, then save and go back.

I didn’t think about that idea, thanks.
How do I implement that though? Is there a MouseListener equivalent?
Thanks again and sorry for the novice questions :slight_smile:


No, there’s a lot of events to use, but generally to click and navigate you just want the tap event (like think of current apps on your phone and how you use them)

So the “tap” can literally be on ANYTHING and in the tap event itself (if the data is bound) you can do like

var dataItem = eventData.bindingContext;

And this will return you the javascript object that was used to generate the data on that row.

I mean heck, maybe you just want an array of objects then use a Repeater to create your table… again, this is all you, it’s hard to direct or lead not seeing mockups.

I would just recommend you plan out how you want it to look and work first, then head in that direction :slight_smile: