mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

demo: Table demo update (#50876)

Browse Source
This commit is contained in:
lijianan 2024-09-16 00:08:45 +08:00 committed by GitHub
parent 3b08dea83b
commit eb630d341d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
51 changed files with 969 additions and 971 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.dumi/theme/builtins/ComponentTokenTable/index.tsx
View File

@ -8,6 +8,7 @@ import tokenData from 'antd/es/version/token.json';
import useLocale from '../../../hooks/useLocale';
import { useColumns } from '../TokenTable';
import type { TokenData } from '../TokenTable';
const compare = (token1: string, token2: string) => {
const hasColor1 = token1.toLowerCase().includes('color');
@ -108,13 +109,13 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
const data = tokens
.sort(component ? undefined : compare)
.map((name) => {
.map<TokenData>((name) => {
const meta = component
? tokenMeta.components[component].find((item) => item.token === name)
: tokenMeta.global[name];
if (!meta) {
return null;
return null as unknown as TokenData;
}
return {
@ -177,7 +178,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
</div>
{open && (
<ConfigProvider theme={{ token: { borderRadius: 0 } }}>
<Table
<Table<TokenData>
size="middle"
columns={columns}
bordered

2
.dumi/theme/builtins/TokenTable/index.tsx
View File

@ -14,7 +14,7 @@ type TokenTableProps = {
lang: 'zh' | 'en';
};
type TokenData = {
export type TokenData = {
name: string;
desc: string;
type: string;

15
components/descriptions/demo/text.tsx
View File

@ -2,7 +2,14 @@ import React from 'react';
import { Badge, Descriptions, Table } from 'antd';
import type { DescriptionsProps, TableProps } from 'antd';
const dataSource = [
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
}
const dataSource: DataType[] = [
{
key: '1',
name: '胡彦斌',
@ -17,7 +24,7 @@ const dataSource = [
},
];
const columns: TableProps['columns'] = [
const columns: TableProps<DataType>['columns'] = [
{
title: '姓名',
dataIndex: 'name',
@ -111,7 +118,9 @@ const items: DescriptionsProps['items'] = [
{
key: '12',
label: 'Config Info',
children: <Table size="small" pagination={false} dataSource={dataSource} columns={columns} />,
children: (
<Table<DataType> size="small" pagination={false} dataSource={dataSource} columns={columns} />
),
},
];

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

@ -2258,6 +2258,108 @@ Array [
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
2
</td>
<td
class="ant-table-cell"
>
New York No. 0 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
@ -3176,108 +3278,6 @@ Array [
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="10"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
102
</td>
<td
class="ant-table-cell"
>
New York No. 10 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
@ -6807,6 +6807,108 @@ Array [
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
2
</td>
<td
class="ant-table-cell"
>
New York No. 0 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
@ -7725,108 +7827,6 @@ Array [
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="10"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
102
</td>
<td
class="ant-table-cell"
>
New York No. 10 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
@ -15323,7 +15323,7 @@ exports[`renders components/table/demo/fixed-gapped-columns.tsx extend context c
exports[`renders components/table/demo/fixed-header.tsx extend context correctly 1`] = `
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -15373,7 +15373,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
</div>
<div
class="ant-table-body"
style="overflow-y: scroll; max-height: 240px;"
style="overflow-y: scroll; max-height: 275px;"
>
<table
style="table-layout: fixed;"
@ -16688,7 +16688,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
exports[`renders components/table/demo/grouping-columns.tsx extend context correctly 1`] = `
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -17052,7 +17052,7 @@ exports[`renders components/table/demo/grouping-columns.tsx extend context corre
</div>
<div
class="ant-table-body"
style="overflow-x: auto; overflow-y: scroll; max-height: 240px;"
style="overflow-x: auto; overflow-y: scroll; max-height: 235px;"
>
<table
style="width: calc(700px + 50%); min-width: 100%; table-layout: fixed;"
@ -32706,9 +32706,11 @@ exports[`renders components/table/demo/sticky.tsx extend context correctly 1`] =
exports[`renders components/table/demo/sticky.tsx extend context correctly 2`] = `[]`;
exports[`renders components/table/demo/summary.tsx extend context correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -32889,10 +32891,9 @@ Array [
</div>
</div>
</div>
</div>,
<br />,
</div>
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -33326,8 +33327,8 @@ Array [
</div>
</div>
</div>
</div>,
]
</div>
</div>
`;
exports[`renders components/table/demo/summary.tsx extend context correctly 2`] = `[]`;

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

@ -2085,6 +2085,108 @@ Array [
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
2
</td>
<td
class="ant-table-cell"
>
New York No. 0 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
@ -3003,108 +3105,6 @@ Array [
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="10"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
102
</td>
<td
class="ant-table-cell"
>
New York No. 10 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
@ -5955,6 +5955,108 @@ Array [
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
2
</td>
<td
class="ant-table-cell"
>
New York No. 0 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
@ -6873,108 +6975,6 @@ Array [
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="10"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-selection-column"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>
</td>
<td
class="ant-table-cell"
>
John Brown
</td>
<td
class="ant-table-cell"
>
102
</td>
<td
class="ant-table-cell"
>
New York No. 10 Lake Park
</td>
<td
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-middle ant-space-gap-col-middle"
>
<div
class="ant-space-item"
>
<a>
Delete
</a>
</div>
<div
class="ant-space-item"
>
<a>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
More actions
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
@ -12832,7 +12832,7 @@ exports[`renders components/table/demo/fixed-gapped-columns.tsx correctly 1`] =
exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -12882,7 +12882,7 @@ exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
</div>
<div
class="ant-table-body"
style="overflow-y:scroll;max-height:240px"
style="overflow-y:scroll;max-height:275px"
>
<table
style="table-layout:fixed"
@ -14092,7 +14092,7 @@ exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -14304,7 +14304,7 @@ exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
</div>
<div
class="ant-table-body"
style="overflow-x:auto;overflow-y:scroll;max-height:240px"
style="overflow-x:auto;overflow-y:scroll;max-height:235px"
>
<table
style="width:calc(700px + 50%);min-width:100%;table-layout:fixed"
@ -27845,9 +27845,11 @@ exports[`renders components/table/demo/sticky.tsx correctly 1`] = `
`;
exports[`renders components/table/demo/summary.tsx correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -28028,10 +28030,9 @@ Array [
</div>
</div>
</div>
</div>,
<br />,
</div>
<div
class="ant-table-wrapper"
class="ant-table-wrapper acss-6kbv1r"
>
<div
class="ant-spin-nested-loading"
@ -28465,8 +28466,8 @@ Array [
</div>
</div>
</div>
</div>,
]
</div>
</div>
`;
exports[`renders components/table/demo/tree-data.tsx correctly 1`] = `

6
components/table/demo/ajax.tsx
View File

@ -84,9 +84,7 @@ const App: React.FC = () => {
});
};
useEffect(() => {
fetchData();
}, [
useEffect(fetchData, [
tableParams.pagination?.current,
tableParams.pagination?.pageSize,
tableParams?.sortOrder,
@ -109,7 +107,7 @@ const App: React.FC = () => {
};
return (
<Table
<Table<DataType>
columns={columns}
rowKey={(record) => record.login.uuid}
dataSource={data}

2
components/table/demo/basic.tsx
View File

@ -83,6 +83,6 @@ const data: DataType[] = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;
export default App;

2
components/table/demo/bordered.tsx
View File

@ -49,7 +49,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table
<Table<DataType>
columns={columns}
dataSource={data}
bordered

2
components/table/demo/colspan-rowspan.tsx
View File

@ -115,6 +115,6 @@ const data: DataType[] = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} bordered />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} bordered />;
export default App;

40
components/table/demo/component-token.tsx
View File

@ -61,18 +61,18 @@ const columns: ColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 1; i <= 10; i++) {
data.push({
key: i,
name: 'John Brown',
age: Number(`${i}2`),
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
});
}
const dataSource = Array.from({ length: 10 }).map<DataType>((_, i) => ({
key: i,
name: 'John Brown',
age: Number(`${i}2`),
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
}));
const defaultExpandable: ExpandableConfig<DataType> = {
expandedRowRender: (record: DataType) => <p>{record.description}</p>,
};
const defaultExpandable = { expandedRowRender: (record: DataType) => <p>{record.description}</p> };
const defaultTitle = () => 'Here is title';
const defaultFooter = () => 'Here is footer';
@ -228,12 +228,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination Top">
<Radio.Group
value={top}
onChange={(e) => {
setTop(e.target.value);
}}
>
<Radio.Group value={top} onChange={(e) => setTop(e.target.value)}>
<Radio.Button value="topLeft">TopLeft</Radio.Button>
<Radio.Button value="topCenter">TopCenter</Radio.Button>
<Radio.Button value="topRight">TopRight</Radio.Button>
@ -241,12 +236,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination Bottom">
<Radio.Group
value={bottom}
onChange={(e) => {
setBottom(e.target.value);
}}
>
<Radio.Group value={bottom} onChange={(e) => setBottom(e.target.value)}>
<Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
<Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
<Radio.Button value="bottomRight">BottomRight</Radio.Button>
@ -290,11 +280,11 @@ const App: React.FC = () => {
},
}}
>
<Table
<Table<DataType>
{...tableProps}
pagination={{ position: [top, bottom] }}
columns={tableColumns}
dataSource={hasData ? data : []}
dataSource={hasData ? dataSource : []}
scroll={scroll}
/>
</ConfigProvider>

23
components/table/demo/custom-empty.tsx
View File

@ -1,9 +1,16 @@
import type { GetProp } from 'antd';
import { Button, Empty, ConfigProvider, Table } from 'antd';
import React, { useState } from 'react';
import type { GetProp } from 'antd';
import { Button, ConfigProvider, Empty, Table } from 'antd';
interface DataType {
key: number;
name: string;
age: number;
address: string;
}
const genFakeData = (count = 5) =>
Array.from({ length: count }).map((_, index) => ({
Array.from({ length: count }).map<DataType>((_, index) => ({
key: index,
name: `Edward King ${index}`,
age: 32 + index,
@ -17,13 +24,13 @@ const renderEmpty: GetProp<typeof ConfigProvider, 'renderEmpty'> = (componentNam
};
function App() {
const [dataSource, setDataSource] = useState(genFakeData);
const [dataSource, setDataSource] = useState<DataType[]>(genFakeData);
const handleToggle = () => {
setDataSource(dataSource.length ? [] : genFakeData(Math.floor(Math.random() * 10)));
};
const columns: GetProp<typeof Table, 'columns'> = [
const columns: GetProp<typeof Table<DataType>, 'columns'> = [
{
title: 'Name',
dataIndex: 'name',
@ -57,13 +64,11 @@ function App() {
<ConfigProvider renderEmpty={renderEmpty}>
{dataSource.length ? toggleButton : null}
<div style={{ marginBlock: 8 }} />
<Table
<Table<DataType>
bordered
dataSource={dataSource}
columns={columns}
locale={{
emptyText: <Empty description="No Data">{toggleButton}</Empty>,
}}
locale={{ emptyText: <Empty description="No Data">{toggleButton}</Empty> }}
/>
</ConfigProvider>
);

2
components/table/demo/custom-filter-panel.tsx
View File

@ -163,7 +163,7 @@ const App: React.FC = () => {
},
];
return <Table columns={columns} dataSource={data} />;
return <Table<DataType> columns={columns} dataSource={data} />;
};
export default App;

2
components/table/demo/drag-column-sorting.tsx
View File

@ -172,7 +172,7 @@ const App: React.FC = () => {
>
<SortableContext items={columns.map((i) => i.key)} strategy={horizontalListSortingStrategy}>
<DragIndexContext.Provider value={dragIndex}>
<Table
<Table<DataType>
rowKey="key"
columns={columns}
dataSource={dataSource}

2
components/table/demo/drag-sorting-handler.tsx
View File

@ -105,7 +105,7 @@ const App: React.FC = () => {
return (
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
<SortableContext items={dataSource.map((i) => i.key)} strategy={verticalListSortingStrategy}>
<Table
<Table<DataType>
rowKey="key"
components={{ body: { row: Row } }}
columns={columns}

8
components/table/demo/drag-sorting.tsx
View File

@ -38,7 +38,7 @@ interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
'data-row-key': string;
}
const Row = (props: RowProps) => {
const Row: React.FC<Readonly<RowProps>> = (props) => {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: props['data-row-key'],
});
@ -103,11 +103,9 @@ const App: React.FC = () => {
items={dataSource.map((i) => i.key)}
strategy={verticalListSortingStrategy}
>
<Table
<Table<DataType>
components={{
body: {
row: Row,
},
body: { row: Row },
}}
rowKey="key"
columns={columns}

42
components/table/demo/dynamic-settings.tsx
View File

@ -61,18 +61,18 @@ const columns: ColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 1; i <= 10; i++) {
data.push({
key: i,
name: 'John Brown',
age: Number(`${i}2`),
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
});
}
const data = Array.from({ length: 10 }).map<DataType>((_, i) => ({
key: i,
name: 'John Brown',
age: Number(`${i}2`),
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
}));
const defaultExpandable: ExpandableConfig<DataType> = {
expandedRowRender: (record: DataType) => <p>{record.description}</p>,
};
const defaultExpandable = { expandedRowRender: (record: DataType) => <p>{record.description}</p> };
const defaultTitle = () => 'Here is title';
const defaultFooter = () => 'Here is footer';
@ -80,9 +80,7 @@ const App: React.FC = () => {
const [bordered, setBordered] = useState(false);
const [loading, setLoading] = useState(false);
const [size, setSize] = useState<SizeType>('large');
const [expandable, setExpandable] = useState<ExpandableConfig<DataType> | undefined>(
defaultExpandable,
);
const [expandable, setExpandable] = useState<ExpandableConfig<DataType>>(defaultExpandable);
const [showTitle, setShowTitle] = useState(false);
const [showHeader, setShowHeader] = useState(true);
const [showFooter, setShowFooter] = useState(true);
@ -228,12 +226,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination Top">
<Radio.Group
value={top}
onChange={(e) => {
setTop(e.target.value);
}}
>
<Radio.Group value={top} onChange={(e) => setTop(e.target.value)}>
<Radio.Button value="topLeft">TopLeft</Radio.Button>
<Radio.Button value="topCenter">TopCenter</Radio.Button>
<Radio.Button value="topRight">TopRight</Radio.Button>
@ -241,12 +234,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
<Form.Item label="Pagination Bottom">
<Radio.Group
value={bottom}
onChange={(e) => {
setBottom(e.target.value);
}}
>
<Radio.Group value={bottom} onChange={(e) => setBottom(e.target.value)}>
<Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
<Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
<Radio.Button value="bottomRight">BottomRight</Radio.Button>
@ -254,7 +242,7 @@ const App: React.FC = () => {
</Radio.Group>
</Form.Item>
</Form>
<Table
<Table<DataType>
{...tableProps}
pagination={{ position: [top, bottom] }}
columns={tableColumns}

4
components/table/demo/edit-cell.tsx
View File

@ -103,7 +103,7 @@ interface DataType {
address: string;
}
type ColumnTypes = Exclude<TableProps['columns'], undefined>;
type ColumnTypes = Exclude<TableProps<DataType>['columns'], undefined>;
const App: React.FC = () => {
const [dataSource, setDataSource] = useState<DataType[]>([
@ -205,7 +205,7 @@ const App: React.FC = () => {
<Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
Add a row
</Button>
<Table
<Table<DataType>
components={components}
rowClassName={() => 'editable-row'}
bordered

44
components/table/demo/edit-row.tsx
View File

@ -2,28 +2,26 @@ import React, { useState } from 'react';
import type { TableProps } from 'antd';
import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';
interface Item {
interface DataType {
key: string;
name: string;
age: number;
address: string;
}
const originData: Item[] = [];
for (let i = 0; i < 100; i++) {
originData.push({
key: i.toString(),
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const originData = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i.toString(),
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
}));
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
editing: boolean;
dataIndex: string;
title: any;
inputType: 'number' | 'text';
record: Item;
record: DataType;
index: number;
}
@ -63,12 +61,12 @@ const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
const App: React.FC = () => {
const [form] = Form.useForm();
const [data, setData] = useState(originData);
const [data, setData] = useState<DataType[]>(originData);
const [editingKey, setEditingKey] = useState('');
const isEditing = (record: Item) => record.key === editingKey;
const isEditing = (record: DataType) => record.key === editingKey;
const edit = (record: Partial<Item> & { key: React.Key }) => {
const edit = (record: Partial<DataType> & { key: React.Key }) => {
form.setFieldsValue({ name: '', age: '', address: '', ...record });
setEditingKey(record.key);
};
@ -79,7 +77,7 @@ const App: React.FC = () => {
const save = async (key: React.Key) => {
try {
const row = (await form.validateFields()) as Item;
const row = (await form.validateFields()) as DataType;
const newData = [...data];
const index = newData.findIndex((item) => key === item.key);
@ -123,7 +121,7 @@ const App: React.FC = () => {
{
title: 'operation',
dataIndex: 'operation',
render: (_: any, record: Item) => {
render: (_: any, record: DataType) => {
const editable = isEditing(record);
return editable ? (
<span>
@ -143,13 +141,13 @@ const App: React.FC = () => {
},
];
const mergedColumns: TableProps<Item>['columns'] = columns.map((col) => {
const mergedColumns: TableProps<DataType>['columns'] = columns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: Item) => ({
onCell: (record: DataType) => ({
record,
inputType: col.dataIndex === 'age' ? 'number' : 'text',
dataIndex: col.dataIndex,
@ -161,19 +159,15 @@ const App: React.FC = () => {
return (
<Form form={form} component={false}>
<Table
<Table<DataType>
components={{
body: {
cell: EditableCell,
},
body: { cell: EditableCell },
}}
bordered
dataSource={data}
columns={mergedColumns}
rowClassName="editable-row"
pagination={{
onChange: cancel,
}}
pagination={{ onChange: cancel }}
/>
</Form>
);

2
components/table/demo/ellipsis-custom-tooltip.tsx
View File

@ -98,6 +98,6 @@ const data: DataType[] = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;
export default App;

2
components/table/demo/ellipsis.tsx
View File

@ -73,6 +73,6 @@ const data = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;
export default App;

2
components/table/demo/expand.tsx
View File

@ -54,7 +54,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table
<Table<DataType>
columns={columns}
expandable={{
expandedRowRender: (record) => <p style={{ margin: 0 }}>{record.description}</p>,

48
components/table/demo/fixed-header.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -26,18 +44,24 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
}));
const App: React.FC = () => (
<Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
);
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
className={styles.customTable}
columns={columns}
dataSource={dataSource}
pagination={{ pageSize: 50 }}
scroll={{ y: 55 * 5 }}
/>
);
};
export default App;

65
components/table/demo/grouping-columns.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
interface DataType {
key: React.Key;
@ -98,29 +116,30 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
});
}
const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
}));
const App: React.FC = () => (
<Table
columns={columns}
dataSource={data}
bordered
size="middle"
scroll={{ x: 'calc(700px + 50%)', y: 240 }}
/>
);
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Table<DataType>
className={styles.customTable}
columns={columns}
dataSource={dataSource}
bordered
size="middle"
scroll={{ x: 'calc(700px + 50%)', y: 47 * 5 }}
/>
);
};
export default App;

2
components/table/demo/head.tsx
View File

@ -99,7 +99,7 @@ const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter,
};
const App: React.FC = () => (
<Table
<Table<DataType>
columns={columns}
dataSource={data}
onChange={onChange}

5
components/table/demo/hidden-columns.tsx
View File

@ -35,7 +35,7 @@ const data: DataType[] = [
},
];
const defaultCheckedList = columns.map((item) => item.key as string);
const defaultCheckedList = columns.map((item) => item.key);
const App: React.FC = () => {
const [checkedList, setCheckedList] = useState(defaultCheckedList);
@ -60,8 +60,7 @@ const App: React.FC = () => {
setCheckedList(value as string[]);
}}
/>
<Table columns={newColumns} dataSource={data} style={{ marginTop: 24 }} />
<Table<DataType> columns={newColumns} dataSource={data} style={{ marginTop: 24 }} />
</>
);
};

2
components/table/demo/jsx.tsx
View File

@ -40,7 +40,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table dataSource={data}>
<Table<DataType> dataSource={data}>
<ColumnGroup title="Name">
<Column title="First Name" dataIndex="firstName" key="firstName" />
<Column title="Last Name" dataIndex="lastName" key="lastName" />

4
components/table/demo/multiple-sorter.tsx
View File

@ -76,6 +76,8 @@ const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter,
console.log('params', pagination, filters, sorter, extra);
};
const App: React.FC = () => <Table columns={columns} dataSource={data} onChange={onChange} />;
const App: React.FC = () => (
<Table<DataType> columns={columns} dataSource={data} onChange={onChange} />
);
export default App;

23
components/table/demo/narrow.tsx
View File

@ -24,20 +24,21 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 200; i += 1) {
data.push({
key: i,
name: 'Sample Name',
age: 30 + (i % 5),
address: `Sample Address ${i}`,
});
}
const dataSource = Array.from({ length: 200 }).map<DataType>((_, key) => ({
key,
name: 'Sample Name',
age: 30 + (key % 5),
address: `Sample Address ${key}`,
}));
const App: React.FC = () => (
<div style={{ width: 300 }}>
<Table columns={columns} dataSource={data} size="small" pagination={{ defaultCurrent: 13 }} />
<Table<DataType>
columns={columns}
dataSource={dataSource}
size="small"
pagination={{ defaultCurrent: 13 }}
/>
</div>
);

141
components/table/demo/nest-table-border-debug.tsx
View File

@ -25,76 +25,75 @@ const items = [
{ key: '2', label: 'Action 2' },
];
const expandedColumns: TableProps<ExpandedDataType>['columns'] = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown menu={{ items }}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const expandedDataSource = Array.from({ length: 3 }).map<ExpandedDataType>((_, i) => ({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
}));
const createExpandedRowRender = (bordered: boolean) => () => (
<Table<ExpandedDataType>
columns={expandedColumns}
dataSource={expandedDataSource}
pagination={false}
bordered={bordered}
/>
);
const columns: TableColumnsType<DataType> = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
const dataSource = Array.from({ length: 3 }).map<DataType>((_, i) => ({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
}));
const App: React.FC = () => {
const createExpandedRowRender = (bordered: boolean) => () => {
const columns: TableProps['columns'] = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown menu={{ items }}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const data: ExpandedDataType[] = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return <Table columns={columns} dataSource={data} pagination={false} bordered={bordered} />;
};
const columns: TableColumnsType<DataType> = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
const data: DataType[] = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
const [rootTableBordered, setRootTableBordered] = useState(true);
const [childTableBordered, setChildTableBordered] = useState(true);
return (
@ -107,12 +106,12 @@ const App: React.FC = () => {
<Switch checked={childTableBordered} onChange={(v) => setChildTableBordered(v)} />
</Form.Item>
</Form>
<Table
<Table<DataType>
title={() => 'cool'}
footer={() => 'cool'}
columns={columns}
expandable={{ expandedRowRender: createExpandedRowRender(childTableBordered) }}
dataSource={data}
dataSource={dataSource}
bordered={rootTableBordered}
/>
</>

173
components/table/demo/nested-table.tsx
View File

@ -3,6 +3,13 @@ import { DownOutlined } from '@ant-design/icons';
import type { TableColumnsType } from 'antd';
import { Badge, Dropdown, Space, Table } from 'antd';
interface ExpandedDataType {
key: React.Key;
date: string;
name: string;
upgradeNum: string;
}
interface DataType {
key: React.Key;
name: string;
@ -13,102 +20,92 @@ interface DataType {
createdAt: string;
}
interface ExpandedDataType {
key: React.Key;
date: string;
name: string;
upgradeNum: string;
}
const items = [
{ key: '1', label: 'Action 1' },
{ key: '2', label: 'Action 2' },
];
const App: React.FC = () => {
const expandedRowRender = () => {
const columns: TableColumnsType<ExpandedDataType> = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => <Badge status="success" text="Finished" />,
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown menu={{ items }}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const expandDataSource = Array.from({ length: 3 }).map<ExpandedDataType>((_, i) => ({
key: i.toString(),
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
}));
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i.toString(),
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return <Table columns={columns} dataSource={data} pagination={false} />;
};
const dataSource = Array.from({ length: 3 }).map<DataType>((_, i) => ({
key: i.toString(),
name: 'Screen',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
}));
const columns: TableColumnsType<DataType> = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
const expandColumns: TableColumnsType<ExpandedDataType> = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => <Badge status="success" text="Finished" />,
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown menu={{ items }}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const data: DataType[] = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i.toString(),
name: 'Screen',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
const columns: TableColumnsType<DataType> = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
return (
<>
<Table
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={data}
/>
<Table
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={data}
size="middle"
/>
<Table
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={data}
size="small"
/>
</>
);
};
const expandedRowRender = () => (
<Table<ExpandedDataType>
columns={expandColumns}
dataSource={expandDataSource}
pagination={false}
/>
);
const App: React.FC = () => (
<>
<Table<DataType>
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={dataSource}
/>
<Table<DataType>
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={dataSource}
size="middle"
/>
<Table<DataType>
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={dataSource}
size="small"
/>
</>
);
export default App;

2
components/table/demo/order-column.tsx
View File

@ -50,7 +50,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table
<Table<DataType>
columns={columns}
rowSelection={{}}
expandable={{

15
components/table/demo/pagination.tsx
View File

@ -4,7 +4,9 @@ import type { TableProps } from 'antd';
type ColumnsType<T extends object> = TableProps<T>['columns'];
type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
type TablePaginationPosition = NonNullable<TablePagination<any>['position']>[number];
type TablePaginationPosition<T extends object> = NonNullable<
TablePagination<T>['position']
>[number];
interface DataType {
key: string;
@ -102,9 +104,8 @@ const data: DataType[] = [
];
const App: React.FC = () => {
const [top, setTop] = useState<TablePaginationPosition>('topLeft');
const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
const [top, setTop] = useState<TablePaginationPosition<DataType>>('topLeft');
const [bottom, setBottom] = useState<TablePaginationPosition<DataType>>('bottomRight');
return (
<div>
<div>
@ -125,7 +126,11 @@ const App: React.FC = () => {
setBottom(e.target.value);
}}
/>
<Table columns={columns} pagination={{ position: [top, bottom] }} dataSource={data} />
<Table<DataType>
columns={columns}
pagination={{ position: [top, bottom] }}
dataSource={data}
/>
</div>
);
};

2
components/table/demo/reset-filter.tsx
View File

@ -114,7 +114,7 @@ const App: React.FC = () => {
<Button onClick={clearFilters}>Clear filters</Button>
<Button onClick={clearAll}>Clear filters and sorters</Button>
</Space>
<Table columns={columns} dataSource={data} onChange={handleChange} />
<Table<DataType> columns={columns} dataSource={data} onChange={handleChange} />
</>
);
};

4
components/table/demo/resizable-column.tsx
View File

@ -113,9 +113,7 @@ const App: React.FC = () => {
return (
<Table<DataType>
bordered
components={{
header: { cell: ResizableTitle },
}}
components={{ header: { cell: ResizableTitle } }}
columns={mergedColumns}
dataSource={data}
/>

2
components/table/demo/responsive.tsx
View File

@ -39,6 +39,6 @@ const data: DataType[] = [
},
];
const App: React.FC = () => <Table columns={columns} dataSource={data} />;
const App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;
export default App;

2
components/table/demo/row-selection-and-operation.tsx
View File

@ -57,7 +57,7 @@ const App: React.FC = () => {
</Button>
{hasSelected ? `Selected ${selectedRowKeys.length} items` : null}
</Flex>
<Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
<Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
</Flex>
);
};

36
components/table/demo/row-selection-custom-debug.tsx
View File

@ -16,26 +16,24 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: i % 2 === 0 ? `Edward King ${i}` : 'Another Row',
});
}
const dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({
key: i,
name: i % 2 === 0 ? `Edward King ${i}` : 'Another Row',
}));
const App: React.FC = () => {
const rowSelection: TableRowSelection<DataType> = {
renderCell: (checked, _record, index, node) => ({
props: { rowSpan: index % 2 === 0 ? 2 : 0 },
children: (
<>
{String(checked)}: {node}
</>
),
}),
};
return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
const rowSelection: TableRowSelection<DataType> = {
renderCell: (checked, _record, index, node) => ({
props: { rowSpan: index % 2 === 0 ? 2 : 0 },
children: (
<>
{String(checked)}: {node}
</>
),
}),
};
const App: React.FC = () => (
<Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
);
export default App;

17
components/table/demo/row-selection-custom.tsx
View File

@ -26,15 +26,12 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
}));
const App: React.FC = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@ -82,7 +79,7 @@ const App: React.FC = () => {
],
};
return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
return <Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />;
};
export default App;

34
components/table/demo/row-selection-debug.tsx
View File

@ -4,10 +4,9 @@ import type { TableColumnsType, TableProps } from 'antd';
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
const RenderTimes = () => {
const RenderTimes: React.FC = () => {
const timesRef = React.useRef(0);
timesRef.current += 1;
return <span>{timesRef.current}</span>;
};
@ -18,7 +17,7 @@ interface DataType {
address: string;
}
const shouldCellUpdate = (record: any, prevRecord: any) => record !== prevRecord;
const shouldCellUpdate = (record: DataType, prevRecord: DataType) => record !== prevRecord;
const columns: TableColumnsType<DataType> = [
{
@ -44,23 +43,17 @@ const columns: TableColumnsType<DataType> = [
},
];
function genData(count: number) {
const data: DataType[] = [];
for (let i = 0; i < count; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
return data;
function genData(length: number) {
return Array.from({ length }).map<DataType>((_, i) => ({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
}));
}
const App: React.FC = () => {
const [data, setData] = useState(genData(50));
const [data, setData] = useState<DataType[]>(genData(50));
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
@ -81,7 +74,12 @@ const App: React.FC = () => {
setData(genData(cnt || 0));
}}
/>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={false} />
<Table<DataType>
rowSelection={rowSelection}
columns={columns}
dataSource={data}
pagination={false}
/>
</>
);
};

20
components/table/demo/row-selection.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { Divider, Radio, Table } from 'antd';
import type { TableColumnsType } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
interface DataType {
key: React.Key;
@ -53,7 +53,7 @@ const data: DataType[] = [
];
// rowSelection object indicates the need for row selection
const rowSelection = {
const rowSelection: TableProps<DataType>['rowSelection'] = {
onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
@ -68,23 +68,13 @@ const App: React.FC = () => {
return (
<div>
<Radio.Group
onChange={({ target: { value } }) => {
setSelectionType(value);
}}
value={selectionType}
>
<Radio.Group onChange={(e) => setSelectionType(e.target.value)} value={selectionType}>
<Radio value="checkbox">Checkbox</Radio>
<Radio value="radio">radio</Radio>
</Radio.Group>
<Divider />
<Table
rowSelection={{
type: selectionType,
...rowSelection,
}}
<Table<DataType>
rowSelection={{ type: selectionType, ...rowSelection }}
columns={columns}
dataSource={data}
/>

2
components/table/demo/selections-debug.tsx
View File

@ -46,7 +46,7 @@ const data: DataType[] = [
];
const App: React.FC = () => (
<Table
<Table<DataType>
bordered
rowSelection={{ type: 'checkbox', selections: true }}
columns={columns}

4
components/table/demo/size.tsx
View File

@ -48,9 +48,9 @@ const data: DataType[] = [
const App: React.FC = () => (
<>
<Divider>Middle size table</Divider>
<Table columns={columns} dataSource={data} size="middle" />
<Table<DataType> columns={columns} dataSource={data} size="middle" />
<Divider>Small size table</Divider>
<Table columns={columns} dataSource={data} size="small" />
<Table<DataType> columns={columns} dataSource={data} size="small" />
</>
);

20
components/table/demo/sticky.tsx
View File

@ -76,23 +76,19 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
key: i,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
}));
const App: React.FC = () => {
const [fixedTop, setFixedTop] = useState(false);
return (
<Table
<Table<DataType>
columns={columns}
dataSource={data}
dataSource={dataSource}
scroll={{ x: 1500 }}
summary={() => (
<Table.Summary fixed={fixedTop ? 'top' : 'bottom'}>

145
components/table/demo/summary.tsx
View File

@ -1,6 +1,24 @@
import React from 'react';
import { Table, Typography } from 'antd';
import { Flex, Table, Typography } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css, token }) => {
const { antCls } = token;
return {
customTable: css`
${antCls}-table {
${antCls}-table-container {
${antCls}-table-body,
${antCls}-table-content {
scrollbar-width: thin;
scrollbar-color: unset;
}
}
}
`,
};
});
const { Text } = Typography;
@ -32,7 +50,7 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [
const dataSource: DataType[] = [
{
key: '1',
name: 'John Brown',
@ -72,71 +90,68 @@ const fixedColumns: TableColumnsType<FixedDataType> = [
},
];
const fixedData: FixedDataType[] = [];
for (let i = 0; i < 20; i += 1) {
fixedData.push({
key: i,
name: ['Light', 'Bamboo', 'Little'][i % 3],
description: 'Everything that has a beginning, has an end.',
});
}
const fixedDataSource = Array.from({ length: 20 }).map<FixedDataType>((_, i) => ({
key: i,
name: ['Light', 'Bamboo', 'Little'][i % 3],
description: 'Everything that has a beginning, has an end.',
}));
const App: React.FC = () => (
<>
<Table
columns={columns}
dataSource={data}
pagination={false}
bordered
summary={(pageData) => {
let totalBorrow = 0;
let totalRepayment = 0;
pageData.forEach(({ borrow, repayment }) => {
totalBorrow += borrow;
totalRepayment += repayment;
});
return (
<>
const App: React.FC = () => {
const { styles } = useStyle();
return (
<Flex vertical gap="small">
<Table<DataType>
bordered
className={styles.customTable}
columns={columns}
dataSource={dataSource}
pagination={false}
summary={(pageData) => {
let totalBorrow = 0;
let totalRepayment = 0;
pageData.forEach(({ borrow, repayment }) => {
totalBorrow += borrow;
totalRepayment += repayment;
});
return (
<>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
<Text type="danger">{totalBorrow}</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={2}>
<Text>{totalRepayment}</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Balance</Table.Summary.Cell>
<Table.Summary.Cell index={1} colSpan={2}>
<Text type="danger">{totalBorrow - totalRepayment}</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
</>
);
}}
/>
<Table<FixedDataType>
className={styles.customTable}
columns={fixedColumns}
dataSource={fixedDataSource}
pagination={false}
scroll={{ x: 2000, y: 500 }}
bordered
summary={() => (
<Table.Summary fixed>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
<Table.Summary.Cell index={1}>
<Text type="danger">{totalBorrow}</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={2}>
<Text>{totalRepayment}</Text>
</Table.Summary.Cell>
<Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
<Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Balance</Table.Summary.Cell>
<Table.Summary.Cell index={1} colSpan={2}>
<Text type="danger">{totalBorrow - totalRepayment}</Text>
</Table.Summary.Cell>
</Table.Summary.Row>
</>
);
}}
/>
<br />
<Table
columns={fixedColumns}
dataSource={fixedData}
pagination={false}
scroll={{ x: 2000, y: 500 }}
bordered
summary={() => (
<Table.Summary fixed>
<Table.Summary.Row>
<Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
<Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>
</Table.Summary.Row>
</Table.Summary>
)}
/>
</>
);
</Table.Summary>
)}
/>
</Flex>
);
};
export default App;

2
components/table/demo/tree-data.tsx
View File

@ -118,7 +118,7 @@ const App: React.FC = () => {
<Space align="center" style={{ marginBottom: 16 }}>
CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />
</Space>
<Table
<Table<DataType>
columns={columns}
rowSelection={{ ...rowSelection, checkStrictly }}
dataSource={data}

2
components/table/demo/tree-table-ellipsis.tsx
View File

@ -105,7 +105,7 @@ const App: React.FC = () => {
<Space align="center" style={{ marginBottom: 16 }}>
Fixed first column: <Switch checked={fixed} onChange={setFixed} />
</Space>
<Table
<Table<DataType>
columns={columns}
rowSelection={{ columnWidth: 100 }}
expandable={{ defaultExpandAllRows: true }}

47
components/table/demo/tree-table-preserveSelectedRowKeys.tsx
View File

@ -32,29 +32,26 @@ const columns: TableColumnsType<DataType> = [
},
];
const data: DataType[] = [];
for (let i = 0; i < 15; i++) {
data.push({
key: `key${i}`,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
children: [
{
key: `subKey${i}1`,
name: 'Brown',
age: 16,
address: 'New York No. 3 Lake Park',
},
{
key: `subKey${i}2`,
name: 'Jimmy',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
});
}
const dataSource = Array.from({ length: 15 }).map<DataType>((_, i) => ({
key: `key${i}`,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
children: [
{
key: `subKey${i}1`,
name: 'Brown',
age: 16,
address: 'New York No. 3 Lake Park',
},
{
key: `subKey${i}2`,
name: 'Jimmy',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
}));
// rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = {
@ -80,10 +77,10 @@ const App: React.FC = () => {
preserveSelectedRowKeys:{' '}
<Switch checked={preserveSelectedRowKeys} onChange={setPreserveSelectedRowKeys} />
</Space>
<Table
<Table<DataType>
columns={columns}
rowSelection={{ ...rowSelection, checkStrictly, preserveSelectedRowKeys }}
dataSource={data}
dataSource={dataSource}
pagination={{ defaultPageSize: 5 }}
/>
</>

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

@ -92,8 +92,8 @@ const columns: TableProps<RecordType>['columns'] = [
},
];
const getData = (count: number) => {
const data: RecordType[] = new Array(count).fill(null).map((_, index) => ({
const getData = (length: number) =>
Array.from({ length }).map<RecordType>((_, index) => ({
id: index,
firstName: `First_${index.toString(16)}`,
lastName: `Last_${index.toString(16)}`,
@ -103,10 +103,7 @@ const getData = (count: number) => {
address3: `Sydney No. ${index} Lake Park`,
}));
return data;
};
const App = () => {
const App: React.FC = () => {
const [fixed, setFixed] = React.useState(true);
const [bordered, setBordered] = React.useState(true);
const [expanded, setExpanded] = React.useState(false);
@ -114,7 +111,8 @@ const App = () => {
const [count, setCount] = React.useState(10000);
const tblRef: Parameters<typeof Table>[0]['ref'] = React.useRef(null);
const data = React.useMemo(() => getData(count), [count]);
const data = React.useMemo<RecordType[]>(() => getData(count), [count]);
const mergedColumns = React.useMemo<typeof fixedColumns>(() => {
if (!fixed) {
@ -172,33 +170,20 @@ const App = () => {
value={count}
onChange={(value: number) => setCount(value)}
options={[
{
label: 'None',
value: 0,
},
{
label: 'Less',
value: 4,
},
{
label: 'Lot',
value: 10000,
},
{ label: 'None', value: 0 },
{ label: 'Less', value: 4 },
{ label: 'Lot', value: 10000 },
]}
/>
{data.length >= 999 && (
<Button
onClick={() => {
tblRef.current?.scrollTo({ index: 999 });
}}
>
<Button onClick={() => tblRef.current?.scrollTo({ index: 999 })}>
Scroll To index 999
</Button>
)}
</Space>
<Table
<Table<RecordType>
bordered={bordered}
virtual
columns={mergedColumns}
@ -207,14 +192,7 @@ const App = () => {
dataSource={empty ? [] : data}
pagination={false}
ref={tblRef}
rowSelection={
expanded
? undefined
: {
type: 'radio',
columnWidth: 48,
}
}
rowSelection={expanded ? undefined : { type: 'radio', columnWidth: 48 }}
expandable={expandableProps}
/>
</Space>

2
components/transfer/demo/component-token.tsx
View File

@ -82,7 +82,7 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransfe
const mockTags = ['cat', 'dog', 'bird'];
const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
const mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,

2
components/transfer/demo/custom-select-all-labels.tsx
View File

@ -8,7 +8,7 @@ interface RecordType {
description: string;
}
const mockData: RecordType[] = Array.from({ length: 10 }).map((_, i) => ({
const mockData = Array.from({ length: 10 }).map<RecordType>((_, i) => ({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,

2
components/transfer/demo/oneWay.tsx
View File

@ -9,7 +9,7 @@ interface RecordType {
disabled: boolean;
}
const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
const mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,