Я пытался создать таблицу с помощью табулятора, и я столкнулся с проблемой, когда текст перекрывается со значком сортировщика, когда направление текста таблицы установлено на rtl, поскольку значок сортировщика остается в том же месте, что и обычно в (когда таблица ltr). Я приложил фрагмент кода, чтобы показать проблему. Изображение проблемы со зрением

Есть ли какой-то параметр, который я могу добавить в JavaScript или в CSS, который позволит значку сортировщика отображаться правильно, или стрелка сортировки просто несовместима с направлением таблицы / текста rtl.

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>
0
noambugot1 17 Сен 2021 в 17:44

2 ответа

Лучший ответ

Глядя на таблицу стилей табулятора, .tabulator-col-sorter использует абсолютное позиционирование.

Добавьте это в свою таблицу стилей:

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

Вам не нужно использовать правило !important, если ваши стили выполняются после таблица стилей табулятора.

Вот ваш фрагмент с добавленным выше CSS.

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>
1
Sam 17 Сен 2021 в 15:12

Вы можете сделать это, просто добавив немного css

.tabulator-arrow {
    position: fixed;
}
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-arrow {
    position: fixed;
}
<!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>
0
Marko Colia 17 Сен 2021 в 14:58