Aldeed:Tabular - stuck on processing and browser crashes

help
1

Hi all,

So I’ve gone back to aldeed:tabular but still not able to resolve this issue where it’s stuck on processing and hangs the browser (I’m sending 3000 rows of data). I’ve tried this solution but to no avail. I also have a pretty flat folder structure if that helps:

Here’s my logins.js file:

import { Template } from 'meteor/templating';


Logins = new Mongo.Collection('logins');

TabularTables = {};

TabularTables.Logins = new Tabular.Table({
  name: "Logins",
  collection: Logins,
  columns: [
    {data: "Username", title: "Username"},
    {data: "Name", title: "Name"},
    {data: "Firm", title: "Firm"},
    {data: "RegisteredAt", title: "RegisteredAt"},
    {data: "Recordtype", title: "Record type"},
    {
      tmpl: Meteor.isClient && Template.loginstemplate
    }
  ]
});


if(Meteor.isClient){
Meteor.subscribe('getlogins');

Template.loginstemplate.helpers({
	'ready': function () {
		return Template.instance().subscriptionsReady();
	},
	'getlogin': function(){
		return Logins.find({});
	},
	'countusers': function(){
		return Logins.find({"RegisteredAt":{$ne:'N/A'}}).count();
	},
	'countactiveusers': function(){
		return Logins.find().count();
	},
	'registeredatcheck': function(){
		return this.RegisteredAt instanceof Date;
	}

});


Template.registerHelper('formatDate', function(date) {
	if (this.RegisteredAt instanceof Date){
		return moment.utc(date).format('D MMM YYYY h:mm A');
	}
});

}

if(Meteor.isServer){
Meteor.publish('getlogins', function(){
	return Logins.find({});
});
}

And my HTML file:

<head>
<title>Logins</title>
</head>
<body>
<h1>Logins</h1>
{{> loginButtons}}
{{> loginstemplate}}
</body>

<template name="loginstemplate">
{{#if ready}}
  <h1>External users logged in: {{countusers}}; Active: {{countactiveusers}}</h1>

{{> tabular table=TabularTables.Logins class="table table-striped table-bordered table-condensed"}}
{{/if}}
</template>
2

In your TabularTables.Logins definition, it looks like you want to include the contents of your Template.loginstemplate in a cell. The problem is that you’re then making your {{> tabular ...}} call in that Template, so you’re creating a circular reference. As a test first comment out the

{
  tmpl: Meteor.isClient && Template.loginstemplate
}

part of your TabularTables.Logins.

3

Wow @hwillson this immediately resolved the issue! And it renders very fast as well even with 100 rows. Could you give an example of how and when to use it via this “cell” vs. this method? The documentation refers to the “cell” way:

TabularTables = {};

   TabularTables.Books = new Tabular.Table({
     name: "Books",
 collection: Books,
 columns: [
{data: "title", title: "Title"},
{data: "author", title: "Author"},
{data: "copies", title: "Copies Available"},
    {
///
    },
    {data: "summary", title: "Summary"},
    {
      tmpl: Meteor.isClient && Template.bookCheckOutCell
    }
  ]
  });
4

The documentation is just showing an example of how you can include a custom Template in a specific cell of your table, if you want to. Just make sure that if you do this you aren’t also making your {{> tabular …}} call within that Template, as that will really confuse Tabular. From your sample though it doesn’t look like you need to inject a custom Template into your table, so just leave that part out.

If you do want to add a custom Template though, you’d want to do something like:

TabularTables.Logins = new Tabular.Table({
  name: "Logins",
  collection: Logins,
  columns: [
    {data: "Username", title: "Username"},
    {data: "Name", title: "Name"},
    {data: "Firm", title: "Firm"},
    {data: "RegisteredAt", title: "RegisteredAt"},
    {data: "Recordtype", title: "Record type"},
    {
      tmpl: Meteor.isClient && Template.customCellTemplate
    }
  ]
});

then

<head>
  <title>Logins</title>
</head>
<body>
  <h1>Logins</h1>
  {{> loginButtons}}
  {{> loginstemplate}}
</body>

<template name="loginstemplate">
  {{#if ready}}
    <h1>External users logged in: {{countusers}}; Active: {{countactiveusers}}</h1>
    {{> tabular table=TabularTables.Logins class="table table-striped table-bordered table-condensed"}}
  {{/if}}
</template>

<template name="customCellTemplate">
  Show custom cell contents here ...
</template>
5

Thanks, very helpful!