diff --git a/.gitignore b/.gitignore
index 5875388016e..10df83721f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ yarn-error.log
lerna-debug.log
/temp
*.tsbuildinfo
+.DS_Store
.pnp.*
.yarn/*
diff --git a/packages/main/src/components/AnalyticalTable/docs/AnalyticalTableHooks.stories.tsx b/packages/main/src/components/AnalyticalTable/docs/AnalyticalTableHooks.stories.tsx
index 01fefc70f09..e7d55f021ea 100644
--- a/packages/main/src/components/AnalyticalTable/docs/AnalyticalTableHooks.stories.tsx
+++ b/packages/main/src/components/AnalyticalTable/docs/AnalyticalTableHooks.stories.tsx
@@ -380,10 +380,10 @@ export const F2CellEdit: Story = {
// Wide columns force horizontal overflow so the frozen-start columns visibly stay pinned while scrolling.
const stickyColumns: AnalyticalTableColumnDefinition[] = [
- { Header: 'Name', accessor: 'name', sticky: 'start', width: 200 },
- { Header: 'Age', accessor: 'age', width: 300 },
- { Header: 'Friend Name', accessor: 'friend.name', width: 300 },
- { Header: 'Friend Age', accessor: 'friend.age', width: 300 },
+ { Header: 'Name', accessor: 'name', sticky: 'start', width: 300 },
+ { Header: 'Age', accessor: 'age', width: 500 },
+ { Header: 'Friend Name', accessor: 'friend.name', width: 1000 },
+ { Header: 'Friend Age', accessor: 'friend.age', width: 500 },
];
export const StickyColumns: Story = {
diff --git a/packages/main/src/components/AnalyticalTable/docs/PluginStickyColumns.mdx b/packages/main/src/components/AnalyticalTable/docs/PluginStickyColumns.mdx
index 14bdae0b1c5..c5ffe163414 100644
--- a/packages/main/src/components/AnalyticalTable/docs/PluginStickyColumns.mdx
+++ b/packages/main/src/components/AnalyticalTable/docs/PluginStickyColumns.mdx
@@ -49,26 +49,27 @@ The hook accepts an options object with two optional callbacks:
```jsx
-const TableComponent = (props) => {
- const handleStickyColumnsChange = useCallback((detail) => {
- console.log(detail.column, detail.sticky, detail.stickyColumns);
- }, []);
+const columns = [
+ { Header: 'Name', accessor: 'name', sticky: 'start', width: 300 }, // seeds the initial frozen state
+ { Header: 'Age', accessor: 'age', width: 500 },
+ { Header: 'Friend Name', accessor: 'friend.name', width: 1000 },
+ { Header: 'Friend Age', accessor: 'friend.age', width: 500 },
+];
+const TableComponent = (props) => {
+ // Fired only when a column is frozen/unfrozen via the header popover, not on programmatic toggling.
const tableHooks = useMemo(
- () => [useStickyColumns({ onStickyColumnsChange: handleStickyColumnsChange })],
- [handleStickyColumnsChange],
- );
-
- const columns = useMemo(
() => [
- { Header: 'Name', accessor: 'name', sticky: 'start' }, // seeds the initial frozen state
- { Header: 'Age', accessor: 'age' },
- { Header: 'Friend Name', accessor: 'friend.name', disableSticky: true }, // cannot be frozen via the popover
+ useStickyColumns({
+ onStickyColumnsChange: (detail) => {
+ console.log(detail.column, detail.sticky, detail.stickyColumns);
+ },
+ }),
],
[],
);
- return ;
+ return ;
};
```
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 521e7b47586..306f8160d86 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -752,6 +752,8 @@ const AnalyticalTable = forwardRef totalSize;
+ const showVerticalScrollbar =
+ !nativeScrollbar && !hasStickyColumns && (!!additionalEmptyRowsCount || tableState.isScrollable);
// Sticky mode uses the native vertical scrollbar; reserve its height for the horizontal scrollbar.
const horizontalScrollbarReserved =
hasStickyColumns && scrollbarWidth > 0 && tableState.tableClientWidth > 0 && tableState.tableClientWidth < totalSize
@@ -923,7 +925,7 @@ const AnalyticalTable = forwardRef
@@ -1011,7 +1013,7 @@ const AnalyticalTable = forwardRef
)}
- {!nativeScrollbar && !hasStickyColumns && (additionalEmptyRowsCount || tableState.isScrollable) && (
+ {showVerticalScrollbar && (