Add rtl direction

assets/index.less

@@ -25,6 +25,9 @@
   box-sizing: border-box;
   position: relative;
 
+  &-rtl {
+    direction: rtl;
+  }
   // ================= Global =================
   table {
     border-spacing: 0px;
@@ -45,6 +48,10 @@
     box-sizing: border-box;
     white-space: normal;
     word-break: break-word;
+    .@{tablePrefixCls}-rtl& {
+      border-left: @border;
+      border-right: 0;
+    }
   }
 
   // ================== Cell ==================
@@ -58,6 +65,22 @@
       border-right-color: transparent;
     }
 
+    .@{tablePrefixCls}-rtl & {
+      &-fix-right:last-child {
+        border-right-color: @border-color;
+      }
+      &-fix-left:last-child {
+        border-left-color: transparent;
+      }
+    }
+
+    &-fix-left-first {
+      .@{tablePrefixCls}-rtl & {
+        box-shadow: 1px 0 0 @border-color;
+      }
+    }
+
+    &-fix-left-first::after,
     &-fix-left-last::after {
       pointer-events: none;
       content: '';
@@ -70,9 +93,14 @@
       transform: translateX(100%);
     }
 
-    &-fix-right-first {
+    &-fix-right-first,
+    &-fix-right-last {
       box-shadow: -1px 0 0 @border-color;
 
+      .@{tablePrefixCls}-rtl & {
+        box-shadow: none;
+      }
+
       &::after {
         pointer-events: none;
         content: '';
@@ -92,8 +120,9 @@
       text-overflow: ellipsis;
 
       // Fixed first or last should special process
+      &.@{tablePrefixCls}-cell-fix-left-first,
       &.@{tablePrefixCls}-cell-fix-left-last,
-      &.@{tablePrefixCls}-cell-fix-right-first {
+      &.@{tablePrefixCls}-cell-fix-right-first &.@{tablePrefixCls}-cell-fix-right-last {
         overflow: visible;
 
         .@{tablePrefixCls}-cell-content {
@@ -106,13 +135,15 @@
   }
 
   &-ping-left {
+    .@{tablePrefixCls}-cell-fix-left-first::after,
     .@{tablePrefixCls}-cell-fix-left-last::after {
       box-shadow: inset 10px 0 8px -8px green;
     }
   }
 
   &-ping-right {
-    .@{tablePrefixCls}-cell-fix-right-first::after {
+    .@{tablePrefixCls}-cell-fix-right-first::after,
+    .@{tablePrefixCls}-cell-fix-right-last::after {
       box-shadow: inset -10px 0 8px -8px green;
     }
   }
@@ -142,6 +173,11 @@
       left: -1px;
       width: 1px;
       background: @table-head-background-color;
+
+      .@{tablePrefixCls}-rtl& {
+        right: -1px;
+        left: auto;
+      }
     }
   }
 

examples/fixedColumnsAndHeaderRtl.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import Table from '../src';
+import '../assets/index.less';
+import { ColumnsType } from '../src/interface';
+import { useCheckbox } from './utils/useInput';
+
+interface RecordType {
+  a: string;
+  b?: string;
+  c: string;
+  d: number;
+  key: string;
+}
+
+const originData: RecordType[] = [
+  { a: 'aaa', b: 'bbb', c: '内容内容内容内容内容', d: 3, key: '1' },
+  { a: 'aaa', b: 'bbb', c: '内容内容内容内容内容', d: 3, key: '2' },
+  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '3' },
+  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '4' },
+  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '5' },
+  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '6' },
+  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '7' },
+  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '8' },
+  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '9' },
+];
+
+const longTextData: RecordType[] = [...originData];
+longTextData[0] = {
+  ...longTextData[0],
+  a: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+};
+
+const useColumn = (
+  fixLeft: boolean,
+  fixTitle: boolean,
+  fixRight: boolean,
+  ellipsis: boolean,
+  percentage: boolean,
+) => {
+  const columns: ColumnsType<RecordType> = React.useMemo(
+    () => [
+      {
+        title: 'title1',
+        dataIndex: 'a',
+        key: 'a',
+        width: percentage ? '10%' : 80,
+        fixed: fixLeft ? 'left' : null,
+        ellipsis,
+      },
+      { title: 'title2', dataIndex: 'b', key: 'b', width: 80, fixed: fixLeft ? 'left' : null },
+      {
+        title: 'title3',
+        fixed: fixLeft && fixTitle ? 'left' : null,
+        children: [
+          { title: 'title4', dataIndex: 'c', key: 'd', width: 100 },
+          { title: 'title5', dataIndex: 'c', key: 'e', width: 100 },
+        ],
+      },
+      { title: 'title6', dataIndex: 'c', key: 'f' },
+      { title: 'title7', dataIndex: 'c', key: 'g' },
+      { title: 'title8', dataIndex: 'c', key: 'h' },
+      { title: 'title9', dataIndex: 'b', key: 'i' },
+      { title: 'title10', dataIndex: 'b', key: 'j' },
+      { title: 'title11', dataIndex: 'b', key: 'k', width: 100, fixed: fixRight ? 'right' : null },
+      { title: 'title12', dataIndex: 'b', key: 'l', width: 80, fixed: fixRight ? 'right' : null },
+    ],
+    [fixLeft, fixTitle, fixRight, ellipsis, percentage],
+  );
+
+  return columns;
+};
+
+const Demo = () => {
+  const [autoWidth, autoWidthProps] = useCheckbox(false);
+  const [isRtl, isRtlProps] = useCheckbox(true);
+  const [longText, longTextProps] = useCheckbox(false);
+  const [fixHeader, fixHeaderProps] = useCheckbox(true);
+  const [fixLeft, fixLeftProps] = useCheckbox(true);
+  const [fixRight, fixRightProps] = useCheckbox(true);
+  const [fixTitle3, fixTitle3Props] = useCheckbox(false);
+  const [ellipsis, ellipsisProps] = useCheckbox(false);
+  const [percentage, percentageProps] = useCheckbox(false);
+  const [empty, emptyProps] = useCheckbox(false);
+  const columns = useColumn(fixLeft, fixTitle3, fixRight, ellipsis, percentage);
+
+  let mergedData: RecordType[];
+  if (empty) {
+    mergedData = null;
+  } else if (longText) {
+    mergedData = longTextData;
+  } else {
+    mergedData = originData;
+  }
+
+  return (
+    <React.StrictMode>
+      <div>
+        <h2>Fixed columns and header in RTL direction</h2>
+
+        <label>
+          <input {...isRtlProps} />
+          IsRtl
+        </label>
+        <label>
+          <input {...autoWidthProps} />
+          Auto Width
+        </label>
+        <label>
+          <input {...longTextProps} />
+          Long Text
+        </label>
+        <label>
+          <input {...fixHeaderProps} />
+          Fix Header
+        </label>
+        <label>
+          <input {...fixLeftProps} />
+          Fix Left
+        </label>
+        <label>
+          <input {...fixTitle3Props} />
+          Fix title3
+        </label>
+        <label>
+          <input {...fixRightProps} />
+          Fix Right
+        </label>
+        <label>
+          <input {...ellipsisProps} />
+          Ellipsis First Column
+        </label>
+        <label>
+          <input {...percentageProps} />
+          Percentage Width
+        </label>
+        <label>
+          <input {...emptyProps} />
+          Empty
+        </label>
+
+        <Table<RecordType>
+          columns={columns}
+          scroll={{ x: 1650, y: fixHeader ? 300 : null }}
+          data={mergedData}
+          style={{ width: autoWidth ? null : 800 }}
+          direction={isRtl ? 'rtl' : 'ltr'}
+        />
+      </div>
+    </React.StrictMode>
+  );
+};
+
+export default Demo;

src/Body/BodyRow.tsx

@@ -49,7 +49,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
     cellComponent,
     childrenColumnName,
   } = props;
-  const { prefixCls } = React.useContext(TableContext);
+  const { prefixCls, direction } = React.useContext(TableContext);
   const {
     fixHeader,
     fixColumn,
@@ -77,7 +77,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
 
   // Move to Body to enhance performance
   const fixedInfoList = flattenColumns.map((column, colIndex) =>
-    getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets),
+    getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction),
   );
 
   const rowSupportExpand = expandableType === 'row' && (!rowExpandable || rowExpandable(record));

src/Cell/index.tsx

@@ -44,8 +44,10 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   // Fixed
   fixLeft?: number | false;
   fixRight?: number | false;
+  firstFixLeft?: boolean;
   lastFixLeft?: boolean;
   firstFixRight?: boolean;
+  lastFixRight?: boolean;
 
   // Additional
   /** @private Used for `expandable` with nest tree */
@@ -67,8 +69,10 @@ function Cell<RecordType extends DefaultRecordType>(
     rowSpan,
     fixLeft,
     fixRight,
+    firstFixLeft,
     lastFixLeft,
     firstFixRight,
+    lastFixRight,
     appendNode,
     additionalProps = {},
     ellipsis,
@@ -134,6 +138,7 @@ function Cell<RecordType extends DefaultRecordType>(
   }
   if (isFixRight) {
     fixedStyle.position = 'sticky';
+
     fixedStyle.right = fixRight as number;
   }
 
@@ -163,9 +168,11 @@ function Cell<RecordType extends DefaultRecordType>(
       className,
       {
         [`${cellPrefixCls}-fix-left`]: isFixLeft,
+        [`${cellPrefixCls}-fix-left-first`]: firstFixLeft,
         [`${cellPrefixCls}-fix-left-last`]: lastFixLeft,
         [`${cellPrefixCls}-fix-right`]: isFixRight,
         [`${cellPrefixCls}-fix-right-first`]: firstFixRight,
+        [`${cellPrefixCls}-fix-right-last`]: lastFixRight,
         [`${cellPrefixCls}-ellipsis`]: ellipsis,
         [`${cellPrefixCls}-with-append`]: appendNode,
       },

src/Header/FixedHeader.tsx

@@ -7,6 +7,7 @@ import TableContext from '../context/TableContext';
 export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
   colWidths: number[];
   columCount: number;
+  direction: 'ltr' | 'rtl';
 }
 
 function FixedHeader<RecordType>({
@@ -15,6 +16,7 @@ function FixedHeader<RecordType>({
   colWidths,
   columCount,
   stickyOffsets,
+  direction,
   ...props
 }: FixedHeaderProps<RecordType>) {
   const { prefixCls, scrollbarSize } = React.useContext(TableContext);
@@ -40,11 +42,11 @@ function FixedHeader<RecordType>({
 
   // Calculate the sticky offsets
   const headerStickyOffsets = React.useMemo(() => {
-    const { right } = stickyOffsets;
-
+    const { right, left } = stickyOffsets;
     return {
       ...stickyOffsets,
-      right: [...right.map(width => width + scrollbarSize), 0],
+      left: direction === 'rtl' ? [...left.map(width => width + scrollbarSize), 0] : left,
+      right: direction === 'rtl' ? right : [...right.map(width => width + scrollbarSize), 0],
     };
   }, [scrollbarSize, stickyOffsets]);
 

src/Header/HeaderRow.tsx

@@ -30,7 +30,7 @@ function HeaderRow<RecordType>({
   onHeaderRow,
   index,
 }: RowProps<RecordType>) {
-  const { prefixCls } = React.useContext(TableContext);
+  const { prefixCls, direction } = React.useContext(TableContext);
 
   let rowProps: React.HTMLAttributes<HTMLElement>;
   if (onHeaderRow) {
@@ -48,6 +48,7 @@ function HeaderRow<RecordType>({
           cell.colEnd,
           flattenColumns,
           stickyOffsets,
+          direction,
         );
 
         let additionalProps: React.HTMLAttributes<HTMLElement>;