Skip to content
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

table: frozen columns #1720

Draft
wants to merge 16 commits into
base: develop
Choose a base branch
from
Draft

table: frozen columns #1720

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
199af4b
table: fixed columns
ChrisLaneAU Jul 19, 2024
015a4d5
Tests
ChrisLaneAU Jul 19, 2024
63c5b38
Changeset
ChrisLaneAU Jul 19, 2024
a88130a
Typo
ChrisLaneAU Jul 19, 2024
e2a7b2a
Remove TODO
ChrisLaneAU Jul 19, 2024
a434ff1
Add missing TableWrapper
ChrisLaneAU Jul 19, 2024
a24af8f
Fixes
ChrisLaneAU Jul 19, 2024
cd3ddd8
Fix safari overscroll, enable scroll overlays on small screens, add e…
ChrisLaneAU Jul 19, 2024
5416f75
Snaps
ChrisLaneAU Jul 21, 2024
b56daf4
Resize observer
ChrisLaneAU Jul 22, 2024
f71f5a6
Grab to scroll
ChrisLaneAU Jul 22, 2024
c593a44
No grab, fix vertical scroll
ChrisLaneAU Jul 23, 2024
28fce49
Merge remote-tracking branch 'origin/main' into table-fixed-columns
stowball Jul 30, 2024
caa9a29
update snapshots
stowball Jul 30, 2024
1d9ce55
slightly better selection
stowball Jul 30, 2024
5d533df
pxToRem. 1 ratio by default
stowball Jul 30, 2024
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
5 changes: 5 additions & 0 deletions .changeset/lazy-cheetahs-march.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@ag.ds-next/react': minor
---

table: Add support for frozen columns.
98 changes: 51 additions & 47 deletions .storybook/stories/KitchenSink/KitchenSink.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ import {
TableHeader,
TableHead,
TableBody,
TableWrapper,
} from '@ag.ds-next/react/table';
import {
SummaryList,
Expand Down Expand Up @@ -579,53 +580,56 @@ function KitchenSink({ background }: KitchenSinkProps) {
<TextLink href="#">Change all</TextLink>
</Stack>

<Table striped>
<TableCaption>
Population of Australian states and territories, December 2015
</TableCaption>
<TableHead>
<TableRow>
<TableHeader scope="col">Location</TableHeader>
<TableHeader textAlign="right" scope="col">
Population
</TableHeader>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>New South Wales</TableCell>
<TableCell textAlign="right">7,670,700</TableCell>
</TableRow>
<TableRow>
<TableCell>Victoria</TableCell>
<TableCell textAlign="right">5,996,400</TableCell>
</TableRow>
<TableRow>
<TableCell>Queensland</TableCell>
<TableCell textAlign="right">4,808,800</TableCell>
</TableRow>
<TableRow>
<TableCell>Western Australia</TableCell>
<TableCell textAlign="right">2,603,900</TableCell>
</TableRow>
<TableRow>
<TableCell>South Australia</TableCell>
<TableCell textAlign="right">1,702,800</TableCell>
</TableRow>
<TableRow>
<TableCell>Tasmania</TableCell>
<TableCell textAlign="right">517,400</TableCell>
</TableRow>
<TableRow>
<TableCell>Northern Territory</TableCell>
<TableCell textAlign="right">244,400</TableCell>
</TableRow>
<TableRow>
<TableCell>Australian Capital Territory</TableCell>
<TableCell textAlign="right">393,000</TableCell>
</TableRow>
</TableBody>
</Table>
<TableWrapper>
<Table striped>
<TableCaption>
Population of Australian states and territories, December
2015
</TableCaption>
<TableHead>
<TableRow>
<TableHeader scope="col">Location</TableHeader>
<TableHeader textAlign="right" scope="col">
Population
</TableHeader>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>New South Wales</TableCell>
<TableCell textAlign="right">7,670,700</TableCell>
</TableRow>
<TableRow>
<TableCell>Victoria</TableCell>
<TableCell textAlign="right">5,996,400</TableCell>
</TableRow>
<TableRow>
<TableCell>Queensland</TableCell>
<TableCell textAlign="right">4,808,800</TableCell>
</TableRow>
<TableRow>
<TableCell>Western Australia</TableCell>
<TableCell textAlign="right">2,603,900</TableCell>
</TableRow>
<TableRow>
<TableCell>South Australia</TableCell>
<TableCell textAlign="right">1,702,800</TableCell>
</TableRow>
<TableRow>
<TableCell>Tasmania</TableCell>
<TableCell textAlign="right">517,400</TableCell>
</TableRow>
<TableRow>
<TableCell>Northern Territory</TableCell>
<TableCell textAlign="right">244,400</TableCell>
</TableRow>
<TableRow>
<TableCell>Australian Capital Territory</TableCell>
<TableCell textAlign="right">393,000</TableCell>
</TableRow>
</TableBody>
</Table>
</TableWrapper>
</Stack>
</Column>
</Columns>
Expand Down
151 changes: 77 additions & 74 deletions docs/components/ComponentPropsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
TableCell,
TableCaption,
TableRow,
TableWrapper,
} from '@ag.ds-next/react/table';
import { Stack } from '@ag.ds-next/react/stack';
import { Text } from '@ag.ds-next/react/text';
Expand All @@ -29,82 +30,84 @@ export type ComponentPropsTableProps = {
};

export const ComponentPropsTable = ({ data }: ComponentPropsTableProps) => (
<Table striped>
<TableCaption>{data.displayName} Props</TableCaption>
<TableHead>
<TableRow>
<TableHeader scope="col" width="25%">
Prop
</TableHeader>
<TableHeader scope="col" width="35%">
Type
</TableHeader>
<TableHeader scope="col" width="40%">
Description
</TableHeader>
</TableRow>
</TableHead>
<TableBody>
{Object.values(data.props).map((prop) => {
let defaultValue = prop.defaultValue?.value;
<TableWrapper>
<Table striped>
<TableCaption>{data.displayName} Props</TableCaption>
<TableHead>
<TableRow>
<TableHeader scope="col" width="25%">
Prop
</TableHeader>
<TableHeader scope="col" width="35%">
Type
</TableHeader>
<TableHeader scope="col" width="40%">
Description
</TableHeader>
</TableRow>
</TableHead>
<TableBody>
{Object.values(data.props).map((prop) => {
let defaultValue = prop.defaultValue?.value;

if (defaultValue) {
if (
prop.type.name === 'boolean' ||
prop.type.name === 'number' ||
(typeof defaultValue === 'string' && defaultValue.startsWith('['))
) {
// Do nothing
} else if (
typeof defaultValue === 'string' &&
defaultValue.startsWith('{')
) {
defaultValue = defaultValue
.replace(/\n/g, '')
.replace(/\t/g, ' ')
.replace(/, \}/, ' }');
} else {
defaultValue = JSON.stringify(defaultValue);
if (defaultValue) {
if (
prop.type.name === 'boolean' ||
prop.type.name === 'number' ||
(typeof defaultValue === 'string' && defaultValue.startsWith('['))
) {
// Do nothing
} else if (
typeof defaultValue === 'string' &&
defaultValue.startsWith('{')
) {
defaultValue = defaultValue
.replace(/\n/g, '')
.replace(/\t/g, ' ')
.replace(/, \}/, ' }');
} else {
defaultValue = JSON.stringify(defaultValue);
}
}
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_description, desc, _see, url] =
prop.description.match(/^(.*?)(\n?@see\s+)?(https?:\/\/\S+)?$/m) ||
[];
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_description, desc, _see, url] =
prop.description.match(/^(.*?)(\n?@see\s+)?(https?:\/\/\S+)?$/m) ||
[];

return (
<TableRow key={prop.name}>
<TableCell>
<span css={{ wordBreak: 'break-word' }}>
{prop.name}
{prop.required ? '' : '?'}
</span>
</TableCell>
<TableCell>
<span css={{ wordBreak: 'break-word' }}>
{prop.type.name}
{defaultValue ? (
<span css={{ display: 'block', whiteSpace: 'pre-wrap' }}>
<strong>Default: </strong>
{String(defaultValue)}
</span>
) : null}
</span>
</TableCell>
<TableCell>
<Stack css={{ wordBreak: 'break-word' }} gap={0.25}>
{desc}
{url ? (
<Text fontSize="xs">
<TextLink href={url}>{url}</TextLink>
</Text>
) : null}
</Stack>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
return (
<TableRow key={prop.name}>
<TableCell>
<span css={{ wordBreak: 'break-word' }}>
{prop.name}
{prop.required ? '' : '?'}
</span>
</TableCell>
<TableCell>
<span css={{ wordBreak: 'break-word' }}>
{prop.type.name}
{defaultValue ? (
<span css={{ display: 'block', whiteSpace: 'pre-wrap' }}>
<strong>Default: </strong>
{String(defaultValue)}
</span>
) : null}
</span>
</TableCell>
<TableCell>
<Stack css={{ wordBreak: 'break-word' }} gap={0.25}>
{desc}
{url ? (
<Text fontSize="xs">
<TextLink href={url}>{url}</TextLink>
</Text>
) : null}
</Stack>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableWrapper>
);
29 changes: 29 additions & 0 deletions packages/react/src/table/ScrollerContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { createContext, Dispatch, SetStateAction, useContext } from 'react';

type OverlayOffsets = {
bottom?: 0 | `${number}rem`;
left?: 0 | `${number}rem`;
right?: 0 | `${number}rem`;
top?: 0 | `${number}rem`;
};

export type ScrollerContextType = {
setOverlayOffsets?: Dispatch<SetStateAction<OverlayOffsets | undefined>>;
overlayOffsets?: OverlayOffsets;
};

export const ScrollerContext = createContext<ScrollerContextType | undefined>(
undefined
);

export function useScrollerContext() {
const context = useContext(ScrollerContext);

if (typeof context === 'undefined') {
throw Error(
'ScrollerContext not found. If using a Table, ensure it is wrapped with <TableWrapper>.'
);
Comment on lines +23 to +25
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

}

return context;
}
Loading
Loading