chore(table): update tabulator to 6

Author: civing

package-lock.json

@@ -50,7 +50,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "@types/tabulator-tables": "^4.9.4",
+    "@types/tabulator-tables": "^6.2.4",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.13",
@@ -89,7 +89,7 @@
     "shelljs": "0.10.0",
     "shx": "^0.4.0",
     "style-to-object": "^1.0.9",
-    "tabulator-tables": "^4.9.3",
+    "tabulator-tables": "^6.3.1",
     "typescript": "^4.9.5",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"

package.json

@@ -1,5 +1,12 @@
 import { Column, ColumnSorter, ColumnAggregatorFunction } from './table.types';
-import Tabulator from 'tabulator-tables';
+import {
+    CellComponent,
+    ColumnCalc,
+    ColumnComponent,
+    ColumnDefinition,
+    Formatter,
+    SorterFromTable,
+} from 'tabulator-tables';
 import { escape } from 'html-escaper';
 import { ElementPool } from './element-pool';
 import { pickBy, negate } from 'lodash-es';
@@ -15,8 +22,8 @@ export class ColumnDefinitionFactory {
      * @param column - config describing the column
      * @returns Tabulator column
      */
-    public create(column: Column<object>): Tabulator.ColumnDefinition {
-        const definition: Tabulator.ColumnDefinition = {
+    public create(column: Column<object>): ColumnDefinition {
+        const definition: ColumnDefinition = {
             title: column.title,
             field: column.field,
             hozAlign: column.horizontalAlign,
@@ -82,10 +89,7 @@ export const formatHeader = (column: Column) => (): string | HTMLElement => {
  * @param pool - pool to get custom components from
  * @returns Tabulator formatter
  */
-export function createFormatter(
-    column: Column,
-    pool: ElementPool
-): Tabulator.Formatter {
+export function createFormatter(column: Column, pool: ElementPool): Formatter {
     if (!column.component?.name) {
         return formatCell;
     }
@@ -100,7 +104,7 @@ export function createFormatter(
         return formatCell;
     }
 
-    return (cell: Tabulator.CellComponent) => {
+    return (cell: CellComponent) => {
         const value = formatCell(cell, column);
 
         return createCustomComponent(cell, column, value, pool);
@@ -126,10 +130,7 @@ function columnElementExists(column: Column<any>) {
  * @param column - configuration for the current column
  * @returns the formatted value
  */
-export function formatCell(
-    cell: Tabulator.CellComponent,
-    column: Column
-): string {
+export function formatCell(cell: CellComponent, column: Column): string {
     const data = cell.getData();
     let value = cell.getValue();
 
@@ -154,7 +155,7 @@ export function formatCell(
  * @returns custom component that renders a value in the table
  */
 export function createCustomComponent(
-    cell: Tabulator.CellComponent,
+    cell: CellComponent,
     column: Column,
     value: string,
     pool: ElementPool
@@ -233,10 +234,7 @@ function getEventName(eventListener: string): string {
     return eventListener.charAt(2).toLowerCase() + eventListener.slice(3);
 }
 
-function createResizeObserver(
-    element: HTMLElement,
-    column: Tabulator.ColumnComponent
-) {
+function createResizeObserver(element: HTMLElement, column: ColumnComponent) {
     if (!('ResizeObserver' in window)) {
         return;
     }
@@ -263,12 +261,6 @@ function createResizeObserver(
     }, RESIZE_TIMEOUT);
 }
 
-// Tabulator seems to also have this `field` property, that does not appear on
-// the interface for some reason
-interface TabulatorSorter extends Tabulator.Sorter {
-    field: string;
-}
-
 /**
  * Create a column sorter from a tabulator sorter
  *
@@ -277,7 +269,7 @@ interface TabulatorSorter extends Tabulator.Sorter {
  */
 export const createColumnSorter =
     (columns: Column[]) =>
-    (sorter: TabulatorSorter): ColumnSorter => {
+    (sorter: SorterFromTable): ColumnSorter => {
         const column = columns.find((col) => col.field === sorter.field);
         const direction = sorter.dir.toUpperCase() as 'ASC' | 'DESC';
 
@@ -291,7 +283,7 @@ export const createColumnSorter =
  *
  * @param column
  */
-export function getColumnAggregator(column: Column): Tabulator.ColumnCalc {
+export function getColumnAggregator(column: Column): ColumnCalc {
     const aggregator = column.aggregator;
     if (isAggregatorFunction(aggregator)) {
         return (values: any[], data: object[]) => {

src/components/table/columns.ts

@@ -13,7 +13,7 @@ $checkbox-distance-to-left-edge: 0.5rem;
     position: absolute;
     z-index: $table--limel-table--row-selector;
     left: $checkbox-distance-to-left-edge;
-    top: functions.pxToRem(6);
+    top: functions.pxToRem(4);
 }
 
 .limel-table--row-selector {

src/components/table/partial-styles/_row-selection.scss

@@ -16,7 +16,7 @@
         flex-shrink: 0;
     }
 
-    .tabulator-tableHolder {
+    .tabulator-tableholder {
         isolation: isolate;
         flex-grow: 1;
         $unset-tabulators-calculated-and-hardcoded-height: unset !important; // tabulator calculates (not so precisely) height of the scrollable area of the table and adds it inline.

src/components/table/partial-styles/_table-main-layout.scss

@@ -1,33 +1,29 @@
 @use '../../../style/functions';
 
-.tabulator-col-sorter {
-    transition: opacity 0.2s ease;
-    right: 0 !important;
-    position: relative !important;
-    justify-content: center;
-    cursor: pointer;
-
-    [aria-sort='none'] & {
-        opacity: 0;
-    }
-
-    [aria-sort='desc'] &,
-    [aria-sort='asc'] & {
-        opacity: 1;
-
-        &:before {
-            position: absolute;
-            content: '';
-            width: 0.125rem;
-            height: 0.4rem;
-            background-color: var(--table-arrow-color--active);
+.tabulator {
+    .tabulator-header .tabulator-col .tabulator-col-content {
+        .tabulator-col-sorter {
+            position: relative;
+            cursor: pointer;
+            transition: opacity 0.2s ease;
+            right: 0;
         }
     }
 }
 
 .tabulator-sortable {
+    &[aria-sort='none'] {
+        .tabulator-col-sorter {
+            opacity: 0;
+        }
+    }
+
     &[aria-sort='desc'],
     &[aria-sort='asc'] {
+        .tabulator-col-sorter {
+            opacity: 1;
+        }
+
         &:hover {
             .tabulator-col-sorter {
                 opacity: 1;
@@ -51,6 +47,8 @@
 }
 
 .tabulator-arrow {
+    rotate: 180deg; // changes the direction of the arrow, according to our sorting direction convention
+
     transition: border 0.2s ease;
     border-left: 0.25rem solid transparent !important;
     border-right: 0.25rem solid transparent !important;
@@ -77,7 +75,7 @@
         .tabulator-col.tabulator-sortable[aria-sort='desc']
         & {
         height: 0;
-        transform: translate3d(0, -0.2rem, 0) rotate(180deg);
+        transform: translate3d(0, -0.2rem, 0);
         border-top-width: 0.25rem;
         border-bottom-width: 0;
         border-top-color: var(--table-arrow-color--active);
@@ -88,7 +86,7 @@
         .tabulator-col.tabulator-sortable[aria-sort='asc']
         & {
         height: 0;
-        transform: translate3d(0, 0.2rem, 0) rotate(180deg);
+        transform: translate3d(0, 0.2rem, 0);
         border-top-width: 0;
         border-bottom-width: 0.25rem;
         border-bottom-color: var(--table-arrow-color--active);

src/components/table/partial-styles/tabulator-arrow.scss

@@ -146,7 +146,7 @@
             order: 2;
         }
 
-        .tabulator-tableHolder {
+        .tabulator-tableholder {
             order: 3;
         }
 
@@ -162,15 +162,15 @@
     }
 
     &:has(.tabulator-calcs-holder) {
-        .tabulator-tableHolder {
+        .tabulator-tableholder {
             // makes sure aggregations row doesn't cover the last table row,
             // and the horizontal scroll bar which is shown on windows
             margin-bottom: $height-of-aggregations-row;
         }
     }
 
     .select-all {
-        top: functions.pxToRem(42);
+        top: functions.pxToRem(51);
     }
 
     #tabulator-container {

src/components/table/partial-styles/tabulator-custom-styles.scss

@@ -1,3 +1,4 @@
+import { CellComponent, RowComponent, Tabulator } from 'tabulator-tables';
 import { ElementPool } from './element-pool';
 import { TableSelection } from './table-selection';
 
@@ -41,7 +42,7 @@ describe('table selection', () => {
         ...rowData: any[]
     ) => Map<any, { checked: boolean }> = (...rowData: any[]) => {
         const rowCheckboxMap = new Map<any, { checked: boolean }>();
-        const makeCell: (row: any, data: any) => Tabulator.CellComponent = (
+        const makeCell: (row: any, data: any) => CellComponent = (
             row: any,
             data: any
         ) => {
@@ -57,11 +58,11 @@ describe('table selection', () => {
             return cell as any;
         };
 
-        const makeRow: (
-            data: any,
-            position: number
-        ) => Tabulator.RowComponent = (data, position) => {
-            const row: Partial<Tabulator.RowComponent> = {
+        const makeRow: (data: any, position: number) => RowComponent = (
+            data,
+            position
+        ) => {
+            const row: Partial<RowComponent> = {
                 getData: () => data,
                 getPosition: () => position,
             };