How do I get translated column headers with Meteor and aldeed:tabular?

Question

I'm running into the same problem as issue #53 of aldeed:tabular . When defining the table as suggested in the documentation , it is too soon to invoke a translation function ( TAPi18n.__ or other), since the I18N variables are not yet set.

What is the nice, reactive way of feeding the translated column titles into DataTables , either directly as suggested by aldeed himself upon closing the issue, or through aldeed:tabular ?

Answer 1

With .tabular.options

There is a way with the template's .tabular.options reactive variable, but it is quirky. Here is a variation of the library example using tap-i18n to translate the column headers:

function __(key) {
  if (Meteor.isServer) {
    return key;
  } else {
    return TAPi18n.__(key);
  }
}

Books = new Meteor.Collection("Books");

TabularTables = {};

TabularTables.Books = new Tabular.Table({
  name: "Books",
  collection: Books,
  columns: []      // Initially empty, reactively updated below
});

var getTranslatedColumns = function() {
  return [
    {data: "title", title: __("Title")},
    {data: "author", title: __("Author")},
    {data: "copies", title: __("Copies Available")},
    {
      data: "lastCheckedOut",
      title: __("Last Checkout"),
      render: function (val, type, doc) {
        if (val instanceof Date) {
          return moment(val).calendar();
        } else {
          return "Never";
        }
      }
    },
    {data: "summary", title: __("Summary")},
    {
      tmpl: Meteor.isClient && Template.bookCheckOutCell
    }
  ];
}

if (Meteor.isClient) {
  Template.tabular.onRendered(function() {
    var self = this;
    self.autorun(function() {
      var options = _.clone(self.tabular.options.get());
      options.columns = getTranslatedColumns();
      self.tabular.options.set(_.clone(options));
    });
  });
}

With a forked version

I created a pull request against branch devel of meteor-tabular to enable the straightforward, reactive-based approach like so:

<template name="MyTemplateWithATable">
{{> tabular table=makeTable class="table table-editable table-striped table-bordered table-condensed"}}
</template>

var MyColumns = ["title", "author"];
// Assume translations are set up for "MyTable.column.title", "MyTable.column.author"
// in other source files; see TAPi18n documentation for how to do that

function makeTable() {
  return new Tabular.Table({
    name: "MyTable",
    collection: MyCollection,
    columns: _.map(MyColumns,
                   function(colSymbol) {
                     return {
                       data: colSymbol,

                       title: TAPi18n.__("MyTable.column." + colSymbol)
                     };
                   })
  });
}

if (Meteor.isServer) {
  // Called only once
  makeTable();
} else if (Meteor.isClient) {
  // Reactively called multiple times e.g. when switching languages
  Template.MyTemplateWithATable.helpers({makeTable: makeTable});
}

Answer 2

Recent versions of aldeed:tabular allow to specify a function for setting the column titles.

import {TAPi18n} from 'meteor/tap:i18n';

TabularTables = {};
TabularTables.Departments= new Tabular.Table({
  name: 'Departments',
  collection: Departments,
 responsive: true,
 autoWidth: true,
 stateSave: false,
 columns: [
    {data: "name", titleFn: function() {
      return TAPi18n.__("name");
    }},
    {data: "description", titleFn: function() {
      return TAPi18n.__("description");
    }}
  ]
});

The language change is reactive. If you have translations you can switch and columns will be translated.

TAPi18n.setLanguage("en");
TAPi18n.setLanguage("de");

Word of warning: This currently does not work when you include invisible columns in your table data. The offset is wrong and you get wrong column titles.