table: frozen columns #1720

ChrisLaneAU · 2024-07-19T03:10:32Z

Adds support for frozen columns in tables. Also fixes the caption so that it doesn't scroll horizontally as the table is scrolled.

View preview

Scroll far left:

Scroll middle:

Scroll far right:

Small screens (below medium breakpoint using container queries):

Checklist

Preflight

Prefix the PR title with the slug of the package or component - e.g. accordion: Updated padding or docs: Updated header links
Describe the changes clearly in the PR description
Read and check your code before tagging someone for review
Create a changeset file by running yarn changeset. Learn more about change management.

Testing

Manually test component in various modern browsers at various sizes (use Browserstack)
Manually test component in various devices (phone, tablet, desktop)
Manually test component using a keyboard
Manually test component using a screen reader
Manually tested in dark mode
Component meets Web Content Accessibility Guidelines (WCAG) 2.1 standards
Add any necessary unit tests (HTML validation, snapshots etc)
Run yarn test to ensure tests are passing. If required, run yarn test -u to update any generated snapshots.

Documentation

Create or update documentation on the website
Create or update stories for Storybook
Create or update stories for Playroom snippets

changeset-bot · 2024-07-19T03:10:35Z

🦋 Changeset detected

Latest commit: 5d533df

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@ag.ds-next/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

ChrisLaneAU · 2024-07-19T03:20:22Z

packages/react/src/table/Table.tsx

 import { TableContext } from './TableContext';
+import { useScrollerContext } from './ScrollerContext';
+
+const MAX_FIXED_COLUMNS_FROM_LEFT = 1;


This allows us to use a future-proof API of frozenColumns?: number[]; instead of something like isFirstColFrozen, isLastColFrozen.

ChrisLaneAU · 2024-07-19T03:29:48Z

packages/react/src/table/TableRow.tsx

+			return {
+				[minContainerBreakpointForFrozenColumns]: {
+					...acc[minContainerBreakpointForFrozenColumns],
+					[`& :nth-child(${columnNumber}):where(td, th)`]: {


Emotion complains about nth-child but it seems fine as no style tags are inserted and the component can't be customised.

ChrisLaneAU · 2024-07-19T03:32:46Z

packages/react/src/table/TableScroller.tsx

-			css={{
-				position: 'relative',
-				width: '100%',
+		<ScrollerContext.Provider


A lot of the changes in this file are just due to this context wrapper.

github-actions · 2024-07-19T04:19:55Z

PR Preview Action v1.4.7
🚀 Deployed preview to https://agriculturegovau.github.io/agds-next/pr-preview/pr-1720/
on branch `gh-pages` at 2024-07-30 07:01 UTC

…xtra stories for single frozen columns

ChrisLaneAU · 2024-07-21T23:35:09Z

packages/react/src/table/ScrollerContext.tsx

+		throw Error(
+			'ScrollerContext not found. If using a Table, ensure it is wrapped with <TableWrapper>.'
+		);


I'm a little concerned by this because I'm not confident that all consumers are currently using the <TableWrapper> 🤔

Yep, have just checked and it's not always used…

packages/react/src/table/TableScroller.tsx

stowball · 2024-07-24T06:12:59Z

packages/react/src/table/TableScroller.tsx

@@ -23,6 +32,8 @@ export function TableScroller({ children }: TableScrollerProps) {
 	const [thumbPosition, setThumbPosition] = useState(0);
 	const [thumbWidthRatio, setThumbWidthRatio] = useState(0);


Not your doing, but just noticed lots of flash of scrollbars disappearing on mount, so we should assume that it doesn't have scrollbars until it does. Might even be worth adding a comment to that effect

Suggested change

const [thumbWidthRatio, setThumbWidthRatio] = useState(0);

const [thumbWidthRatio, setThumbWidthRatio] = useState(1);

Yeah ok, I'll look into this. Knowing not everyone has the TableWrapper, I think we'll need a different approach to this scrollbar + overlay with frozen columns functionality.

I was thinking that scrollbar should still just be in TableWrapper, so that way, people who use it get the benefits of the scrollbar and those that don't, don't, but they may have their own solution or none is needed.

The other stuff should be moved out though.

If this isn't technically possible, then we'll have to revert TableWrapper to what it used to be and move the scroller elsehwere

Yeah, the scrollbar needs the overlay according to our designs. The overlay doesn't need x-axis offsets if there's no frozen columns. So, I think it'll be all fine to do that part. If we can put the scroller inside the Table, then we don't need the extra context I added. Just need to look into it more.

stowball · 2024-07-25T03:31:43Z

packages/react/src/table/TableScroller.tsx

+									background: boxPalette.borderMuted,
+									width: '1px',


I don't think we should be applying this border if there are no frozen columns

Why is that? Doesn't it signify the hard edge of scroll, as opposed to the frozen column?

I don't think so. I think it only signifies the edge of a fixed column that isn't scrolled. The table should keep its "blank" edges in its normal 0 or fully scrolled states

stowball · 2024-07-25T03:32:24Z

packages/react/src/table/TableScroller.tsx

+									background: boxPalette.borderMuted,
+									width: '1px',


As above, I don't think this should be applied if the column isn't frozen

stowball · 2024-07-25T03:34:32Z

packages/react/src/table/TableScroller.tsx

+						...(scrollerHeight && { height: `${scrollerHeight / 16}rem` }),
+
+						// Switch between single line at full scroll and overlay shadow at partial scroll
+						...(scrollerRef.current?.scrollLeft === 0


We should transition these shadows so they don't appear abruptly

transition overlays

stowball · 2024-07-25T03:47:37Z

I haven't reviewed the code yet, but it does all seem to function remarkably well 💪

sonarcloud · 2024-07-30T06:57:34Z

Quality Gate failed

Failed conditions
30.1% Duplication on New Code (required ≤ 30%)

See analysis details on SonarCloud

ChrisLaneAU added 2 commits July 19, 2024 12:54

table: fixed columns

199af4b

Tests

015a4d5

ChrisLaneAU self-assigned this Jul 19, 2024

ChrisLaneAU changed the title ~~Table fixed columns~~ table: fixed columns Jul 19, 2024

Changeset

63c5b38

ChrisLaneAU commented Jul 19, 2024

View reviewed changes

ChrisLaneAU changed the title ~~table: fixed columns~~ table: frozen columns Jul 19, 2024

ChrisLaneAU added 2 commits July 19, 2024 13:22

Typo

a88130a

Remove TODO

e2a7b2a

ChrisLaneAU commented Jul 19, 2024

View reviewed changes

Add missing TableWrapper

a434ff1

ChrisLaneAU marked this pull request as ready for review July 19, 2024 03:44

Fixes

a24af8f

ChrisLaneAU requested a review from stowball July 19, 2024 04:20

ChrisLaneAU added 2 commits July 19, 2024 18:13

Fix safari overscroll, enable scroll overlays on small screens, add e…

cd3ddd8

…xtra stories for single frozen columns

Snaps

5416f75

ChrisLaneAU commented Jul 21, 2024

View reviewed changes

ChrisLaneAU added 2 commits July 22, 2024 10:10

Resize observer

b56daf4

Grab to scroll

f71f5a6

ChrisLaneAU commented Jul 22, 2024

View reviewed changes

packages/react/src/table/TableScroller.tsx Outdated Show resolved Hide resolved

stowball reviewed Jul 22, 2024

View reviewed changes

packages/react/src/table/TableScroller.tsx Outdated Show resolved Hide resolved

No grab, fix vertical scroll

c593a44

stowball reviewed Jul 24, 2024

View reviewed changes

stowball reviewed Jul 25, 2024

View reviewed changes

ChrisLaneAU changed the base branch from main to audit-2024 July 29, 2024 06:58

ChrisLaneAU changed the base branch from audit-2024 to main July 29, 2024 06:59

stowball added 4 commits July 30, 2024 10:46

Merge remote-tracking branch 'origin/main' into table-fixed-columns

28fce49

update snapshots

caa9a29

slightly better selection

1d9ce55

pxToRem. 1 ratio by default

5d533df

stowball marked this pull request as draft September 3, 2024 03:25

stowball changed the base branch from main to develop September 12, 2024 04:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

table: frozen columns #1720

table: frozen columns #1720

ChrisLaneAU commented Jul 19, 2024 •

edited

Loading

changeset-bot bot commented Jul 19, 2024 •

edited

Loading

ChrisLaneAU Jul 19, 2024

ChrisLaneAU Jul 19, 2024

ChrisLaneAU Jul 19, 2024

github-actions bot commented Jul 19, 2024 •

edited

Loading

ChrisLaneAU Jul 21, 2024

stowball Jul 22, 2024

stowball Jul 24, 2024 •

edited

Loading

ChrisLaneAU Jul 24, 2024

stowball Jul 24, 2024

ChrisLaneAU Jul 24, 2024

stowball Jul 25, 2024

ChrisLaneAU Jul 25, 2024

stowball Jul 25, 2024

stowball Jul 25, 2024

stowball Jul 25, 2024

ChrisLaneAU Jul 25, 2024

stowball commented Jul 25, 2024

sonarcloud bot commented Jul 30, 2024

		@@ -23,6 +32,8 @@ export function TableScroller({ children }: TableScrollerProps) {
		const [thumbPosition, setThumbPosition] = useState(0);
		const [thumbWidthRatio, setThumbWidthRatio] = useState(0);

table: frozen columns #1720

Are you sure you want to change the base?

table: frozen columns #1720

Conversation

ChrisLaneAU commented Jul 19, 2024 • edited Loading

Checklist

changeset-bot bot commented Jul 19, 2024 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jul 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stowball Jul 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stowball commented Jul 25, 2024

sonarcloud bot commented Jul 30, 2024

Quality Gate failed

ChrisLaneAU commented Jul 19, 2024 •

edited

Loading

changeset-bot bot commented Jul 19, 2024 •

edited

Loading

github-actions bot commented Jul 19, 2024 •

edited

Loading

stowball Jul 24, 2024 •

edited

Loading