mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 Packages Projects Releases Wiki Activity

docs: table demo in dark mode (#39703)

Browse Source 
* docs: table demo in dark mode

* chore: update snaptshot

* chore: update
This commit is contained in:
MadCcc 2022-12-21 15:01:52 +08:00 committed by GitHub
parent b35fbcf7ac
commit 527c71d207
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -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>

28
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -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>

11
components/table/demo/summary.md
View File

@ -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>

13
components/table/demo/virtual-list.md
View File

@ -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>

11
components/table/demo/virtual-list.tsx
View File

@ -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>