How to make table headers translatable?

[sebastienfi]

Hey there,

I've created my own translation HOC, and I'm looking to make it work with Sematable.

I've worked on 3 ideas but have been unable to make it work.

1. I'm trying to pass my props to the columns array, transforming columns into function and thus having to override the PropTypes definition within your Framework throught the columns variable.

2. My second approach is to read this translation directly from LocalStorage. However, the difficulty that I encounter here is that I refresh the page in order for the change to be reflected. How could I manually destroy a specific table, or better yet in my case, all the tables ?

3. My last idea would be based on the advanced example in your GitHub Readme... However, to pursue this idea further I would find it extremely helpful if you could explicitely show me the code for headers: { select, id, name } which is passed as props to AppsTable.

import React, { Component, PropTypes } from 'react';
import sematable, { Table } from 'sematable';
import AppsTableActions from './AppsTableActions';

const columns = [
  { key: 'id', header: 'ID', sortable: true, searchable: true, primaryKey: true },
  { key: 'name', header: 'Application', sortable: true, searchable: true },
  { key: 'token', header: 'Token' },
  { key: 'plan', header: 'Plan', sortable: true },
  { key: 'role', header: 'Role', sortable: true },
  { key: 'actions', header: 'Actions', Component: AppsTableActions },
];

const propTypes = {
  headers: PropTypes.object.isRequired,
  data: PropTypes.array.isRequired,
  primaryKey: PropTypes.string.isRequired,
};

class AppsTable extends Component {
  render() {
    return (
      <Table
        {...this.props}
        selectable
        columns={columns}
      />
    );
  }
}

Any help would be truely appreciated.
Thank you so much!

[sebastienfi]

Anyone ?

[prog8]

@amir-hadzic ^

[amir-hadzic]

Hi @sebastienfi,

You can try to create and pass the columns prop in render, something like this:

import React, { Component, PropTypes } from 'react';
import sematable, { Table } from 'sematable';
import AppsTableActions from './AppsTableActions';
import { translate } from 'my-translate-lib';

const propTypes = {
  headers: PropTypes.object.isRequired,
  data: PropTypes.array.isRequired,
  primaryKey: PropTypes.string.isRequired,
};

class AppsTable extends Component {
  render() {
    const columns = [
      { key: 'id', header: 'ID', sortable: true, searchable: true, primaryKey: true },
      { key: 'name', header: translate('app'), sortable: true, searchable: true },
      { key: 'token', header: translate('token') },
      { key: 'plan', header: translate('plan'), sortable: true },
      { key: 'role', header: translate('role'), sortable: true },
      { key: 'actions', header: translate('actions'), Component: AppsTableActions },
    ];
    return (
      <Table
        {...this.props}
        selectable
        columns={columns}
      />
    );
  }
}

You would just need to make sure that render() is called when language is changed. I'm guessing that you keep the current language in state somewhere, so you can pass it down to the table component.