fix(data-table): fixed column box-shadow doesn't update

1. when there is only on side fixed
2. when `props.scrollX` is not set but each column's width is set

CHANGELOG.en-US.md

@@ -6,6 +6,11 @@
 
 - `n-tree` exports `TreeDragInfo` & `TreeDropInfo` type.
 
+### Fixes
+
+- Fix `n-data-table` fixed column box-shadow doesn't update when there is only on side fixed.
+- Fix `n-data-table` fixed column box-shadow doesn't update when `props.scrollX` is not set but each column's width is set.
+
 ## 2.15.3 (2021-07-05)
 
 ### Feats

CHANGELOG.zh-CN.md

@@ -6,6 +6,11 @@
 
 - `n-tree` 导出 `TreeDragInfo` & `TreeDropInfo` 类型
 
+### Fixes
+
+- 修复 `n-data-table` 在只有一侧固定列时固定列阴影不更新
+- 修复 `n-data-table` 在未设定 `props.scrollX` 但为每个列设定宽度后固定列阴影不更新
+
 ## 2.15.3 (2021-07-05)
 
 ### Feats
@@ -150,7 +155,7 @@
 
 ### Fixes
 
-- 修复 `n-input` 中英文字符切换输入时抖动的问题，关闭[#174](https://github.com/TuSimple/naive-ui/issues/174)
+- 修复 `n-input` 中英文字符切换输入时抖动，关闭[#174](https://github.com/TuSimple/naive-ui/issues/174)
 - 修复 `n-icon` 在使用 setup script 时，`$parent` 默认是一个空对象，访问 `$parent.$options` 会是 `undefined`
 - 修复 `n-notification` 位置不正确
 - 修复 `n-message` 的 content & option 类型不正确

src/data-table/src/TableParts/Body.tsx

@@ -211,20 +211,27 @@ export default defineComponent({
             )
         ])
     ])
+    let fixedStyleMounted = false
     watchEffect(() => {
       const { value: leftActiveFixedColKey } = leftActiveFixedColKeyRef
       const { value: rightActiveFixedColKey } = rightActiveFixedColKeyRef
-      if (leftActiveFixedColKey !== null || rightActiveFixedColKey !== null) {
-        style.mount({
-          id: `n-${componentId}`,
-          force: true,
-          props: {
-            leftActiveFixedColKey,
-            rightActiveFixedColKey,
-            componentId
-          }
-        })
+      if (
+        !fixedStyleMounted &&
+        leftActiveFixedColKey === null &&
+        rightActiveFixedColKey === null
+      ) {
+        return
       }
+      style.mount({
+        id: `n-${componentId}`,
+        force: true,
+        props: {
+          leftActiveFixedColKey,
+          rightActiveFixedColKey,
+          componentId
+        }
+      })
+      fixedStyleMounted = true
     })
     onUnmounted(() => {
       style.unmount({

src/data-table/src/use-scroll.ts

@@ -123,7 +123,9 @@ export function useScroll (
     }
   }
   function syncScrollState (): void {
-    if (!props.scrollX) return
+    // We can't simply use props.scrollX to determine whether the table has
+    // need to be sync since user may set column width for each column.
+    // Just let it be, the scroll listener won't be triggered for a basic table.
     const { header, body } = getScrollElements()
     if (!body) return
     const { value: tableWidth } = bodyWidthRef