jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

feat: Add support for RTL (#64)

Browse Source
This commit is contained in:
Deepesh Garg 2019-04-26 13:10:10 +05:30 committed by GitHub
parent 67f9717827
commit e014960e97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/datatable.js
View File

@ -68,7 +68,7 @@ class DataTable {
prepareDom() { prepareDom() {
this.wrapper.innerHTML = ` this.wrapper.innerHTML = `
<div class="datatable"> <div class="datatable" dir="${this.options.direction}">
<div class="dt-header"></div> <div class="dt-header"></div>
<div class="dt-scrollable"></div> <div class="dt-scrollable"></div>
<div class="dt-footer"></div> <div class="dt-footer"></div>

3
src/defaults.js
View File

@ -62,5 +62,6 @@ export default {
checkedRowStatus: true, checkedRowStatus: true,
dynamicRowHeight: false, dynamicRowHeight: false,
pasteFromClipboard: false, pasteFromClipboard: false,
showTotalRow: false showTotalRow: false,
direction: 'ltr'
}; };

9
src/style.js
View File

@ -48,12 +48,15 @@ export default class Style {
this._settingHeaderPosition = true; this._settingHeaderPosition = true;
requestAnimationFrame(() => { requestAnimationFrame(() => {
const scrollLeft = e.target.scrollLeft; const { scrollLeft, scrollWidth, clientWidth } = e.target;
let left = this.options.direction === 'rtl' ? scrollWidth - clientWidth - scrollLeft : -scrollLeft;
$.style(this.header, { $.style(this.header, {
transform: `translateX(-${scrollLeft}px)` transform: `translateX(${left}px)`
}); });
$.style(this.footer, { $.style(this.footer, {
transform: `translateX(-${scrollLeft}px)` transform: `translateX(${left}px)`
}); });
this._settingHeaderPosition = false; this._settingHeaderPosition = false;
}); });