Hi!
I’ve been playing around with aldeed:tabular and it’s amazing. Really PnP and is extremely fast with tons of features.
I’m following template cells to be able to customize cells of a column (field)
It’s supposed to work by using an instance of a Blaze template to render the cell. I’ve followed that section exactly and my issue is that the tmpl is undefined
In the example, it would think Template.bookCheckOutCell is undefined. This is being called in common code but this call is succeeded by a Meteor.isClient.
However, I can access Template.bookCheckOutCell when calling it directly from the client. I’ve tried importing the templates before creating the table, etc…But no luck.
I’m looking into a workaround by using the render opt and manually returning html. This should work, but I’d like to use the feature inherent in the library. Any ideas?
Thanks!
1 Like
You aren’t the only one with a table cells issue. I have also followed the instructions and yet I get no template rendered out to my cell. I’m not sure what you or I are missing.
As it stands, the rest of the table works great, but I have yet to be able to get a custom button into the cell.
I’m hoping that someone can chime in and help both of us out.
1 Like
It is pretty simple define a template with buttons to be shown on the cell and its corresponding actions.
eg
<template name="bookCheckOutCell">
<button type="button" class="btn btn-xs btn-raised btnst"><i class="fa fa-check" aria-hidden="true"></i></button>
<button type="button" class="btn btn-xs btn-raised btnlaunch"><i class="fa fa-external-link" aria-hidden="true"></i></button>
</template>```
Now this template has to be referenced in the table created. Let us assume you want it on column tmpl
TabularTables = {};
TabularTables.xxxx = new Tabular.Table({
name: “xxxx”,
collection: xxxx,
columns: [{tmpl: Meteor.isClient && Template.bookCheckOutCell}]
})
It works for me, but I guess you are using similar code.
Here is what i have.
In common code to server and client.
new Tabular.Table({
name: 'newConfigList',
collection: Configurations,
columns: [
{ data: 'configName', title: 'Configuration Name' },
{
data: 'createdAt',
title: 'Created',
render: function (val, type, doc) {
if (val instanceof Date) {
return moment(val).calendar();
} else {
return '';
}
},
},
{
data: 'updatedAt',
title: 'Updated',
render: function (val, type, doc) {
if (val instanceof Date) {
return moment(val).calendar();
} else {
return '';
}
},
},
{
title: 'Uploaded',
bSortable: false,
tmpl: Meteor.isClient && Template.Upload_Button,
},
],
selector(userId) {
return { owner: userId, hidden: { $exists: false } };
},
responsive: true,
autoWidth: false,
});
The template is just as simple…
<template name="Upload_Button">
<a href="#">
<div
class="mini ui icon button yellow uploadbutton"
data-title="Upload Configuration"
data-content=""
>
<i
class="cloud upload alternate icon"
data-title="Upload Configuration"
data-content=""
></i>
</div>
</a>
</template>
I’m curious if I have to put the button template some place where i usually don’t.
in my app I have my templates in imports/ui/. (the button template is in imports/ui/components) and the common tabular code is in imports/startup/both
It’s like it can’t find the template to then render into the cell.
The table itself renders the data etc. correctly.
Hey, perumalkuk,
I finally got it solved. My hunch was correct Template was unable to find the actual template I was trying to call .
I am not a fan of this solution, but because of the import structure of my project it simply couldn’t find the button template i wanted to render in the table. So in my common (client and server) tabular instantiation code I am importing the template i need but, wrapped in an if(Meteor.isClient) check.
Like so,
if(Meteor.isClient){
import '../../ui/components/upload-button.hbs.html';
import '../../ui/components/upload-button.js';
}
If there is a better pattern to this. I’m all ears and open to doing it .
1 Like
If you import the button and table from wherever you’re going to use the table in your client code, that may be cleaner. This looks like purely a load order issue
1 Like
I’ll try importing in that way. Thank you for the info!
Welcome to the Meteor community!