Tabulator表格设置rtl文本方向时表头排序图标与文字重叠问题

问题原因 #

Tabulator 4.x版本的默认样式未适配RTL（从右到左）文本方向的布局，排序箭头默认固定在表头右侧定位，才会和RTL模式下靠右显示的表头文字重叠，属于样式适配问题，排序功能本身完全兼容RTL场景，不需要修改JS配置，仅通过CSS覆盖原有样式即可修复。

修复方案 #

在页面的<style>标签中加入以下自定义样式即可：

/* 适配RTL模式下的排序图标位置 */
[dir="rtl"] .tabulator-col-sorter {
    /* 将排序图标从表头右侧移到左侧 */
    right: auto !important;
    left: 8px !important;
}

/* 调整表头内边距，避免文字和左侧图标粘连 */
[dir="rtl"] .tabulator-col-content {
    padding-left: 24px !important;
    padding-right: 8px !important;
}

以上样式只会对全局设置了dir="rtl"的页面生效，不会影响LTR（从左到右）模式的表格显示。

内容的提问来源于stack exchange，提问作者Noam I.