Skip to content

Commit

Permalink
docs: add drag column sorting demo (#48434)
Browse files Browse the repository at this point in the history 
* docs(table): add drag column sorting demo

* update test snap

* chore: add script to adapt os memory

* Revert "update test snap"

This reverts commit be1a30e.

revert commit#

* revert

* revert

* snap

* add more column data

* update snap

* chore: column drag style

* update snap

* chore: optimize code

---------

Co-authored-by: afc163 <afc163@gmail.com>
  • Loading branch information
@GeorgeHcc @afc163
GeorgeHcc and afc163 committed Apr 29, 2024
1 parent c150885 commit 786dfc0
Show file tree
Hide file tree
Showing 6 changed files with 908 additions and 0 deletions.
345 changes: 345 additions & 0 deletions components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Expand Up @@ -4104,6 +4104,351 @@ exports[`renders components/table/demo/custom-filter-panel.tsx extend context co

exports[`renders components/table/demo/custom-filter-panel.tsx extend context correctly 2`] = `[]`;

exports[`renders components/table/demo/drag-column-sorting.tsx extend context correctly 1`] = `
Array [
<div
class="ant-table-wrapper"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-table"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
>
<table
style="table-layout: auto;"
>
<colgroup />
<thead
class="ant-table-thead"
>
<tr>
<th
aria-describedby="DndDescribedBy-5"
aria-disabled="false"
aria-roledescription="sortable"
class="ant-table-cell"
id="0"
role="button"
scope="col"
style="cursor: move;"
tabindex="0"
>
Name
</th>
<th
aria-describedby="DndDescribedBy-5"
aria-disabled="false"
aria-roledescription="sortable"
class="ant-table-cell"
id="1"
role="button"
scope="col"
style="cursor: move;"
tabindex="0"
>
Gender
</th>
<th
aria-describedby="DndDescribedBy-5"
aria-disabled="false"
aria-roledescription="sortable"
class="ant-table-cell"
id="2"
role="button"
scope="col"
style="cursor: move;"
tabindex="0"
>
Age
</th>
<th
aria-describedby="DndDescribedBy-5"
aria-disabled="false"
aria-roledescription="sortable"
class="ant-table-cell"
id="3"
role="button"
scope="col"
style="cursor: move;"
tabindex="0"
>
Email
</th>
<th
aria-describedby="DndDescribedBy-5"
aria-disabled="false"
aria-roledescription="sortable"
class="ant-table-cell"
id="4"
role="button"
scope="col"
style="cursor: move;"
tabindex="0"
>
Address
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
>
<td
class="ant-table-cell"
id="0"
>
John Brown
</td>
<td
class="ant-table-cell"
id="1"
>
male
</td>
<td
class="ant-table-cell"
id="2"
>
32
</td>
<td
class="ant-table-cell"
id="3"
>
John Brown@example.com
</td>
<td
class="ant-table-cell"
id="4"
>
London No. 1 Lake Park
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="2"
>
<td
class="ant-table-cell"
id="0"
>
Jim Green
</td>
<td
class="ant-table-cell"
id="1"
>
female
</td>
<td
class="ant-table-cell"
id="2"
>
42
</td>
<td
class="ant-table-cell"
id="3"
>
jimGreen@example.com
</td>
<td
class="ant-table-cell"
id="4"
>
London No. 1 Lake Park
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="3"
>
<td
class="ant-table-cell"
id="0"
>
Joe Black
</td>
<td
class="ant-table-cell"
id="1"
>
female
</td>
<td
class="ant-table-cell"
id="2"
>
32
</td>
<td
class="ant-table-cell"
id="3"
>
JoeBlack@example.com
</td>
<td
class="ant-table-cell"
id="4"
>
Sidney No. 1 Lake Park
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="4"
>
<td
class="ant-table-cell"
id="0"
>
George Hcc
</td>
<td
class="ant-table-cell"
id="1"
>
male
</td>
<td
class="ant-table-cell"
id="2"
>
20
</td>
<td
class="ant-table-cell"
id="3"
>
george@example.com
</td>
<td
class="ant-table-cell"
id="4"
>
Sidney No. 1 Lake Park
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<ul
class="ant-pagination ant-table-pagination ant-table-pagination-right"
>
<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>,
<div
id="DndDescribedBy-5"
style="display: none;"
>
To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.
</div>,
<div
aria-atomic="true"
aria-live="assertive"
id="DndLiveRegion-5"
role="status"
style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
/>,
]
`;

exports[`renders components/table/demo/drag-column-sorting.tsx extend context correctly 2`] = `[]`;

exports[`renders components/table/demo/drag-sorting.tsx extend context correctly 1`] = `
Array [
<div
Expand Down

0 comments on commit 786dfc0

Please sign in to comment.