0

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?

DomQ
  • 4,184
  • 38
  • 37

2 Answers2

0

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});
}
DomQ
  • 4,184
  • 38
  • 37
0

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.

Dieter
  • 1,154
  • 8
  • 7