Global local in EJ2 TypeScript Spreadsheet control

4 Jul 202424 minutes to read

Localization

The Localization library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
locale value and translation object.

The following list of properties and their values are used in the Spreadsheet.

Locale keywords	Text
Cut	Cut
Copy	Copy
Paste	Paste
PasteSpecial	Paste Special
All	All
Values	Values
Formats	Formats
Font	Font
FontSize	Font Size
Bold	Bold
Italic	Italic
Underline	Underline
Strikethrough	Strikethrough
TextColor	Text Color
FillColor	Fill Color
HorizontalAlignment	Horizontal Alignment
AlignLeft	Align Left
AlignCenter	Center
AlignRight	Align Right
VerticalAlignment	Vertical Alignment
AlignTop	Align Top
AlignMiddle	Align Middle
AlignBottom	Align Bottom
InsertFunction	Insert Function
Insert	Insert
Delete	Delete
Rename	Rename
Hide	Hide
Unhide	Unhide
NameBox	Name Box
ShowHeaders	Show Headers
HideHeaders	Hide Headers
ShowGridLines	Show Gridlines
HideGridLines	Hide Gridlines
AddSheet	Add Sheet
ListAllSheets	List All Sheets
FullScreen	Full Screen
CollapseToolbar	Collapse Toolbar
ExpandToolbar	Expand Toolbar
CollapseFormulaBar	Collapse Formula Bar
ExpandFormulaBar	Expand Formula Bar
File	File
Home	Home
Formulas	Formulas
View	View
New	New
Open	Open
SaveAs	Save As
ExcelXlsx	Microsoft Excel
ExcelXls	Microsoft Excel 97-2003
CSV	Comma-separated values
FormulaBar	Formula Bar
Ok	Ok
Close	Close
Cancel	Cancel
Apply	Apply
MoreColors	More Colors
StandardColors	Standard Colors
General	General
Number	Number
Currency	Currency
Accounting	Accounting
ShortDate	Short Date
LongDate	Long Date
Time	Time
Percentage	Percentage
Fraction	Fraction
Scientific	Scientific
Text	Text
NumberFormat	Number Format
MobileFormulaBarPlaceHolder	Enter value or Formula
PasteAlert	You can’t paste it here because the copy area and paste area aren’t in the same size. Please try pasting in a different range.
DestroyAlert	Are you sure you want to destroy the current workbook without saving and create a new workbook?
SheetRenameInvalidAlert	Sheet name contains invalid character.
SheetRenameEmptyAlert	Sheet name cannot be empty.
SheetRenameAlreadyExistsAlert	Sheet name already exists. Please enter another name.
DeleteSheetAlert	Are you sure you want to delete this sheet?
DeleteSingleLastSheetAlert	A Workbook must contain at least one visible worksheet.
PickACategory	Pick a category
Description	Description
UnsupportedFile	Unsupported File
InvalidUrl	Invalid Url
SUM	Adds a series of numbers and/or cells.
SUMIF	Adds the cells based on the specified condition.
SUMIFS	Adds the cells based on the specified conditions.
ABS	Returns the value of a number without its sign.
RAND	Returns a random number between 0 and 1.
RANDBETWEEN	Returns a random integer based on the specified values.
FLOOR	Rounds a number down to the nearest multiple of a given factor.
CEILING	Rounds a number up to the nearest multiple of a given factor.
PRODUCT	Multiplies a series of numbers and/or cells.
AVERAGE	Calculates average for the series of numbers and/or cells excluding text.
AVERAGEIF	Calculates average for the cells based on the specified criterion.
AVERAGEIFS	Calculates average for the cells based on the specified conditions.
AVERAGEA	Calculates the average for the cells evaluating TRUE as 1 text and FALSE as 0.
COUNT	Counts the cells that contain numeric values in a range.
COUNTIF	Counts the cells based on the specified condition.
COUNTIFS	Counts the cells based on specified conditions.
COUNTA	Counts the cells that contain values in a range.
MIN	Returns the smallest number of the given arguments.
MAX	Returns the largest number of the given arguments.
DATE	Returns the date based on the given year, month, and day.
DAY	Returns the day from the given date.
DAYS	Returns the number of days between two dates.
IF	Returns value based on the given expression.
IFS	Returns value based on the given multiple expressions.
AND	Returns TRUE if all the arguments are TRUE otherwise returns FALSE.
OR	Returns TRUE if any of the arguments are TRUE otherwise returns FALSE.
IFERROR	Returns value if no error found else it will return specified value.
CHOOSE	Returns a value from the list of values based on the index number.
INDEX	Returns the value of the cell in a given range based on row and column number.
FIND	Returns the position of a string within another string which is case sensitive.
CONCATENATE	Combines two or more strings together.
CONCAT	Concatenates a list or a range of text strings.
SUBTOTAL	Returns subtotal for a range using the given function number.
RADIANS	Converts degrees into radians.
MATCH	Returns the relative position of a specified value in the given range.
DefineNameExists	This name already exists try a different name.
CircularReference	When a formula refers to one or more circular references this may result in an incorrect calculation.
ShowRowsWhere	Show rows where
CustomFilterDatePlaceHolder	Choose a date
CustomFilterPlaceHolder	Enter the value
CustomFilter	Custom Filter
Between	Between
MatchCase	Match Case
DateTimeFilter	DateTime Filters
Undo	Undo
Redo	Redo
DateFilter	Date Filters
TextFilter	Text Filters
NumberFilter	Number Filters
ClearFilter	Clear Filter
NoResult	No Matches Found
FilterFalse	False
FilterTrue	True
Blanks	Blanks
SelectAll	Select All
GreaterThanOrEqual	Greater Than Or Equal
GreaterThan	Greater Than
LessThanOrEqual	Less Than Or Equal
LessThan	Less Than
NotEqual	Not Equal
Equal	Equal
Contains	Contains
EndsWith	Ends With
StartsWith	Starts With
ClearButton	Clear
FilterButton	Filter
CancelButton	Cancel
OKButton	OK
Search	Search
Link	Link
Hyperlink	Hyperlink
EditHyperlink	Edit Hyperlink
OpenHyperlink	Open Hyperlink
RemoveHyperlink	Remove Hyperlink
InsertLink	Insert Link
EditLink	Edit Link
WebPage	WEB PAGE
ThisDocument	THIS DOCUMENT
DisplayText	Display Text
Url	URL
CellReference	Cell Reference
Sheet	Sheet
DefinedNames	Defined Names
EnterTheTextToDisplay	Enter the text to display
EnterTheUrl	Enter the URL
ProtectSheet	Protect Sheet
UnprotectSheet	Unprotect Sheet
SelectCells	Select cells
FormatCells	Format cells
FormatRows	Format rows
Format Columns	Format columns
InsertLinks	Insert links
ProtectContent	Protect the contents of locked cells
ProtectAllowUser	Allow all users of this worksheet to
EditAlert	The cell you’re trying to change is protected. To make a change, unprotect the sheet.
FindReplaceTooltip	Find & Replace
InsertingEmptyValue	Reference value is not valid.
ByRow	By Row
ByColumn	By Column
MatchExactCellElements	Match Exact Cell Contents
EntercellAddress	Enter Cell Address
FindAndReplace	Find and Replace
ReplaceAllEnd	matches replaced with.
FindNextBtn	Find Next
FindPreviousBtn	Find Previous
ReplaceBtn	Replace
ReplaceAllBtn	Replace All
GotoHeader	Go To
GotoSpecialHeader	Go To Special
SearchWithin	Search within
SearchBy	Search by
Reference	Reference
Workbook	Workbook
NoElements	We couldn’t find what you were looking for.
FindWhat	Find what
ReplaceWith	Replace with
EnterValue	Enter Value
DefineNameInValid	The name that you entered is not valid.
FindValue	Find Value
ReplaceValue	Replace Value
DataValidation	Data Validation
CLEARALL	CLEAR ALL
APPLY	APPLY
CellRange	Cell Range
Allow	Allow
Data	Data
Minimum	Minimum
Maximum	Maximum
IgnoreBlank	Ignore blank
WholeNumber	Whole Number
Decimal	Decimal
Date	Date
TextLength	Text Length
List	List
NotBetween	Not between
EqualTo	Equal to
NotEqualTo	Not equal to
Greaterthan	Greater than
Lessthan	Less than
GreaterThanOrEqaulTo	Greater than or eqaul to
LessThanOrEqualTo	Less than or equal to
InCellDropDown	In-cell-dropdown
Sources	Sources
Value	Value
Retry	Retry
DialogError	The list source must be a reference to a single row or column.
ValidationError	This value doesn’t match the data validation restrictions defined for the cell.
HideRow	Hide Row
HideRows	Hide Rows
UnHideRows	UnHide Rows
HideColumn	Hide Column
HideColumns	Hide Columns
UnHideColumns	UnHide Columns
InsertRow	Insert Row
InsertRows	Insert Rows
InsertColumn	Insert Column
InsertColumns	Insert Columns
DeleteRow	Delete Row
DeleteRows	Delete Rows
DeleteColumn	Delete Column
DeleteColumns	Delete Columns
Borders	Borders
TopBorders	Top Borders
LeftBorders	Left Borders
RightBorders	Right Borders
BottomBorders	Bottom Borders
AllBorders	All Borders
HorizontalBorders	Horizontal Borders
VerticalBorders	Vertical Borders
OutsideBorders	Outside Borders
InsideBorders	Inside Borders
NoBorders	No Borders
BorderColor	Border Color
BorderStyle	Border Style
INTERCEPT	Calculates the point of the Y-intercept line via linear regression.
SLOPE	Returns the slope of the line from linear regression of the data points.
FreezePanes	Freeze Panes
FreezeRows	Freeze Rows
FreezeColumns	Freeze Columns
UnfreezePanes	Unfreeze Panes
UnfreezeRows	Unfreeze Rows
UnfreezeColumns	Unfreeze Columns
MergeCells	Merge Cells
MergeAll	Merge All
MergeHorizontally	Merge Horizontally
MergeVertically	Merge Vertically
Unmerge	Unmerge
UnmergeCells	Unmerge Cells
SortAscending	Ascending
SortDescending	Descending
CustomSort	Custom Sort
ClearAllFilter	Clear
ReapplyFilter	Reapply
Clear	Clear
ClearContents	Clear Contents
ClearAll	Clear All
ClearFormats	Clear Formats
ClearHyperlinks	Clear Hyperlinks
Image	Image
AddColumn	Add Column
SortBy	Sort by
ThenBy	Then by
Chart	Chart
Column	Column
Bar	Bar
Area	Area
Pie	Pie
Doughnut	Doughnut
PieAndDoughnut	Pie/Doughnut
Line	Line
Radar	Radar
Scatter	Scatter
ChartDesign	Chart Design
ClusteredColumn	Clustered Column
StackedColumn	Stacked Column
StackedColumn100	100% Stacked Column
ClusteredBar	Clustered Bar
StackedBar	Stacked Bar
StackedBar100	100% Stacked Bar
StackedArea	Stacked Area
StackedArea100	100% Stacked Area
StackedLine	Stacked Line
StackedLine100	100% Stacked Line
AddChartElement	Add Chart Element
Axes	Axes
AxisTitle	Axis Title
ChartTitle	Chart Title
DataLabels	Data Labels
Gridlines	Gridlines
Legends	Legends
PrimaryHorizontal	Primary Horizontal
PrimaryVertical	Primary Vertical
None	None
AboveChart	Above Chart
Center	Center
InsideEnd	Inside End
InsideBase	Inside Base
OutsideEnd	OutSide End
PrimaryMajorHorizontal	Primary Major Horizontal
PrimaryMajorVertical	Primary Major Vertical
PrimaryMinorHorizontal	Primary Minor Horizontal
PrimaryMinorVertical	Primary Minor Vertical
Right	Right
Left	Left
Bottom	Bottom
Top	Top
SwitchRowColumn	Switch Row/Column
ChartTheme	Chart Theme
ChartType	Chart Type
Material	Material
Fabric	Fabric
Bootstrap	Bootstrap
HighContrastLight	HighContrastLight
MaterialDark	MaterialDark
FabricDark	FabricDark
HighContrast	HighContrast
BootstrapDark	BootstrapDark
Bootstrap4	Bootstrap4
VerticalAxisTitle	Vertical Axis Title
HorizontalAxisTitle	Horizontal Axis Title
EnterTitle	Enter Title
ProtectWorkbook	Protect Workbook
Password	Password (optional)
unProtectPassword	Password
EnterThePassword	Enter the password
ConfirmPassword	Confirm Password
EnterTheConfirmPassword	Re-enter your password
PasswordAlert	Confirmation password is not identical
UnProtectWorkbook	Unprotect Workbook
UnProtectPasswordAlert	The password you supplied is not correct.
InCorrectPassword	Unable to open the file or worksheet with the given password.
PasswordAlertMsg	Please enter the password
ConfirmPasswordAlertMsg	Please enter the confirm password
IsProtected	is protected

Loading translations

To load translation object in an application, use load function of the L10n class.

The following example demonstrates the Spreadsheet in French culture. In the below sample we have translated the ribbon tab names and Home tab content (clipboard, cell style).

index.ts
index.html
import { Spreadsheet, SheetModel } from '@syncfusion/ej2-spreadsheet';
import { defaultData } from './datasource.ts';
import { L10n, enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

L10n.load({
    'fr-CH': {
        'spreadsheet': {
            'File': 'Fichier',
            'Home': 'Accueil',
            'Insert': 'Insérer',
            'Formulas': 'Formules',
            'Data': 'Les données',
            'View': 'Vue',
            'Cut': 'Coupe',
            'Copy': 'Copie',
            'Paste': 'Pâte',
            'PasteSpecial': 'Pâte spéciale',
            'All': 'Tous les',
            'Values': 'Valeurs',
            'Formats': 'Les formats',
            'Font': 'fonte',
            'FontSize': 'Taille de police',
            'Bold': 'Audacieux',
            'Italic': 'Italique',
            'Underline': 'Souligner',
            'Strikethrough': 'Barré',
            'TextColor': 'Couleur du texte',
            'FillColor': 'La couleur de remplissage',
            'HorizontalAlignment': 'Alignement horizontal',
            'AlignLeft': 'Alignez à gauche',
            'AlignCenter': 'centre',
            'AlignRight': 'Aligner à droite',
            'VerticalAlignment': 'Alignement vertical',
            'AlignTop': 'Aligner en haut',
            'AlignMiddle': 'Aligner le milieu',
            'AlignBottom': 'Aligner le bas',
            'InsertFunction': 'Insérer une fonction',
            'Delete': 'Effacer',
            'Rename': 'Rebaptiser',
            'Hide': 'Cacher',
            'Unhide': 'Démasquer',
            'NumberFormat': 'Nombre Format',
        }
    }
});

let columns: ColumnModel[] = [{ width: 100 }, { width: 130 },{ width: 96},
    { width: 130 }, { width: 130 },{ width: 96},
    { width: 100 }, { width: 100 },{ width: 110}, { width: 100 }, { width: 130 },{ width: 150}]

let spreadsheet: Spreadsheet = new Spreadsheet({
        // Specifies the locale
        locale: 'fr-CH',
        sheets: [{ ranges: [{ dataSource: defaultData }], columns: columns
    }],
});

spreadsheet.appendTo('#spreadsheet');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>EJ2 SpreadSheet</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Typescript UI Controls" />
        <meta name="author" content="Syncfusion" />
        <link rel="shortcut icon" href="resources/favicon.ico" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
        <script src="system.config.js"></script>

<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       <!--Element which is going to render-->
       <div id='loader'>Loading....</div>
       <div id='container'>
       <div id="spreadsheet"></div>
       </div>
</body>

</html>

Internationalization

The Internationalization library is used to globalize number, date, and time values in the spreadsheet component.

The following example demonstrates the Spreadsheet in French [fr-CH] culture. In the below sample we have globalized the Date(Date column), Time(Time column), and Currency(Amount column) formats.

index.ts
index.html
import { Spreadsheet, SheetModel } from '@syncfusion/ej2-spreadsheet';
import { defaultData } from './datasource.ts';
import { L10n, enableRipple } from '@syncfusion/ej2-base';
import { loadCldr, L10n, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import * as currencies from './currencies.json';
import * as cagregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
import * as timeZoneNames from './timeZoneNames.json';
import * as numberingSystems from './numberingSystems.json';

enableRipple(true);

loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystems);

setCulture('fr-CH');
setCurrencyCode('EUR');

L10n.load({
    'fr-CH': {
        'spreadsheet': {
            'File': 'Fichier',
            'Home': 'Accueil',
            'Insert': 'Insérer',
            'Formulas': 'Formules',
            'Data': 'Les données',
            'View': 'Vue',
            'Cut': 'Coupe',
            'Copy': 'Copie',
            'Paste': 'Pâte',
            'PasteSpecial': 'Pâte spéciale',
            'All': 'Tous les',
            'Values': 'Valeurs',
            'Formats': 'Les formats',
            'Font': 'fonte',
            'FontSize': 'Taille de police',
            'Bold': 'Audacieux',
            'Italic': 'Italique',
            'Underline': 'Souligner',
            'Strikethrough': 'Barré',
            'TextColor': 'Couleur du texte',
            'FillColor': 'La couleur de remplissage',
            'HorizontalAlignment': 'Alignement horizontal',
            'AlignLeft': 'Alignez à gauche',
            'AlignCenter': 'centre',
            'AlignRight': 'Aligner à droite',
            'VerticalAlignment': 'Alignement vertical',
            'AlignTop': 'Aligner en haut',
            'AlignMiddle': 'Aligner le milieu',
            'AlignBottom': 'Aligner le bas',
            'InsertFunction': 'Insérer une fonction',
            'Delete': 'Effacer',
            'Rename': 'Rebaptiser',
            'Hide': 'Cacher',
            'Unhide': 'Démasquer',
            'NumberFormat': 'Nombre Format',
        }
    }
});

let columns: ColumnModel[] = [{ width: 100 }, { width: 130 },{ width: 96},
    { width: 130 }, { width: 130 },{ width: 96},
    { width: 100 }, { width: 100 },{ width: 110}, { width: 100 }, { width: 130 },{ width: 150}]

let spreadsheet: Spreadsheet = new Spreadsheet({
        // Specifies the locale
        locale: 'fr-CH',
        sheets: [{ ranges: [{ dataSource: defaultData }], columns: columns
    }],
    created: (): void => {
            //Applies cell and number formatting to specified range of the active sheet
            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
            spreadsheet.numberFormat('$#,##0.00', 'F2:F11');
    }
});

spreadsheet.appendTo('#spreadsheet');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
   <!--Element which is going to render-->
   <div id='loader'>Loading....</div>
   <div id='container'>
   <div id="spreadsheet"></div>
   </div>
</body>
</html>

Right to left (RTL)

RTL provides an option to switch the text direction and layout of the Spreadsheet component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Spreadsheet, set the enableRtl to true.

index.ts
index.html
import { Spreadsheet, SheetModel } from '@syncfusion/ej2-spreadsheet';
import { defaultData } from './datasource.ts';
import { L10n, enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

L10n.load({
    'ar-AE': {
        'spreadsheet': {
            "File": "ملف",
            "Home": "هم",
            "Insert": "إدراج",
            "Formulas": "الصيغ",
            "View": "معاينة",
            "Data": "البيانات",
            "Cut": "قطع",
            "Copy": "نسخ",
            "Paste": "معجون",
            "PasteSpecial": "لصق خاص",
            "All": "جميع",
            "Values": "القيم",
            "Formats": "شكل",
            "Font": "الخط",
            "FontSize": "حجم الخط",
            "Bold": "جريء",
            "Italic": "مائل",
            "Underline": "أكد",
            "Strikethrough": "يتوسطه",
            "TextColor": "لون الخط",
            "FillColor": "لون التعبئة",
            "HorizontalAlignment": "المحاذاة الأفقية",
            "AlignLeft": "محاذاة إلى اليسار",
            "AlignCenter": "مركز",
            "AlignRight": "محاذاة إلى اليمين",
            "VerticalAlignment": "محاذاة عمودية",
            "AlignTop": "محاذاة أعلى",
            "AlignMiddle": "محاذاة الأوسط",
            "AlignBottom": "أسفل محاذاة",
            "InsertFunction": "إدراج وظيفة",
            "Delete": "حذف",
            "Rename": "إعادة تسمية",
            "Hide": "إخفاء",
            "Unhide": "ظهار"
        }
    }
});

let columns: ColumnModel[] = [{ width: 100 }, { width: 130 },{ width: 96},
    { width: 130 }, { width: 130 },{ width: 96},
    { width: 100 }, { width: 100 },{ width: 110}, { width: 100 }, { width: 130 },{ width: 150}]

let spreadsheet: Spreadsheet = new Spreadsheet({
        locale: 'ar-AE',
        enableRtl: true,
        sheets: [{ ranges: [{ dataSource: defaultData }], columns: columns
    }]
});
spreadsheet.appendTo('#spreadsheet');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>EJ2 SpreadSheet</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Typescript UI Controls" />
        <meta name="author" content="Syncfusion" />
        <link rel="shortcut icon" href="resources/favicon.ico" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
        <script src="system.config.js"></script>

<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
       <!--Element which is going to render-->
       <div id='loader'>Loading....</div>
       <div id='container'>
       <div id="spreadsheet"></div>
       </div>
</body>

</html>

Global local in EJ2 TypeScript Spreadsheet control

Localization

Loading translations

Internationalization

Right to left (RTL)

See Also