Header Sort Icon overlapping with text when table’s text direction is set to rtl

I have been trying to create a table using tabulator, and I’ve run into a problem where the text overlaps with the sorter icon when the table’s text direction is set to rtl, as the sorter icon remains in the same location as it is usually in (when the table is ltr). I’ve attached a code snippet in order to show the problem. A picture of the visual problem

Is there some setting I can append in the JavaScript or in the CSS which will allow the sorter icon to display properly, or is the sorting arrow simply incompatible with the rtl table/text direction.

let data = [{
    שם: "חנה",
    מקצוע: "טבחית",
    גיל: 56
  },
  {
    שם: "אברהם",
    מקצוע: "מלצר",
    גיל: 24
  },
  {
    שם: "חיים",
    מקצוע: "טבח",
    גיל: 19
  },
  {
    שם: "מאיה",
    מקצוע: "טבחית",
    גיל: 24
  },
  {
    שם: "שרה",
    מקצוע: "מלצרית",
    גיל: 51
  },
  {
    שם: "אביגיל",
    מקצוע: "מארחת",
    גיל: 21
  },
  {
    שם: "נור",
    מקצוע: "מלצרית",
    גיל: 54
  },
  {
    שם: "יוסף",
    מקצוע: "מלצר",
    גיל: 36
  },
  {
    שם: "עומר",
    מקצוע: "מלצר",
    גיל: 37
  },
  {
    שם: "אריאל",
    מקצוע: "טבחית",
    גיל: 41
  },
  {
    שם: "מחמוד",
    מקצוע: "מארח",
    גיל: 24
  },
  {
    שם: "ג'מיל",
    מקצוע: "מארח",
    גיל: 45
  },
];
let table = new Tabulator("#myTable", {
  data: data,
  layout: "fitDataTable",
  columns: [{
      title: "שם",
      field: "שם"
    },
    {
      title: "מקצוע",
      field: "מקצוע"
    },
    {
      title: "גיל",
      field: "גיל"
    },
  ],
});
<!DOCTYPE html>
<html lang="he" dir="rtl">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
  <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet" />
</head>

<body>
  <vis id="myTable"> </vis>
</body>

</html>

Answer

Looking at the tabulator stylesheet, .tabulator-col-sorter uses absolute positioning.

Add this to your own stylesheet:

.tabulator-col-sorter {
    right: auto !important;
    left: 0;
}

You shouldn’t need to use the !important rule if your styles run after the tabulator stylesheet.

Here’s your snippet with the above CSS added.

let data = [{
    שם: "חנה",
    מקצוע: "טבחית",
    גיל: 56
  },
  {
    שם: "אברהם",
    מקצוע: "מלצר",
    גיל: 24
  },
  {
    שם: "חיים",
    מקצוע: "טבח",
    גיל: 19
  },
  {
    שם: "מאיה",
    מקצוע: "טבחית",
    גיל: 24
  },
  {
    שם: "שרה",
    מקצוע: "מלצרית",
    גיל: 51
  },
  {
    שם: "אביגיל",
    מקצוע: "מארחת",
    גיל: 21
  },
  {
    שם: "נור",
    מקצוע: "מלצרית",
    גיל: 54
  },
  {
    שם: "יוסף",
    מקצוע: "מלצר",
    גיל: 36
  },
  {
    שם: "עומר",
    מקצוע: "מלצר",
    גיל: 37
  },
  {
    שם: "אריאל",
    מקצוע: "טבחית",
    גיל: 41
  },
  {
    שם: "מחמוד",
    מקצוע: "מארח",
    גיל: 24
  },
  {
    שם: "ג'מיל",
    מקצוע: "מארח",
    גיל: 45
  },
];
let table = new Tabulator("#myTable", {
  data: data,
  layout: "fitDataTable",
  columns: [{
      title: "שם",
      field: "שם"
    },
    {
      title: "מקצוע",
      field: "מקצוע"
    },
    {
      title: "גיל",
      field: "גיל"
    },
  ],
});
.tabulator-col-sorter {
  right: auto !important;
  left: 0;
}
<!DOCTYPE html>
<html lang="he" dir="rtl">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
  <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet" />
</head>

<body>
  <vis id="myTable"> </vis>
</body>

</html>