fix: fix bug close #1042

ksc-fe · Oct 10, 2024 · 0a889ef · 0a889ef
1 parent 705df9d
commit 0a889ef
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/components/table/column.vdt b/components/table/column.vdt
@@ -1,4 +1,5 @@
 import {getClassAndStyleForFixed} from './useFixedColumns';
+import {getStyleForLastColumn} from './useColumns';
 import {Dropdown, DropdownMenu, DropdownItem} from '../dropdown';
 import {Button} from '../button';
 import {Icon} from '../icon';
@@ -11,7 +12,7 @@ import {linkEvent} from 'intact';
 import {context as TableContext} from './useColumns';
 import {context as ResizableContext} from './useResizable';
 import {context as FixedColumnsContext} from './useFixedColumns';
-import {stopPropagation} from '../utils';
+import {stopPropagation, addStyle} from '../utils';
 import {Input} from '../input';
 import {_$} from '../../i18n';
 import {ignoreSortable} from './useSortable';
@@ -25,7 +26,7 @@ const {
 const { k } = this.config;
 
 <TableContext.Consumer>
-    {checkType => {
+    {({checkType, lastCellKey, lastCellStyle}) => {
         return <GroupContext.Consumer>
             {({group: currentGroup, onChange}) => {
                 return <SortableContext.Consumer>
@@ -46,7 +47,7 @@ const { k } = this.config;
 
                                         let checked;
                                         return <th className={classNameObj}
-                                            style={style}
+                                            style={key === lastCellKey ? addStyle(style, lastCellStyle) : style}
                                             title={isStringOrNumber(title) ? title : null}
                                             ev-click={sortable ? linkEvent(key, onChangeSort) : null}
                                             colspan={cols}

diff --git a/components/table/styles.ts b/components/table/styles.ts
@@ -77,6 +77,8 @@ setDefault(() => {
     makeGroupMenuStyles?.clearCache();
 });
 
+export {table};
+
 export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${table.fontSize};

diff --git a/components/table/table.vdt b/components/table/table.vdt
@@ -29,6 +29,7 @@ const {
 } = this.get();
 const animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
+const {lastCellKey, lastCellStyle} = this.columns.getStyleForLastColumn();
 const {scrollPosition, hasFixed, getHasFixedLeft, offsetMap} = this.fixedColumns;
 const {scrollRef} = this.scroll;
 const {stickHeader, excludeStickHeader, elementRef, headRef} = this.stickyHeader;
@@ -71,7 +72,7 @@ const hasFixedLeft = getHasFixedLeft();
 const {getAllCheckedStatus, toggleCheckedAll, getAllStatus, onChangeChecked} = this.checked;
 const allCheckedStatus = getAllCheckedStatus(); 
 const thead = hideHeader ? null : (
-    <TableContext.Provider value={checkType}>
+    <TableContext.Provider value={{checkType, lastCellKey, lastCellStyle}}>
         <GroupContext.Provider value={{group, onChange: this.onChangeGroup}}>
             <SortableContext.Provider value={{sort, onChange: this.sortable.onChange}}>
                 <ResizableContext.Provider value={{resizable, onStart}}>

diff --git a/components/table/useColumns.ts b/components/table/useColumns.ts
@@ -4,6 +4,7 @@ import {TableColumn, TableColumnProps} from './column';
 import {useState} from '../../hooks/useState';
 import type {Table, TableProps} from './table';
 import {createContext} from '../context';
+import {table as theme} from './styles';
 
 export const context = createContext<TableProps['checkType']>();
 
@@ -118,5 +119,27 @@ export function useColumns() {
         }
     }
 
-    return {getColumns, getCols, getData} 
+
+    function getStyleForLastColumn() {
+        if (instance.get('type') !== 'grid' || !columns.length || !cols.length) {
+            return {lastCellKey: null, lastCellStyle: null};
+        }
+
+        const lastRow = columns[columns.length - 1];
+        const lastTrItem = lastRow[lastRow.length - 1];
+        const lastCol = cols[cols.length - 1];
+
+        if (!lastTrItem || !lastCol) {
+            return {lastCellKey: null, lastCellStyle: null};
+        }
+
+        return lastCol.key === lastTrItem.key
+            ? {lastCellKey: null, lastCellStyle: null}
+            : {
+                lastCellKey: lastTrItem.key, 
+                lastCellStyle: {'border-right': `${theme.border}`}
+              };
+    }
+
+    return {getColumns, getCols, getData, getStyleForLastColumn} 
 }