docs: table demo in dark mode (#39703)

* docs: table demo in dark mode * chore: update snaptshot * chore: update
ant-design · Dec 21, 2022 · 527c71d · 527c71d
1 parent b35fbcf
commit 527c71d
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 54 deletions.
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -27534,85 +27534,85 @@ exports[`renders ./components/table/demo/virtual-list.tsx extend context correct
             >
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:0;height:54px;width:150px"
+                style="position:absolute;left:0;top:0;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 0
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:0;height:54px;width:0"
+                style="position:absolute;left:150px;top:0;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 0
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:54px;height:54px;width:150px"
+                style="position:absolute;left:0;top:54px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 1
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:54px;height:54px;width:0"
+                style="position:absolute;left:150px;top:54px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 1
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:108px;height:54px;width:150px"
+                style="position:absolute;left:0;top:108px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 2
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:108px;height:54px;width:0"
+                style="position:absolute;left:150px;top:108px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 2
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:162px;height:54px;width:150px"
+                style="position:absolute;left:0;top:162px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 3
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:162px;height:54px;width:0"
+                style="position:absolute;left:150px;top:162px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 3
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:216px;height:54px;width:150px"
+                style="position:absolute;left:0;top:216px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 4
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:216px;height:54px;width:0"
+                style="position:absolute;left:150px;top:216px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 4
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:270px;height:54px;width:150px"
+                style="position:absolute;left:0;top:270px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 5
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:270px;height:54px;width:0"
+                style="position:absolute;left:150px;top:270px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 5
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:324px;height:54px;width:150px"
+                style="position:absolute;left:0;top:324px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 6
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:324px;height:54px;width:0"
+                style="position:absolute;left:150px;top:324px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 6
               </div>

diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -21734,85 +21734,85 @@ exports[`renders ./components/table/demo/virtual-list.tsx correctly 1`] = `
             >
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:0;height:54px;width:150px"
+                style="position:absolute;left:0;top:0;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 0
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:0;height:54px;width:0"
+                style="position:absolute;left:150px;top:0;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 0
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:54px;height:54px;width:150px"
+                style="position:absolute;left:0;top:54px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 1
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:54px;height:54px;width:0"
+                style="position:absolute;left:150px;top:54px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 1
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:108px;height:54px;width:150px"
+                style="position:absolute;left:0;top:108px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 2
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:108px;height:54px;width:0"
+                style="position:absolute;left:150px;top:108px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 2
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:162px;height:54px;width:150px"
+                style="position:absolute;left:0;top:162px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 3
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:162px;height:54px;width:0"
+                style="position:absolute;left:150px;top:162px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 3
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:216px;height:54px;width:150px"
+                style="position:absolute;left:0;top:216px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 4
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:216px;height:54px;width:0"
+                style="position:absolute;left:150px;top:216px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 4
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:270px;height:54px;width:150px"
+                style="position:absolute;left:0;top:270px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 5
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:270px;height:54px;width:0"
+                style="position:absolute;left:150px;top:270px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 5
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:0;top:324px;height:54px;width:150px"
+                style="position:absolute;left:0;top:324px;height:54px;width:150px;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 6
               </div>
               <div
                 class="virtual-table-cell"
-                style="position:absolute;left:150px;top:324px;height:54px;width:0"
+                style="position:absolute;left:150px;top:324px;height:54px;width:0;box-sizing:border-box;padding:16px;border-bottom:1px solid rgba(5, 5, 5, 0.06);background:#ffffff"
               >
                 6
               </div>

diff --git a/components/table/demo/summary.md b/components/table/demo/summary.md
@@ -5,14 +5,3 @@
 ## en-US
 
 Set summary content by `summary` prop. Sync column fixed status with `Table.Summary.Cell`. You can fixed it by set `Table.Summary` `fixed` prop(since `4.16.0`).
-
-<style>
-  #components-table-demo-summary tfoot th,
-  #components-table-demo-summary tfoot td {
-    background: #fafafa;
-  }
-  [data-theme="dark"] #components-table-demo-summary tfoot th,
-  [data-theme="dark"] #components-table-demo-summary tfoot td {
-    background: #1d1d1d;
-  }
-</style>
diff --git a/components/table/demo/virtual-list.md b/components/table/demo/virtual-list.md
@@ -11,17 +11,4 @@ Integrate virtual scroll with `react-window` to achieve a high performance table
   .virtual-table .ant-table-container:after {
     display: none;
   }
-  .virtual-table-cell {
-    box-sizing: border-box;
-    padding: 16px;
-    border-bottom: 1px solid #e8e8e8;
-    background: #FFF;
-  }
- [data-theme="dark"]  .virtual-table-cell {
-    box-sizing: border-box;
-    padding: 16px;
-    border-bottom: 1px solid #303030;
-    background: #141414;
-  }
-
 </style>
diff --git a/components/table/demo/virtual-list.tsx b/components/table/demo/virtual-list.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Table } from 'antd';
+import { Table, theme } from 'antd';
 import type { TableProps } from 'antd';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
@@ -8,6 +8,7 @@ import { VariableSizeGrid as Grid } from 'react-window';
 const VirtualTable = <RecordType extends object>(props: TableProps<RecordType>) => {
   const { columns, scroll } = props;
   const [tableWidth, setTableWidth] = useState(0);
+  const { token } = theme.useToken();
 
   const widthColumnCount = columns!.filter(({ width }) => !width).length;
   const mergedColumns = columns!.map((column) => {
@@ -86,7 +87,13 @@ const VirtualTable = <RecordType extends object>(props: TableProps<RecordType>)
             className={classNames('virtual-table-cell', {
               'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
             })}
-            style={style}
+            style={{
+              ...style,
+              boxSizing: 'border-box',
+              padding: token.padding,
+              borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+              background: token.colorBgContainer,
+            }}
           >
             {(rawData[rowIndex] as any)[(mergedColumns as any)[columnIndex].dataIndex]}
           </div>