Skip to content

Commit

Permalink
feat: Table support stack fixed columns (#47245)
Browse files Browse the repository at this point in the history 
* chore: update deps

* feat: style of it

* test: update test case

* chore: adjust size limit
  • Loading branch information
@zombieJ
zombieJ committed Jan 31, 2024
1 parent 651914c commit cbea5a5
Show file tree
Hide file tree
Showing 9 changed files with 768 additions and 2 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,4 @@ __image_snapshots__/

.eslintcache
.node-version
.node
341 changes: 341 additions & 0 deletions components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12939,6 +12939,347 @@ exports[`renders components/table/demo/fixed-columns-header.tsx extend context c

exports[`renders components/table/demo/fixed-columns-header.tsx extend context correctly 2`] = `[]`;

exports[`renders components/table/demo/fixed-gapped-columns.tsx extend context correctly 1`] = `
<div
class="ant-table-wrapper"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-table ant-table-bordered ant-table-fixed-column ant-table-fixed-column-gapped ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
style="overflow-x: auto; overflow-y: hidden;"
>
<table
style="width: 1300px; min-width: 100%; table-layout: fixed;"
>
<colgroup>
<col
style="width: 100px;"
/>
<col
style="width: 100px;"
/>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col
style="width: 90px;"
/>
<col
style="width: 90px;"
/>
<col
style="width: 90px;"
/>
</colgroup>
<thead
class="ant-table-thead"
>
<tr>
<th
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
scope="col"
style="position: sticky; left: 0px;"
>
Full Name
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
<th
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
scope="col"
style="position: sticky; left: 0px;"
>
Column 1
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 2
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 3
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 4
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 5
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 6
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 7
</th>
<th
class="ant-table-cell"
scope="col"
>
Column 8
</th>
<th
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
scope="col"
style="position: sticky; right: 0px;"
>
Action 1
</th>
<th
class="ant-table-cell"
scope="col"
>
Action 2
</th>
<th
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
scope="col"
style="position: sticky; right: 0px;"
>
Action 3
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height: 0px; font-size: 0px;"
>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>
</div>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
>
<td
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
John Brown
</td>
<td
class="ant-table-cell"
>
32
</td>
<td
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
New York Park
</td>
<td
class="ant-table-cell"
>
New York Park
</td>
<td
class="ant-table-cell"
>
New York Park
</td>
<td
class="ant-table-cell"
>
New York Park
</td>
<td
class="ant-table-cell"
>
New York Park
</td>
<td
class="ant-table-cell"
>
New York Park
</td>
<td
class="ant-table-cell"
>
New York Park
</td>
<td
class="ant-table-cell"
>
New York Park
</td>
<td
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
style="position: sticky; right: 0px;"
>
<a>
action
</a>
</td>
<td
class="ant-table-cell"
>
<a>
action
</a>
</td>
<td
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
style="position: sticky; right: 0px;"
>
<a>
action
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
`;

exports[`renders components/table/demo/fixed-gapped-columns.tsx extend context correctly 2`] = `[]`;

exports[`renders components/table/demo/fixed-header.tsx extend context correctly 1`] = `
<div
class="ant-table-wrapper"
Expand Down

0 comments on commit cbea5a5

Please sign in to comment.