feat: translations

[hrwX]

• Adds translations support to datatable.
• Language can be passed as parameter while initializing the datatable.
• Translations can be added in translations.js.
• Custom translations can be added using customTranslations when initializing the datatable.
• Handling Pluralization:
  • to translate strings that can have a plural word like row/rows, multiple strings can be defined for counts, ie for a particular count, if a string is defined, it'll be used. eg: if the total row count is 0, the string for key 0 will be using in {0} rows selected the translations and if there exists no key like 10, default key will be used for translation. This way multiple use cases can be handled

    this.translations = {
            en: {
                '{count} rows selected': {
                    0: '{count} rows selected',
                    1: '{count} row selected',
                    default: '{count} rows selected'
                }
            }
        };

[barredterra]

@hrwX can you add an example how this can be used? How do I get my custom labels to use the original actions?

datatable/src/defaults.js

Lines 9 to 33 in 699ef5d

	{
	label: 'Sort Ascending',
	action: function (column) {
	this.sortColumn(column.colIndex, 'asc');
	}
	},
	{
	label: 'Sort Descending',
	action: function (column) {
	this.sortColumn(column.colIndex, 'desc');
	}
	},
	{
	label: 'Reset sorting',
	action: function (column) {
	this.sortColumn(column.colIndex, 'none');
	}
	},
	{
	label: 'Remove column',
	action: function (column) {
	this.removeColumn(column.colIndex);
	}
	}
	],

[hrwX]

@hrwX can you add an example how this can be used? How do I get my custom labels to use the original actions?

datatable/src/defaults.js

Lines 9 to 33 in 699ef5d

	{
	label: 'Sort Ascending',
	action: function (column) {
	this.sortColumn(column.colIndex, 'asc');
	}
	},
	{
	label: 'Sort Descending',
	action: function (column) {
	this.sortColumn(column.colIndex, 'desc');
	}
	},
	{
	label: 'Reset sorting',
	action: function (column) {
	this.sortColumn(column.colIndex, 'none');
	}
	},
	{
	label: 'Remove column',
	action: function (column) {
	this.removeColumn(column.colIndex);
	}
	}
	],

@barredterra

• Let's say we are initializing the datatable in a script, and we want to override the headerDropdown, we can easily do that using

		let me = this;
		this.datatable = new DataTable(this.$datatable_wrapper[0], {
			columns: [],
			data: [],
			overrideHeaderDropdown: true,
			headerDropdown: [{
				label: __('Sort Ascending'),
				action: function (column) {
					// 'me' is used since this references the DataTable object in here
					me.datatable.sortColumn(column.colIndex, 'asc');
				}
			}]
		});

• this is just relevant to the frappe framework implementation.
• Either we can go with this or build a feature for supporting translations in the library itself.

[barredterra]

@hrwX thanks for adding the example, looks good to me.

@netchampfaris what do you think?

[netchampfaris]

I think a better API for translations would be:

let dt = new DataTable({
  ...
  translations: {
    'Sort Ascending': __('Sort Ascending'),
    'Sort Descending': __('Sort Descending'),
  }
})

You provide alternative text for every user-facing text that is rendered in DataTable.

@hrwX @barredterra Thoughts?

[barredterra]

@netchampfaris thanks for your suggestion! Kindly review again whenever you have time. 😊

[netchampfaris]

@hrwX Hey, thanks for the quick update.

However, I think we should extend this for every user-facing text in DataTable. For e.g., "No Data" when there are no rows. Every user-facing text must be wrapped in a function that will then look up translations strings passed as options. This will make sure that user-facing text added in the future are also covered.

[netchampfaris]

This method only handles translations for labels in headerDropdown, it should handle all user-facing text. A better approach would be to wrap all user-facing text in a translation function for e.g., _('Sort descending') and let that function do the replacement.

[barredterra]

@netchampfaris @hrwX if we pass a function, we also need to pass variables and context to that function. This way datatable and frappes __() function will get somewhat coupled and anybody else using datatable will probably need to write a wrapper function for their own translation method. Also we would need to copy part of it to do variable substitution if no translation function is provided.

Another option would be to use something like http://i18njs.com/ and provide our own translations in this repo to keep it as a standalone solution. There are <10 translatable strings in this repo, so this would't cause much overhead.

[hrwX]

@netchampfaris @hrwX if we pass a function, we also need to pass variables and context to that function. This way datatable and frappes __() function will get somewhat coupled and anybody else using datatable will probably need to write a wrapper function for their own translation method. Also we would need to copy part of it to do variable substitution if no translation function is provided.

Another option would be to use something like http://i18njs.com/ and provide our own translations in this repo to keep it as a standalone solution. There are <10 translatable strings in this repo, so this would't cause much overhead.

@netchampfaris Correct me if I am wrong
@barredterra What faris is saying is that write a frappe's _ equivalent function in datatable, and if translations are provided, then just replace it.

[hrwX]

@netchampfaris @barredterra have added i18njs for handling the translations for user-facing strings.
Can you guys take a look at it

[netchampfaris]

@barredterra What faris is saying is that write a frappe's _ equivalent function in datatable, and if translations are provided, then just replace it.

Yes, this is what I meant. I would like to avoid adding a new library 😅

[barredterra]

@netchampfaris those libraries are tiny (~200 lines of code). If you prefer we can just copy and paste the code here.

[hrwX]

@barredterra @netchampfaris Was able to implement a translation manager similar to the ones in frappe. Also after implementing frappe like translations, seems like i18njs would have been a bloatware since we would just use it for 4/5 strings.

what do you guys think ?

[hrwX]

        de: {
                'Sort Ascending': 'Aufsteigend sortieren',
                'Sort Descending': 'Absteigend sortieren',
                'Reset sorting': 'Sortierung zurücksetzen',
                'Remove column': 'Spalte entfernen',
                'No Data': 'Keine Daten',
                '{0} cells copied': {
                    0: '{0} zellen kopiert',
                    1: '{0} zelle kopiert',
                    default: '{0} zellen kopiert'
                },
                '{0} rows selected': {
                    0: '{0} zeilen ausgewählt',
                    1: '{0} zeile ausgewählt',
                    default: '{0} zeilen ausgewählt'
                }
            }

[github-actions]

🎉 This PR is included in version 1.16.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀