mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 03:22:59 +08:00
Code Issues Actions 43 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 useLocale from '../../../hooks/useLocale';
import { useColumns } from '../TokenTable'; import { useColumns } from '../TokenTable';
import type { TokenData } from '../TokenTable';
const compare = (token1: string, token2: string) => { const compare = (token1: string, token2: string) => {
const hasColor1 = token1.toLowerCase().includes('color'); const hasColor1 = token1.toLowerCase().includes('color');
@ -108,13 +109,13 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
const data = tokens const data = tokens
.sort(component ? undefined : compare) .sort(component ? undefined : compare)
.map((name) => { .map<TokenData>((name) => {
const meta = component const meta = component
? tokenMeta.components[component].find((item) => item.token === name) ? tokenMeta.components[component].find((item) => item.token === name)
: tokenMeta.global[name]; : tokenMeta.global[name];
if (!meta) { if (!meta) {
return null; return null as unknown as TokenData;
} }
return { return {
@ -177,7 +178,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
</div> </div>
{open && ( {open && (
<ConfigProvider theme={{ token: { borderRadius: 0 } }}> <ConfigProvider theme={{ token: { borderRadius: 0 } }}>
<Table <Table<TokenData>
size="middle" size="middle"
columns={columns} columns={columns}
bordered bordered

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

@ -14,7 +14,7 @@ type TokenTableProps = {
lang: 'zh' | 'en'; lang: 'zh' | 'en';
}; };
type TokenData = { export type TokenData = {
name: string; name: string;
desc: string; desc: string;
type: 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 { Badge, Descriptions, Table } from 'antd';
import type { DescriptionsProps, TableProps } 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', key: '1',
name: '胡彦斌', name: '胡彦斌',
@ -17,7 +24,7 @@ const dataSource = [
}, },
]; ];
const columns: TableProps['columns'] = [ const columns: TableProps<DataType>['columns'] = [
{ {
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
@ -111,7 +118,9 @@ const items: DescriptionsProps['items'] = [
{ {
key: '12', key: '12',
label: 'Config Info', 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 <tbody
class="ant-table-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 <tr
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
data-row-key="1" data-row-key="1"
@ -3176,108 +3278,6 @@ Array [
</div> </div>
</td> </td>
</tr> </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> </tbody>
</table> </table>
</div> </div>
@ -6807,6 +6807,108 @@ Array [
<tbody <tbody
class="ant-table-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 <tr
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
data-row-key="1" data-row-key="1"
@ -7725,108 +7827,6 @@ Array [
</div> </div>
</td> </td>
</tr> </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> </tbody>
</table> </table>
</div> </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`] = ` exports[`renders components/table/demo/fixed-header.tsx extend context correctly 1`] = `
<div <div
class="ant-table-wrapper" class="ant-table-wrapper acss-6kbv1r"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -15373,7 +15373,7 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
</div> </div>
<div <div
class="ant-table-body" class="ant-table-body"
style="overflow-y: scroll; max-height: 240px;" style="overflow-y: scroll; max-height: 275px;"
> >
<table <table
style="table-layout: fixed;" 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`] = ` exports[`renders components/table/demo/grouping-columns.tsx extend context correctly 1`] = `
<div <div
class="ant-table-wrapper" class="ant-table-wrapper acss-6kbv1r"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -17052,7 +17052,7 @@ exports[`renders components/table/demo/grouping-columns.tsx extend context corre
</div> </div>
<div <div
class="ant-table-body" 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 <table
style="width: calc(700px + 50%); min-width: 100%; table-layout: fixed;" 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/sticky.tsx extend context correctly 2`] = `[]`;
exports[`renders components/table/demo/summary.tsx extend context correctly 1`] = ` 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 <div
class="ant-table-wrapper" class="ant-table-wrapper acss-6kbv1r"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -32889,10 +32891,9 @@ Array [
</div> </div>
</div> </div>
</div> </div>
</div>, </div>
<br />,
<div <div
class="ant-table-wrapper" class="ant-table-wrapper acss-6kbv1r"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -33326,8 +33327,8 @@ Array [
</div> </div>
</div> </div>
</div> </div>
</div>, </div>
] </div>
`; `;
exports[`renders components/table/demo/summary.tsx extend context correctly 2`] = `[]`; 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 <tbody
class="ant-table-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 <tr
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
data-row-key="1" data-row-key="1"
@ -3003,108 +3105,6 @@ Array [
</div> </div>
</td> </td>
</tr> </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> </tbody>
</table> </table>
</div> </div>
@ -5955,6 +5955,108 @@ Array [
<tbody <tbody
class="ant-table-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 <tr
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
data-row-key="1" data-row-key="1"
@ -6873,108 +6975,6 @@ Array [
</div> </div>
</td> </td>
</tr> </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> </tbody>
</table> </table>
</div> </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`] = ` exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
<div <div
class="ant-table-wrapper" class="ant-table-wrapper acss-6kbv1r"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -12882,7 +12882,7 @@ exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-table-body" class="ant-table-body"
style="overflow-y:scroll;max-height:240px" style="overflow-y:scroll;max-height:275px"
> >
<table <table
style="table-layout:fixed" 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`] = ` exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
<div <div
class="ant-table-wrapper" class="ant-table-wrapper acss-6kbv1r"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -14304,7 +14304,7 @@ exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
</div> </div>
<div <div
class="ant-table-body" 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 <table
style="width:calc(700px + 50%);min-width:100%;table-layout:fixed" 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`] = ` 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 <div
class="ant-table-wrapper" class="ant-table-wrapper acss-6kbv1r"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -28028,10 +28030,9 @@ Array [
</div> </div>
</div> </div>
</div> </div>
</div>, </div>
<br />,
<div <div
class="ant-table-wrapper" class="ant-table-wrapper acss-6kbv1r"
> >
<div <div
class="ant-spin-nested-loading" class="ant-spin-nested-loading"
@ -28465,8 +28466,8 @@ Array [
</div> </div>
</div> </div>
</div> </div>
</div>, </div>
] </div>
`; `;
exports[`renders components/table/demo/tree-data.tsx correctly 1`] = ` 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(() => { useEffect(fetchData, [
fetchData();
}, [
tableParams.pagination?.current, tableParams.pagination?.current,
tableParams.pagination?.pageSize, tableParams.pagination?.pageSize,
tableParams?.sortOrder, tableParams?.sortOrder,
@ -109,7 +107,7 @@ const App: React.FC = () => {
}; };
return ( return (
<Table <Table<DataType>
columns={columns} columns={columns}
rowKey={(record) => record.login.uuid} rowKey={(record) => record.login.uuid}
dataSource={data} 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; export default App;

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

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

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

@ -61,18 +61,18 @@ const columns: ColumnsType<DataType> = [
}, },
]; ];
const data: DataType[] = []; const dataSource = Array.from({ length: 10 }).map<DataType>((_, i) => ({
for (let i = 1; i <= 10; i++) { key: i,
data.push({ name: 'John Brown',
key: i, age: Number(`${i}2`),
name: 'John Brown', address: `New York No. ${i} Lake Park`,
age: Number(`${i}2`), description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
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 defaultTitle = () => 'Here is title';
const defaultFooter = () => 'Here is footer'; const defaultFooter = () => 'Here is footer';
@ -228,12 +228,7 @@ const App: React.FC = () => {
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label="Pagination Top"> <Form.Item label="Pagination Top">
<Radio.Group <Radio.Group value={top} onChange={(e) => setTop(e.target.value)}>
value={top}
onChange={(e) => {
setTop(e.target.value);
}}
>
<Radio.Button value="topLeft">TopLeft</Radio.Button> <Radio.Button value="topLeft">TopLeft</Radio.Button>
<Radio.Button value="topCenter">TopCenter</Radio.Button> <Radio.Button value="topCenter">TopCenter</Radio.Button>
<Radio.Button value="topRight">TopRight</Radio.Button> <Radio.Button value="topRight">TopRight</Radio.Button>
@ -241,12 +236,7 @@ const App: React.FC = () => {
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label="Pagination Bottom"> <Form.Item label="Pagination Bottom">
<Radio.Group <Radio.Group value={bottom} onChange={(e) => setBottom(e.target.value)}>
value={bottom}
onChange={(e) => {
setBottom(e.target.value);
}}
>
<Radio.Button value="bottomLeft">BottomLeft</Radio.Button> <Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
<Radio.Button value="bottomCenter">BottomCenter</Radio.Button> <Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
<Radio.Button value="bottomRight">BottomRight</Radio.Button> <Radio.Button value="bottomRight">BottomRight</Radio.Button>
@ -290,11 +280,11 @@ const App: React.FC = () => {
}, },
}} }}
> >
<Table <Table<DataType>
{...tableProps} {...tableProps}
pagination={{ position: [top, bottom] }} pagination={{ position: [top, bottom] }}
columns={tableColumns} columns={tableColumns}
dataSource={hasData ? data : []} dataSource={hasData ? dataSource : []}
scroll={scroll} scroll={scroll}
/> />
</ConfigProvider> </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 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) => const genFakeData = (count = 5) =>
Array.from({ length: count }).map((_, index) => ({ Array.from({ length: count }).map<DataType>((_, index) => ({
key: index, key: index,
name: `Edward King ${index}`, name: `Edward King ${index}`,
age: 32 + index, age: 32 + index,
@ -17,13 +24,13 @@ const renderEmpty: GetProp<typeof ConfigProvider, 'renderEmpty'> = (componentNam
}; };
function App() { function App() {
const [dataSource, setDataSource] = useState(genFakeData); const [dataSource, setDataSource] = useState<DataType[]>(genFakeData);
const handleToggle = () => { const handleToggle = () => {
setDataSource(dataSource.length ? [] : genFakeData(Math.floor(Math.random() * 10))); setDataSource(dataSource.length ? [] : genFakeData(Math.floor(Math.random() * 10)));
}; };
const columns: GetProp<typeof Table, 'columns'> = [ const columns: GetProp<typeof Table<DataType>, 'columns'> = [
{ {
title: 'Name', title: 'Name',
dataIndex: 'name', dataIndex: 'name',
@ -57,13 +64,11 @@ function App() {
<ConfigProvider renderEmpty={renderEmpty}> <ConfigProvider renderEmpty={renderEmpty}>
{dataSource.length ? toggleButton : null} {dataSource.length ? toggleButton : null}
<div style={{ marginBlock: 8 }} /> <div style={{ marginBlock: 8 }} />
<Table <Table<DataType>
bordered bordered
dataSource={dataSource} dataSource={dataSource}
columns={columns} columns={columns}
locale={{ locale={{ emptyText: <Empty description="No Data">{toggleButton}</Empty> }}
emptyText: <Empty description="No Data">{toggleButton}</Empty>,
}}
/> />
</ConfigProvider> </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; 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}> <SortableContext items={columns.map((i) => i.key)} strategy={horizontalListSortingStrategy}>
<DragIndexContext.Provider value={dragIndex}> <DragIndexContext.Provider value={dragIndex}>
<Table <Table<DataType>
rowKey="key" rowKey="key"
columns={columns} columns={columns}
dataSource={dataSource} dataSource={dataSource}

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

@ -105,7 +105,7 @@ const App: React.FC = () => {
return ( return (
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}> <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
<SortableContext items={dataSource.map((i) => i.key)} strategy={verticalListSortingStrategy}> <SortableContext items={dataSource.map((i) => i.key)} strategy={verticalListSortingStrategy}>
<Table <Table<DataType>
rowKey="key" rowKey="key"
components={{ body: { row: Row } }} components={{ body: { row: Row } }}
columns={columns} 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; 'data-row-key': string;
} }
const Row = (props: RowProps) => { const Row: React.FC<Readonly<RowProps>> = (props) => {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: props['data-row-key'], id: props['data-row-key'],
}); });
@ -103,11 +103,9 @@ const App: React.FC = () => {
items={dataSource.map((i) => i.key)} items={dataSource.map((i) => i.key)}
strategy={verticalListSortingStrategy} strategy={verticalListSortingStrategy}
> >
<Table <Table<DataType>
components={{ components={{
body: { body: { row: Row },
row: Row,
},
}} }}
rowKey="key" rowKey="key"
columns={columns} columns={columns}

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

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

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

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

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

@ -54,7 +54,7 @@ const data: DataType[] = [
]; ];
const App: React.FC = () => ( const App: React.FC = () => (
<Table <Table<DataType>
columns={columns} columns={columns}
expandable={{ expandable={{
expandedRowRender: (record) => <p style={{ margin: 0 }}>{record.description}</p>, 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 React from 'react';
import { Table } from 'antd'; import { Table } from 'antd';
import type { TableColumnsType } 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 { interface DataType {
key: React.Key; key: React.Key;
@ -26,18 +44,24 @@ const columns: TableColumnsType<DataType> = [
}, },
]; ];
const data: DataType[] = []; const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
for (let i = 0; i < 100; i++) { key: i,
data.push({ name: `Edward King ${i}`,
key: i, age: 32,
name: `Edward King ${i}`, address: `London, Park Lane no. ${i}`,
age: 32, }));
address: `London, Park Lane no. ${i}`,
});
}
const App: React.FC = () => ( const App: React.FC = () => {
<Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} /> const { styles } = useStyle();
); return (
<Table<DataType>
className={styles.customTable}
columns={columns}
dataSource={dataSource}
pagination={{ pageSize: 50 }}
scroll={{ y: 55 * 5 }}
/>
);
};
export default App; export default App;

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

@ -1,6 +1,24 @@
import React from 'react'; import React from 'react';
import { Table } from 'antd'; import { Table } from 'antd';
import type { TableColumnsType } 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 { interface DataType {
key: React.Key; key: React.Key;
@ -98,29 +116,30 @@ const columns: TableColumnsType<DataType> = [
}, },
]; ];
const data: DataType[] = []; const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
for (let i = 0; i < 100; i++) { key: i,
data.push({ name: 'John Brown',
key: i, age: i + 1,
name: 'John Brown', street: 'Lake Park',
age: i + 1, building: 'C',
street: 'Lake Park', number: 2035,
building: 'C', companyAddress: 'Lake Street 42',
number: 2035, companyName: 'SoftLake Co',
companyAddress: 'Lake Street 42', gender: 'M',
companyName: 'SoftLake Co', }));
gender: 'M',
});
}
const App: React.FC = () => ( const App: React.FC = () => {
<Table const { styles } = useStyle();
columns={columns} return (
dataSource={data} <Table<DataType>
bordered className={styles.customTable}
size="middle" columns={columns}
scroll={{ x: 'calc(700px + 50%)', y: 240 }} dataSource={dataSource}
/> bordered
); size="middle"
scroll={{ x: 'calc(700px + 50%)', y: 47 * 5 }}
/>
);
};
export default App; 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 = () => ( const App: React.FC = () => (
<Table <Table<DataType>
columns={columns} columns={columns}
dataSource={data} dataSource={data}
onChange={onChange} 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 App: React.FC = () => {
const [checkedList, setCheckedList] = useState(defaultCheckedList); const [checkedList, setCheckedList] = useState(defaultCheckedList);
@ -60,8 +60,7 @@ const App: React.FC = () => {
setCheckedList(value as string[]); setCheckedList(value as string[]);
}} }}
/> />
<Table<DataType> columns={newColumns} dataSource={data} style={{ marginTop: 24 }} />
<Table 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 = () => ( const App: React.FC = () => (
<Table dataSource={data}> <Table<DataType> dataSource={data}>
<ColumnGroup title="Name"> <ColumnGroup title="Name">
<Column title="First Name" dataIndex="firstName" key="firstName" /> <Column title="First Name" dataIndex="firstName" key="firstName" />
<Column title="Last Name" dataIndex="lastName" key="lastName" /> <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); 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; export default App;

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

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

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

@ -25,76 +25,75 @@ const items = [
{ key: '2', label: 'Action 2' }, { 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 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 [rootTableBordered, setRootTableBordered] = useState(true);
const [childTableBordered, setChildTableBordered] = useState(true); const [childTableBordered, setChildTableBordered] = useState(true);
return ( return (
@ -107,12 +106,12 @@ const App: React.FC = () => {
<Switch checked={childTableBordered} onChange={(v) => setChildTableBordered(v)} /> <Switch checked={childTableBordered} onChange={(v) => setChildTableBordered(v)} />
</Form.Item> </Form.Item>
</Form> </Form>
<Table <Table<DataType>
title={() => 'cool'} title={() => 'cool'}
footer={() => 'cool'} footer={() => 'cool'}
columns={columns} columns={columns}
expandable={{ expandedRowRender: createExpandedRowRender(childTableBordered) }} expandable={{ expandedRowRender: createExpandedRowRender(childTableBordered) }}
dataSource={data} dataSource={dataSource}
bordered={rootTableBordered} 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 type { TableColumnsType } from 'antd';
import { Badge, Dropdown, Space, Table } from 'antd'; import { Badge, Dropdown, Space, Table } from 'antd';
interface ExpandedDataType {
key: React.Key;
date: string;
name: string;
upgradeNum: string;
}
interface DataType { interface DataType {
key: React.Key; key: React.Key;
name: string; name: string;
@ -13,102 +20,92 @@ interface DataType {
createdAt: string; createdAt: string;
} }
interface ExpandedDataType {
key: React.Key;
date: string;
name: string;
upgradeNum: string;
}
const items = [ const items = [
{ key: '1', label: 'Action 1' }, { key: '1', label: 'Action 1' },
{ key: '2', label: 'Action 2' }, { key: '2', label: 'Action 2' },
]; ];
const App: React.FC = () => { const expandDataSource = Array.from({ length: 3 }).map<ExpandedDataType>((_, i) => ({
const expandedRowRender = () => { key: i.toString(),
const columns: TableColumnsType<ExpandedDataType> = [ date: '2014-12-24 23:12:00',
{ title: 'Date', dataIndex: 'date', key: 'date' }, name: 'This is production name',
{ title: 'Name', dataIndex: 'name', key: 'name' }, upgradeNum: 'Upgraded: 56',
{ }));
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 = []; const dataSource = Array.from({ length: 3 }).map<DataType>((_, i) => ({
for (let i = 0; i < 3; ++i) { key: i.toString(),
data.push({ name: 'Screen',
key: i.toString(), platform: 'iOS',
date: '2014-12-24 23:12:00', version: '10.3.4.5654',
name: 'This is production name', upgradeNum: 500,
upgradeNum: 'Upgraded: 56', creator: 'Jack',
}); createdAt: '2014-12-24 23:12:00',
} }));
return <Table columns={columns} dataSource={data} pagination={false} />;
};
const columns: TableColumnsType<DataType> = [ const expandColumns: TableColumnsType<ExpandedDataType> = [
{ title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' }, { title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Version', dataIndex: 'version', key: 'version' }, {
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' }, title: 'Status',
{ title: 'Creator', dataIndex: 'creator', key: 'creator' }, key: 'state',
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' }, render: () => <Badge status="success" text="Finished" />,
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> }, },
]; { 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[] = []; const columns: TableColumnsType<DataType> = [
for (let i = 0; i < 3; ++i) { { title: 'Name', dataIndex: 'name', key: 'name' },
data.push({ { title: 'Platform', dataIndex: 'platform', key: 'platform' },
key: i.toString(), { title: 'Version', dataIndex: 'version', key: 'version' },
name: 'Screen', { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
platform: 'iOS', { title: 'Creator', dataIndex: 'creator', key: 'creator' },
version: '10.3.4.5654', { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
upgradeNum: 500, { title: 'Action', key: 'operation', render: () => <a>Publish</a> },
creator: 'Jack', ];
createdAt: '2014-12-24 23:12:00',
});
}
return ( const expandedRowRender = () => (
<> <Table<ExpandedDataType>
<Table columns={expandColumns}
columns={columns} dataSource={expandDataSource}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }} pagination={false}
dataSource={data} />
/> );
<Table
columns={columns} const App: React.FC = () => (
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }} <>
dataSource={data} <Table<DataType>
size="middle" columns={columns}
/> expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
<Table dataSource={dataSource}
columns={columns} />
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }} <Table<DataType>
dataSource={data} columns={columns}
size="small" expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
/> dataSource={dataSource}
</> size="middle"
); />
}; <Table<DataType>
columns={columns}
expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
dataSource={dataSource}
size="small"
/>
</>
);
export default App; export default App;

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

@ -50,7 +50,7 @@ const data: DataType[] = [
]; ];
const App: React.FC = () => ( const App: React.FC = () => (
<Table <Table<DataType>
columns={columns} columns={columns}
rowSelection={{}} rowSelection={{}}
expandable={{ 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 ColumnsType<T extends object> = TableProps<T>['columns'];
type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>; 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 { interface DataType {
key: string; key: string;
@ -102,9 +104,8 @@ const data: DataType[] = [
]; ];
const App: React.FC = () => { const App: React.FC = () => {
const [top, setTop] = useState<TablePaginationPosition>('topLeft'); const [top, setTop] = useState<TablePaginationPosition<DataType>>('topLeft');
const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight'); const [bottom, setBottom] = useState<TablePaginationPosition<DataType>>('bottomRight');
return ( return (
<div> <div>
<div> <div>
@ -125,7 +126,11 @@ const App: React.FC = () => {
setBottom(e.target.value); setBottom(e.target.value);
}} }}
/> />
<Table columns={columns} pagination={{ position: [top, bottom] }} dataSource={data} /> <Table<DataType>
columns={columns}
pagination={{ position: [top, bottom] }}
dataSource={data}
/>
</div> </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={clearFilters}>Clear filters</Button>
<Button onClick={clearAll}>Clear filters and sorters</Button> <Button onClick={clearAll}>Clear filters and sorters</Button>
</Space> </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 ( return (
<Table<DataType> <Table<DataType>
bordered bordered
components={{ components={{ header: { cell: ResizableTitle } }}
header: { cell: ResizableTitle },
}}
columns={mergedColumns} columns={mergedColumns}
dataSource={data} 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; export default App;

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

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

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

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

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

@ -26,15 +26,12 @@ const columns: TableColumnsType<DataType> = [
}, },
]; ];
const data: DataType[] = []; const dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({
for (let i = 0; i < 46; i++) { key: i,
data.push({ name: `Edward King ${i}`,
key: i, age: 32,
name: `Edward King ${i}`, address: `London, Park Lane no. ${i}`,
age: 32, }));
address: `London, Park Lane no. ${i}`,
});
}
const App: React.FC = () => { const App: React.FC = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); 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; 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']; type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
const RenderTimes = () => { const RenderTimes: React.FC = () => {
const timesRef = React.useRef(0); const timesRef = React.useRef(0);
timesRef.current += 1; timesRef.current += 1;
return <span>{timesRef.current}</span>; return <span>{timesRef.current}</span>;
}; };
@ -18,7 +17,7 @@ interface DataType {
address: string; address: string;
} }
const shouldCellUpdate = (record: any, prevRecord: any) => record !== prevRecord; const shouldCellUpdate = (record: DataType, prevRecord: DataType) => record !== prevRecord;
const columns: TableColumnsType<DataType> = [ const columns: TableColumnsType<DataType> = [
{ {
@ -44,23 +43,17 @@ const columns: TableColumnsType<DataType> = [
}, },
]; ];
function genData(count: number) { function genData(length: number) {
const data: DataType[] = []; return Array.from({ length }).map<DataType>((_, i) => ({
key: i,
for (let i = 0; i < count; i++) { name: `Edward King ${i}`,
data.push({ age: 32,
key: i, address: `London, Park Lane no. ${i}`,
name: `Edward King ${i}`, }));
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
return data;
} }
const App: React.FC = () => { const App: React.FC = () => {
const [data, setData] = useState(genData(50)); const [data, setData] = useState<DataType[]>(genData(50));
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => { const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
@ -81,7 +74,12 @@ const App: React.FC = () => {
setData(genData(cnt || 0)); 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 React, { useState } from 'react';
import { Divider, Radio, Table } from 'antd'; import { Divider, Radio, Table } from 'antd';
import type { TableColumnsType } from 'antd'; import type { TableColumnsType, TableProps } from 'antd';
interface DataType { interface DataType {
key: React.Key; key: React.Key;
@ -53,7 +53,7 @@ const data: DataType[] = [
]; ];
// rowSelection object indicates the need for row selection // rowSelection object indicates the need for row selection
const rowSelection = { const rowSelection: TableProps<DataType>['rowSelection'] = {
onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => { onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
}, },
@ -68,23 +68,13 @@ const App: React.FC = () => {
return ( return (
<div> <div>
<Radio.Group <Radio.Group onChange={(e) => setSelectionType(e.target.value)} value={selectionType}>
onChange={({ target: { value } }) => {
setSelectionType(value);
}}
value={selectionType}
>
<Radio value="checkbox">Checkbox</Radio> <Radio value="checkbox">Checkbox</Radio>
<Radio value="radio">radio</Radio> <Radio value="radio">radio</Radio>
</Radio.Group> </Radio.Group>
<Divider /> <Divider />
<Table<DataType>
<Table rowSelection={{ type: selectionType, ...rowSelection }}
rowSelection={{
type: selectionType,
...rowSelection,
}}
columns={columns} columns={columns}
dataSource={data} dataSource={data}
/> />

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

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

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

@ -48,9 +48,9 @@ const data: DataType[] = [
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider>Middle size table</Divider> <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> <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[] = []; const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
for (let i = 0; i < 100; i++) { key: i,
data.push({ name: `Edward ${i}`,
key: i, age: 32,
name: `Edward ${i}`, address: `London Park no. ${i}`,
age: 32, }));
address: `London Park no. ${i}`,
});
}
const App: React.FC = () => { const App: React.FC = () => {
const [fixedTop, setFixedTop] = useState(false); const [fixedTop, setFixedTop] = useState(false);
return ( return (
<Table <Table<DataType>
columns={columns} columns={columns}
dataSource={data} dataSource={dataSource}
scroll={{ x: 1500 }} scroll={{ x: 1500 }}
summary={() => ( summary={() => (
<Table.Summary fixed={fixedTop ? 'top' : 'bottom'}> <Table.Summary fixed={fixedTop ? 'top' : 'bottom'}>

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

@ -1,6 +1,24 @@
import React from 'react'; import React from 'react';
import { Table, Typography } from 'antd'; import { Flex, Table, Typography } from 'antd';
import type { TableColumnsType } 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; const { Text } = Typography;
@ -32,7 +50,7 @@ const columns: TableColumnsType<DataType> = [
}, },
]; ];
const data: DataType[] = [ const dataSource: DataType[] = [
{ {
key: '1', key: '1',
name: 'John Brown', name: 'John Brown',
@ -72,71 +90,68 @@ const fixedColumns: TableColumnsType<FixedDataType> = [
}, },
]; ];
const fixedData: FixedDataType[] = []; const fixedDataSource = Array.from({ length: 20 }).map<FixedDataType>((_, i) => ({
for (let i = 0; i < 20; i += 1) { key: i,
fixedData.push({ name: ['Light', 'Bamboo', 'Little'][i % 3],
key: i, description: 'Everything that has a beginning, has an end.',
name: ['Light', 'Bamboo', 'Little'][i % 3], }));
description: 'Everything that has a beginning, has an end.',
});
}
const App: React.FC = () => ( const App: React.FC = () => {
<> const { styles } = useStyle();
<Table return (
columns={columns} <Flex vertical gap="small">
dataSource={data} <Table<DataType>
pagination={false} bordered
bordered className={styles.customTable}
summary={(pageData) => { columns={columns}
let totalBorrow = 0; dataSource={dataSource}
let totalRepayment = 0; pagination={false}
summary={(pageData) => {
pageData.forEach(({ borrow, repayment }) => { let totalBorrow = 0;
totalBorrow += borrow; let totalRepayment = 0;
totalRepayment += repayment; pageData.forEach(({ borrow, repayment }) => {
}); totalBorrow += borrow;
totalRepayment += repayment;
return ( });
<> 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.Row>
<Table.Summary.Cell index={0}>Total</Table.Summary.Cell> <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
<Table.Summary.Cell index={1}> <Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>
<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.Row> </Table.Summary>
<Table.Summary.Cell index={0}>Balance</Table.Summary.Cell> )}
<Table.Summary.Cell index={1} colSpan={2}> />
<Text type="danger">{totalBorrow - totalRepayment}</Text> </Flex>
</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>
)}
/>
</>
);
export default App; 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 }}> <Space align="center" style={{ marginBottom: 16 }}>
CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} /> CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />
</Space> </Space>
<Table <Table<DataType>
columns={columns} columns={columns}
rowSelection={{ ...rowSelection, checkStrictly }} rowSelection={{ ...rowSelection, checkStrictly }}
dataSource={data} 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 }}> <Space align="center" style={{ marginBottom: 16 }}>
Fixed first column: <Switch checked={fixed} onChange={setFixed} /> Fixed first column: <Switch checked={fixed} onChange={setFixed} />
</Space> </Space>
<Table <Table<DataType>
columns={columns} columns={columns}
rowSelection={{ columnWidth: 100 }} rowSelection={{ columnWidth: 100 }}
expandable={{ defaultExpandAllRows: true }} expandable={{ defaultExpandAllRows: true }}

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

@ -32,29 +32,26 @@ const columns: TableColumnsType<DataType> = [
}, },
]; ];
const data: DataType[] = []; const dataSource = Array.from({ length: 15 }).map<DataType>((_, i) => ({
for (let i = 0; i < 15; i++) { key: `key${i}`,
data.push({ name: `Edward ${i}`,
key: `key${i}`, age: 32,
name: `Edward ${i}`, address: `London Park no. ${i}`,
age: 32, children: [
address: `London Park no. ${i}`, {
children: [ key: `subKey${i}1`,
{ name: 'Brown',
key: `subKey${i}1`, age: 16,
name: 'Brown', address: 'New York No. 3 Lake Park',
age: 16, },
address: 'New York No. 3 Lake Park', {
}, key: `subKey${i}2`,
{ name: 'Jimmy',
key: `subKey${i}2`, age: 16,
name: 'Jimmy', address: 'New York No. 3 Lake Park',
age: 16, },
address: 'New York No. 3 Lake Park', ],
}, }));
],
});
}
// rowSelection objects indicates the need for row selection // rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = { const rowSelection: TableRowSelection<DataType> = {
@ -80,10 +77,10 @@ const App: React.FC = () => {
preserveSelectedRowKeys:{' '} preserveSelectedRowKeys:{' '}
<Switch checked={preserveSelectedRowKeys} onChange={setPreserveSelectedRowKeys} /> <Switch checked={preserveSelectedRowKeys} onChange={setPreserveSelectedRowKeys} />
</Space> </Space>
<Table <Table<DataType>
columns={columns} columns={columns}
rowSelection={{ ...rowSelection, checkStrictly, preserveSelectedRowKeys }} rowSelection={{ ...rowSelection, checkStrictly, preserveSelectedRowKeys }}
dataSource={data} dataSource={dataSource}
pagination={{ defaultPageSize: 5 }} 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 getData = (length: number) =>
const data: RecordType[] = new Array(count).fill(null).map((_, index) => ({ Array.from({ length }).map<RecordType>((_, index) => ({
id: index, id: index,
firstName: `First_${index.toString(16)}`, firstName: `First_${index.toString(16)}`,
lastName: `Last_${index.toString(16)}`, lastName: `Last_${index.toString(16)}`,
@ -103,10 +103,7 @@ const getData = (count: number) => {
address3: `Sydney No. ${index} Lake Park`, address3: `Sydney No. ${index} Lake Park`,
})); }));
return data; const App: React.FC = () => {
};
const App = () => {
const [fixed, setFixed] = React.useState(true); const [fixed, setFixed] = React.useState(true);
const [bordered, setBordered] = React.useState(true); const [bordered, setBordered] = React.useState(true);
const [expanded, setExpanded] = React.useState(false); const [expanded, setExpanded] = React.useState(false);
@ -114,7 +111,8 @@ const App = () => {
const [count, setCount] = React.useState(10000); const [count, setCount] = React.useState(10000);
const tblRef: Parameters<typeof Table>[0]['ref'] = React.useRef(null); 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>(() => { const mergedColumns = React.useMemo<typeof fixedColumns>(() => {
if (!fixed) { if (!fixed) {
@ -172,33 +170,20 @@ const App = () => {
value={count} value={count}
onChange={(value: number) => setCount(value)} onChange={(value: number) => setCount(value)}
options={[ options={[
{ { label: 'None', value: 0 },
label: 'None', { label: 'Less', value: 4 },
value: 0, { label: 'Lot', value: 10000 },
},
{
label: 'Less',
value: 4,
},
{
label: 'Lot',
value: 10000,
},
]} ]}
/> />
{data.length >= 999 && ( {data.length >= 999 && (
<Button <Button onClick={() => tblRef.current?.scrollTo({ index: 999 })}>
onClick={() => {
tblRef.current?.scrollTo({ index: 999 });
}}
>
Scroll To index 999 Scroll To index 999
</Button> </Button>
)} )}
</Space> </Space>
<Table <Table<RecordType>
bordered={bordered} bordered={bordered}
virtual virtual
columns={mergedColumns} columns={mergedColumns}
@ -207,14 +192,7 @@ const App = () => {
dataSource={empty ? [] : data} dataSource={empty ? [] : data}
pagination={false} pagination={false}
ref={tblRef} ref={tblRef}
rowSelection={ rowSelection={expanded ? undefined : { type: 'radio', columnWidth: 48 }}
expanded
? undefined
: {
type: 'radio',
columnWidth: 48,
}
}
expandable={expandableProps} expandable={expandableProps}
/> />
</Space> </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 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(), key: i.toString(),
title: `content${i + 1}`, title: `content${i + 1}`,
description: `description of 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; description: string;
} }
const mockData: RecordType[] = Array.from({ length: 10 }).map((_, i) => ({ const mockData = Array.from({ length: 10 }).map<RecordType>((_, i) => ({
key: i.toString(), key: i.toString(),
title: `content${i + 1}`, title: `content${i + 1}`,
description: `description of 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; disabled: boolean;
} }
const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({ const mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({
key: i.toString(), key: i.toString(),
title: `content${i + 1}`, title: `content${i + 1}`,
description: `description of content${i + 1}`, description: `description of content${i + 1}`,