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 number Diff line number Diff 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 number Diff line number Diff 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 number Diff line number Diff 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 number Diff line number Diff 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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