Skip to content

chore: only add when sticky#1251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 1 commit into from
Mar 11, 2025
Merged

chore: only add when sticky #1251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions src/Table.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -762,6 +762,15 @@ function Table<RecordType extends DefaultRecordType>(
);
}

const tableStyle = {
...style,
};

// Add css var for sticky header `zIndex` calc
if (isSticky) {
tableStyle['--columns-count'] = flattenColumns.length;
}

let fullTable = (
<div
className={classNames(prefixCls, className, {
Expand All@@ -778,12 +787,7 @@ function Table<RecordType extends DefaultRecordType>(
[`${prefixCls}-has-fix-start`]: flattenColumns[0]?.fixed,
[`${prefixCls}-has-fix-end`]: flattenColumns[flattenColumns.length - 1]?.fixed === 'end',
})}
style={
{
...style,
'--columns-count': flattenColumns.length,
} as React.CSSProperties
}
style={tableStyle}
id={id}
ref={fullTableRef}
{...dataProps}
Expand Down
9 changes: 0 additions & 9 deletions tests/__snapshots__/ExpandRow.spec.jsx.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,6 @@
exports[`Table.Expand > childrenColumnName 1`] = `
<div
class="rc-table"
style="--columns-count: 2;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -109,7 +108,6 @@ exports[`Table.Expand > childrenColumnName 1`] = `
exports[`Table.Expand > does not crash if scroll is not set 1`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
style="--columns-count: 3;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -232,7 +230,6 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
exports[`Table.Expand > does not crash if scroll is not set 2`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
style="--columns-count: 3;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -355,7 +352,6 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
exports[`Table.Expand > not use nest when children is invalidate 1`] = `
<div
class="rc-table"
style="--columns-count: 2;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -443,7 +439,6 @@ exports[`Table.Expand > not use nest when children is invalidate 1`] = `
exports[`Table.Expand > renders fixed column correctly > work 1`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
style="--columns-count: 4;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -639,7 +634,6 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
exports[`Table.Expand > renders tree row correctly 1`] = `
<div
class="rc-table"
style="--columns-count: 2;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -745,7 +739,6 @@ exports[`Table.Expand > renders tree row correctly 1`] = `
exports[`Table.Expand > renders tree row correctly with different children 1`] = `
<div
class="rc-table"
style="--columns-count: 2;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -914,7 +907,6 @@ exports[`Table.Expand > renders tree row correctly with different children 1`] =
exports[`Table.Expand > work in expandable fix 1`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
style="--columns-count: 3;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -1037,7 +1029,6 @@ exports[`Table.Expand > work in expandable fix 1`] = `
exports[`Table.Expand > work in expandable fix 2`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal"
style="--columns-count: 4;"
>
<div
class="rc-table-container"
Expand Down
5 changes: 0 additions & 5 deletions tests/__snapshots__/FixedColumn.spec.tsx.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,6 @@
exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
<div
class="rc-table rc-table-rtl rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
style="--columns-count: 12;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -795,7 +794,6 @@ exports[`Table.FixedColumn > renders correctly > all column has width should use
exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
style="--columns-count: 12;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -1585,7 +1583,6 @@ exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
style="--columns-count: 12;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -1845,7 +1842,6 @@ exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
style="--columns-count: 12;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -2689,7 +2685,6 @@ exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
exports[`Table.FixedColumn > renders correctly > scrollXY - without data 1`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
style="--columns-count: 12;"
>
<div
class="rc-table-container"
Expand Down
13 changes: 0 additions & 13 deletions tests/__snapshots__/Table.spec.jsx.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,7 +11,6 @@ exports[`Table.Basic > columns support JSX condition 1`] = `
exports[`Table.Basic > custom components > renders correctly 1`] = `
<div
class="rc-table"
style="--columns-count: 1;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -78,7 +77,6 @@ exports[`Table.Basic > custom components > renders correctly 1`] = `
exports[`Table.Basic > custom components > renders fixed column and header correctly 1`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
style="--columns-count: 3;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -212,7 +210,6 @@ exports[`Table.Basic > custom components > renders fixed column and header corre
exports[`Table.Basic > custom components > scroll content > with scroll 1`] = `
<div
class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-scroll-horizontal"
style="--columns-count: 2;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -262,7 +259,6 @@ exports[`Table.Basic > custom components > scroll content > with scroll 1`] = `
exports[`Table.Basic > internal api > transformColumns > basic 1`] = `
<div
class="rc-table"
style="--columns-count: 3;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -343,7 +339,6 @@ exports[`Table.Basic > internal api > transformColumns > basic 1`] = `
exports[`Table.Basic > renders colSpan correctly 1`] = `
<div
class="rc-table"
style="--columns-count: 2;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -407,7 +402,6 @@ exports[`Table.Basic > renders colSpan correctly 1`] = `
exports[`Table.Basic > renders correctly > RTL 1`] = `
<div
class="test-prefix test-class-name test-prefix-rtl"
style="--columns-count: 1;"
>
<div
class="test-prefix-container"
Expand DownExpand Up@@ -464,7 +458,6 @@ exports[`Table.Basic > renders correctly > RTL 1`] = `
exports[`Table.Basic > renders correctly > basic 1`] = `
<div
class="test-prefix test-class-name"
style="--columns-count: 1;"
>
<div
class="test-prefix-container"
Expand DownExpand Up@@ -521,7 +514,6 @@ exports[`Table.Basic > renders correctly > basic 1`] = `
exports[`Table.Basic > renders correctly > column children undefined 1`] = `
<div
class="rc-table"
style="--columns-count: 2;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -590,7 +582,6 @@ exports[`Table.Basic > renders correctly > column children undefined 1`] = `
exports[`Table.Basic > renders correctly > falsy columns 1`] = `
<div
class="rc-table"
style="--columns-count: 1;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -647,7 +638,6 @@ exports[`Table.Basic > renders correctly > falsy columns 1`] = `
exports[`Table.Basic > renders correctly > no columns 1`] = `
<div
class="rc-table"
style="--columns-count: 1;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -697,7 +687,6 @@ exports[`Table.Basic > renders correctly > no columns 1`] = `
exports[`Table.Basic > renders rowSpan correctly 1`] = `
<div
class="rc-table"
style="--columns-count: 2;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -766,7 +755,6 @@ exports[`Table.Basic > renders rowSpan correctly 1`] = `
exports[`Table.Basic > should get scrollbar size 1`] = `
<div
class="rc-table rc-table-fixed-header"
style="--columns-count: 1;"
>
<div
class="rc-table-container"
Expand DownExpand Up@@ -810,7 +798,6 @@ exports[`Table.Basic > should get scrollbar size 1`] = `
exports[`Table.Basic > syntactic sugar 1`] = `
<div
class="rc-table"
style="--columns-count: 1;"
>
<div
class="rc-table-container"
Expand Down