Request for Assistance: Creating a Sticky column TableView with Virtualizer

[kguptaping]

🙋 Documentation Request

I am reaching out to seek assistance regarding the creation of a tableView with a virtualizer. Specifically, I am aiming to make the first and last columns of the table sticky. After conducting some research, I couldn't find comprehensive documentation on achieving this task.

I am hopeful that you might be able to provide some guidance or examples on how to implement this functionality effectively. Would it be possible for you to share any relevant examples or resources that could help me achieve this?

🧢 Your Company/Team

No response

[snowystinger]

Are you using RAC or our hooks?

[kguptaping]

I'm using useTableState hook useTable.
Below is the code snippet provided for your reference.

`const columnLayout = useMemo(
() => new TableColumnLayout({
getDefaultWidth,
getDefaultMinWidth,
}),
[getDefaultWidth, getDefaultMinWidth],
);

const layout = useMemo(() => new TableLayout({
// If props.rowHeight is auto,
// then use estimated heights based on scale, otherwise use fixed heights.
rowHeight: props.overflowMode === 'wrap'
? null
: ROW_HEIGHTS[density][scale],
estimatedRowHeight: props.overflowMode === 'wrap'
? ROW_HEIGHTS[density][scale]
: null,
headingHeight: props.overflowMode === 'wrap'
? null
: DEFAULT_HEADER_HEIGHT[scale],
estimatedHeadingHeight: props.overflowMode === 'wrap'
? DEFAULT_HEADER_HEIGHT[scale]
: null,
columnLayout,
initialCollection: state.collection,
}),
// don't recompute when state.collection changes, only used for initial value
// eslint-disable-next-line react-hooks/exhaustive-deps
[props.overflowMode, scale, density, columnLayout],
);

const { gridProps } = useTable({
...props,
isVirtualized: true,
layout,
onRowAction: onAction,
}, state, domRef);
const [headerMenuOpen, setHeaderMenuOpen] = useState(false);`

[snowystinger]

Sorry for brevity of the message. I'm on my phone. But since it appears you're using our virtualizer and table layout, you could start by looking at how we did the checkbox column which is sticky at the front

[kguptaping]

I'm using these links for my references:

• https://reactspectrum.blob.core.windows.net/reactspectrum/6e36fa2807d4c01ba3c191f86dc3820e20d57f02/storybook-17/index.html?path=/story/tableview--static&providerSwitcher-express=false&scrolling=true
• https://opensource.adobe.com/spectrum-web-components/storybook/?path=/story/table-virtualized--virtualized
• https://react-spectrum.adobe.com/react-aria-tailwind-starter/index.html?path=/story/table--example

do you have any other reference, or doc link you can provide for same?

[devongovett]

Sticky columns isn't something we support yet. It would require a lot of work. I think you can't have more than one position:sticky column at a time, and the checkbox column already takes that up. So we'd have to change the DOM structure to group the sticky columns together somehow. That's a lot of work and it isn't in our priorities right now. So it might be difficult to get working. You'll need to play around a bit. If you do get it working, please report back so we can learn from your approach!

[datagutt]

I am only in the need of one sticky column at a time. I am using the Table and virtualizer in about the same way as the latest react-spectrum.
Sticky columns work fine when returning true in isStickyColumn in TableViewLayout, but only as long as the sticky column is visible in the viewport.

From what i can see in the code, the sticky columns are always supposed to be persisted? Has this been tested in cases where there are too many columns to be visible, and the last column is marked as sticky by isStickyColumn?