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 && (