mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
docs: remove demo of Table hidden resizable column (#56447)
* doc: hidden table component resizable-column demo * chore: 调整代码格式 * doc: remove resizable column demo from Table component * chore: rm deps * update: update snapshot file * fix: package.json version number error --------- Co-authored-by: thinkasany <480968828@qq.com> Co-authored-by: 遇见同学 <1875694521@qq.com>
This commit is contained in:
QdabuliuQ
@@ -23632,359 +23632,6 @@ Array [
|
||||
|
||||
exports[`renders components/table/demo/reset-filter.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/table/demo/resizable-column.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="css-var-test-id ant-table-css-var ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading css-var-test-id"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-bordered css-var-test-id ant-table-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout: auto;"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width: 200px;"
|
||||
/>
|
||||
<col
|
||||
style="width: 100px;"
|
||||
/>
|
||||
<col
|
||||
style="width: 100px;"
|
||||
/>
|
||||
<col
|
||||
style="width: 100px;"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell react-resizable"
|
||||
scope="col"
|
||||
>
|
||||
Date
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
aria-description="sortable"
|
||||
aria-label="Amount"
|
||||
class="ant-table-cell ant-table-column-has-sorters react-resizable"
|
||||
scope="col"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
aria-describedby="test-id"
|
||||
class="ant-table-column-sorters"
|
||||
>
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-table-column-sorter-inner"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-test-id ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-container"
|
||||
id="test-id"
|
||||
role="tooltip"
|
||||
>
|
||||
Click to sort ascending
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell react-resizable"
|
||||
scope="col"
|
||||
>
|
||||
Type
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell react-resizable"
|
||||
scope="col"
|
||||
>
|
||||
Note
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
2018-02-11
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
120
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
2018-03-11
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
243
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
2018-04-11
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
98
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-end css-var-test-id"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/resizable-column.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/table/demo/responsive.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="css-var-test-id ant-table-css-var ant-table-wrapper"
|
||||
|
||||
@@ -21917,336 +21917,6 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/resizable-column.tsx correctly 1`] = `
|
||||
<div
|
||||
class="css-var-test-id ant-table-css-var ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading css-var-test-id"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-bordered css-var-test-id ant-table-css-var"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:200px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell react-resizable"
|
||||
scope="col"
|
||||
>
|
||||
Date
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
aria-description="sortable"
|
||||
aria-label="Amount"
|
||||
class="ant-table-cell ant-table-column-has-sorters react-resizable"
|
||||
scope="col"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorters"
|
||||
>
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Amount
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-table-column-sorter-inner"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell react-resizable"
|
||||
scope="col"
|
||||
>
|
||||
Type
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell react-resizable"
|
||||
scope="col"
|
||||
>
|
||||
Note
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
2018-02-11
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
120
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
2018-03-11
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
243
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
2018-04-11
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
98
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-end css-var-test-id"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/responsive.tsx correctly 1`] = `
|
||||
<div
|
||||
class="css-var-test-id ant-table-css-var ant-table-wrapper"
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
集成 [react-resizable](https://github.com/STRML/react-resizable) 来实现可伸缩列。如果有排序需要，可以通过[额外标记](https://codesandbox.io/s/zrj8xvyzxx)阻止触发排序。
|
||||
|
||||
## en-US
|
||||
|
||||
Implement resizable column by integrate with [react-resizable](https://github.com/STRML/react-resizable). When sort needed, you can use [additional mark](https://codesandbox.io/s/zrj8xvyzxx) to prevent resize trigger sort.
|
||||
|
||||
```css
|
||||
#table-demo-resizable-column .react-resizable {
|
||||
position: relative;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
#table-demo-resizable-column .react-resizable-handle {
|
||||
position: absolute;
|
||||
inset-inline-end: -5px;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
}
|
||||
```
|
||||
@@ -1,123 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import type { TableColumnsType } from 'antd';
|
||||
import type { ResizeCallbackData } from 'react-resizable';
|
||||
import { Resizable } from 'react-resizable';
|
||||
|
||||
interface DataType {
|
||||
key: React.Key;
|
||||
date: string;
|
||||
amount: number;
|
||||
type: string;
|
||||
note: string;
|
||||
}
|
||||
|
||||
interface TitlePropsType {
|
||||
width: number;
|
||||
onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
|
||||
}
|
||||
|
||||
const ResizableTitle: React.FC<Readonly<React.HTMLAttributes<any> & TitlePropsType>> = (props) => {
|
||||
const { onResize, width, ...restProps } = props;
|
||||
|
||||
if (!width) {
|
||||
return <th {...restProps} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Resizable
|
||||
width={width}
|
||||
height={0}
|
||||
handle={<span className="react-resizable-handle" onClick={(e) => e.stopPropagation()} />}
|
||||
onResize={onResize}
|
||||
draggableOpts={{ enableUserSelectHack: false }}
|
||||
>
|
||||
<th {...restProps} />
|
||||
</Resizable>
|
||||
);
|
||||
};
|
||||
|
||||
const data: DataType[] = [
|
||||
{
|
||||
key: 0,
|
||||
date: '2018-02-11',
|
||||
amount: 120,
|
||||
type: 'income',
|
||||
note: 'transfer',
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
date: '2018-03-11',
|
||||
amount: 243,
|
||||
type: 'income',
|
||||
note: 'transfer',
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
date: '2018-04-11',
|
||||
amount: 98,
|
||||
type: 'income',
|
||||
note: 'transfer',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [columns, setColumns] = useState<TableColumnsType<DataType>>([
|
||||
{
|
||||
title: 'Date',
|
||||
dataIndex: 'date',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: 'Amount',
|
||||
dataIndex: 'amount',
|
||||
width: 100,
|
||||
sorter: (a, b) => a.amount - b.amount,
|
||||
},
|
||||
{
|
||||
title: 'Type',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: 'Note',
|
||||
dataIndex: 'note',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
render: () => <a>Delete</a>,
|
||||
},
|
||||
]);
|
||||
|
||||
const handleResize =
|
||||
(index: number) =>
|
||||
(_: React.SyntheticEvent<Element>, { size }: ResizeCallbackData) => {
|
||||
const newColumns = [...columns];
|
||||
newColumns[index] = {
|
||||
...newColumns[index],
|
||||
width: size.width,
|
||||
};
|
||||
setColumns(newColumns);
|
||||
};
|
||||
|
||||
const mergedColumns = columns.map<TableColumnsType<DataType>[number]>((col, index) => ({
|
||||
...col,
|
||||
onHeaderCell: (column: TableColumnsType<DataType>[number]) => ({
|
||||
width: column.width,
|
||||
onResize: handleResize(index) as React.ReactEventHandler<any>,
|
||||
}),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Table<DataType>
|
||||
bordered
|
||||
components={{ header: { cell: ResizableTitle } }}
|
||||
columns={mergedColumns}
|
||||
dataSource={data}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -96,7 +96,6 @@ const columns = [
|
||||
<code src="./demo/drag-sorting.tsx">Drag sorting</code>
|
||||
<code src="./demo/drag-column-sorting.tsx">Drag Column sorting</code>
|
||||
<code src="./demo/drag-sorting-handler.tsx">Drag sorting with handler</code>
|
||||
<code src="./demo/resizable-column.tsx" debug>Resizable column</code>
|
||||
<code src="./demo/ellipsis.tsx">ellipsis column</code>
|
||||
<code src="./demo/ellipsis-custom-tooltip.tsx">ellipsis column custom tooltip</code>
|
||||
<code src="./demo/custom-empty.tsx">Custom empty</code>
|
||||
|
||||
@@ -98,7 +98,6 @@ const columns = [
|
||||
<code src="./demo/drag-sorting.tsx">拖拽排序</code>
|
||||
<code src="./demo/drag-column-sorting.tsx">列拖拽排序</code>
|
||||
<code src="./demo/drag-sorting-handler.tsx">拖拽手柄列</code>
|
||||
<code src="./demo/resizable-column.tsx" debug>可伸缩列</code>
|
||||
<code src="./demo/ellipsis.tsx">单元格自动省略</code>
|
||||
<code src="./demo/ellipsis-custom-tooltip.tsx">自定义单元格省略提示</code>
|
||||
<code src="./demo/custom-empty.tsx">自定义空状态</code>
|
||||
|
||||
@@ -214,7 +214,6 @@
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/react-highlight-words": "^0.20.0",
|
||||
"@types/react-resizable": "^3.0.8",
|
||||
"@types/semver": "^7.7.1",
|
||||
"@types/spinnies": "^0.5.3",
|
||||
"@types/tar": "^6.1.13",
|
||||
@@ -300,7 +299,6 @@
|
||||
"react-highlight-words": "^0.21.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-infinite-scroll-component": "^6.1.1",
|
||||
"react-resizable": "3.0.5",
|
||||
"react-router-dom": "^7.10.1",
|
||||
"react-sticky-box": "^2.0.5",
|
||||
"rehype-stringify": "^10.0.1",
|
||||
|
||||
Reference in New Issue
Block a user