fix: fixed Table text-align bug in RTL mode #2172 (#2214)

Co-authored-by: shijia.me <[email protected]>

packages/semi-foundation/table/rtl.scss

@@ -5,6 +5,18 @@ $module: #{$prefix}-table;
         direction: rtl;
         text-align: right;
 
+        &-align-left {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-end;
+            }
+        }
+
+        &-align-right {
+            .#{$module}-operate-wrapper {
+                justify-content: flex-start;
+            }
+        }
+
         &-thead {
             & > .#{$module}-row {
                 & > .#{$module}-row-head {
@@ -98,12 +110,12 @@ $module: #{$prefix}-table;
             }
 
             &-sorter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_sorter-marginLeft;
             }
 
             &-filter {
-                margin-left: auto;
+                margin-left: 0;
                 margin-right: $spacing-table_column_filter-marginLeft;
             }
         }

packages/semi-ui/table/_story/RTL/ColumnAlignWithSorter.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Space } from '../../../index';
+import ColumnAlignWithSorter from '../v2/columnAlignWithSorter';
+import RTLWrapper from '../../../configProvider/_story/RTLDirection/RTLWrapper';
+
+function App() {
+    return (
+        <Space vertical align='start' style={{ width: 1200 }}>
+            <RTLWrapper defaultDirection='rtl'>
+                <ColumnAlignWithSorter />
+            </RTLWrapper>
+            <RTLWrapper defaultDirection='ltr'>
+                <ColumnAlignWithSorter />
+            </RTLWrapper>
+        </Space>
+    );
+}
+
+export default App;

packages/semi-ui/table/_story/RTL/index.jsx

@@ -1,4 +1,5 @@
 
 export { default as RTLAlignScrollBar } from './AlignScrollBar';
 export { default as ColumnAlign } from './ColumnAlign';
-export { default as Direction } from './Direction';
+export { default as Direction } from './Direction';
+export { default as ColumnAlignWithSorter } from './ColumnAlignWithSorter';

packages/semi-ui/table/_story/table.stories.jsx

@@ -72,7 +72,7 @@ export { default as VirtualizedDynamicData } from './VirtualizedDynamicData';
 export { default as MassiveColumns } from './MassiveColumns';
 export { default as ControlledPagination } from './ControlledPagination';
 export { default as FulldRenderDemo } from './FullRender';
-export { RTLAlignScrollBar, ColumnAlign, Direction  } from './RTL';
+export { RTLAlignScrollBar, ColumnAlign, Direction, ColumnAlignWithSorter  } from './RTL';
 export { default as JSXAsyncData } from './JSXAsyncData';
 export { default as ScrollBar } from './ScrollBar';
 export { default as TableSpan } from './TableSpan';

packages/semi-ui/table/_story/v2/columnAlignWithSorter.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+export default function App() {
+    const columns = [
+        {
+            title: '大小(align left)',
+            dataIndex: 'size',
+            align: 'left',
+            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
+        },
+        {
+            title: '所有者(align right)',
+            dataIndex: 'owner',
+            align: 'right',
+            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
+        },
+        {
+            title: '更新日期(align left)',
+            dataIndex: 'updateTime',
+            align: 'left',
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi D2C 设计稿',
+                    value: 'Semi D2C 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: '标题(align right)',
+            dataIndex: 'name',
+            align: 'right',
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi D2C 设计稿',
+                    value: 'Semi D2C 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+    ];
+    const data = [
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red',
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        },
+    ];
+
+    return <Table columns={columns} dataSource={data} pagination={false} />;
+}