From 7cfe161a28212de33c60c959e9e0555eb4f3bf1d Mon Sep 17 00:00:00 2001
From: Samuel Arbibe <samuel.arbibe@gmail.com>
Date: Fri, 8 Dec 2023 23:33:38 +0200
Subject: [PATCH] Add columnResizeDirection to support RTL column resizing

---
 docs/api/features/column-sizing.md               |  8 ++++++++
 packages/table-core/src/features/ColumnSizing.ts | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/docs/api/features/column-sizing.md b/docs/api/features/column-sizing.md
index f1042a69f2..74585d81d1 100644
--- a/docs/api/features/column-sizing.md
+++ b/docs/api/features/column-sizing.md
@@ -152,6 +152,14 @@ columnResizeMode?: 'onChange' | 'onEnd'
 
 Determines when the columnSizing state is updated. `onChange` updates the state when the user is dragging the resize handle. `onEnd` updates the state when the user releases the resize handle.
 
+### `columnResizeDirection`
+
+```tsx
+columnResizeDirection?: 'ltr' | 'rtl'
+```
+
+Enables or disables right-to-left support for resizing the column. defaults to 'ltr'.
+
 ### `onColumnSizingChange`
 
 ```tsx
diff --git a/packages/table-core/src/features/ColumnSizing.ts b/packages/table-core/src/features/ColumnSizing.ts
index 2ddc80516a..452cf8dc1f 100644
--- a/packages/table-core/src/features/ColumnSizing.ts
+++ b/packages/table-core/src/features/ColumnSizing.ts
@@ -23,6 +23,8 @@ export interface ColumnSizingInfoState {
 
 export type ColumnResizeMode = 'onChange' | 'onEnd'
 
+export type ColumnResizeDirection = 'ltr' | 'rtl'
+
 export interface ColumnSizingOptions {
   /**
    * Determines when the columnSizing state is updated. `onChange` updates the state when the user is dragging the resize handle. `onEnd` updates the state when the user releases the resize handle.
@@ -36,6 +38,12 @@ export interface ColumnSizingOptions {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
    */
   enableColumnResizing?: boolean
+  /**
+   * Enables or disables right-to-left support for resizing the column. defaults to 'ltr'.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#rtl)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+   */
+  columnResizeDirection?: ColumnResizeDirection
   /**
    * If provided, this function will be called with an `updaterFn` when `state.columnSizing` changes. This overrides the default internal state management, so you will also need to supply `state.columnSizing` from your own managed state.
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#oncolumnsizingchange)
@@ -52,7 +60,7 @@ export interface ColumnSizingOptions {
 
 export type ColumnSizingDefaultOptions = Pick<
   ColumnSizingOptions,
-  'columnResizeMode' | 'onColumnSizingChange' | 'onColumnSizingInfoChange'
+  'columnResizeMode' | 'onColumnSizingChange' | 'onColumnSizingInfoChange' | 'columnResizeDirection'
 >
 
 export interface ColumnSizingInstance {
@@ -225,6 +233,7 @@ export const ColumnSizing: TableFeature = {
   ): ColumnSizingDefaultOptions => {
     return {
       columnResizeMode: 'onEnd',
+      columnResizeDirection: 'ltr',
       onColumnSizingChange: makeStateUpdater('columnSizing', table),
       onColumnSizingInfoChange: makeStateUpdater('columnSizingInfo', table),
     }
@@ -346,7 +355,8 @@ export const ColumnSizing: TableFeature = {
           }
 
           table.setColumnSizingInfo(old => {
-            const deltaOffset = clientXPos - (old?.startOffset ?? 0)
+            const deltaDirection = table.options.columnResizeDirection === 'rtl' ? -1 : 1
+            const deltaOffset = (clientXPos - (old?.startOffset ?? 0)) * deltaDirection
             const deltaPercentage = Math.max(
               deltaOffset / (old?.startSize ?? 0),
               -0.999999