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.

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: Add ability to specify sticky columns #1395

Merged
merged 19 commits into from
Apr 7, 2021
Prev Previous commit
Next Next commit
Tests
  • Loading branch information
ayeshakmaz committed Apr 1, 2021
commit 0a2e815907e39c53ac1822fe0bd5d43bf4c60429
4 changes: 4 additions & 0 deletions packages/gestalt/src/Table.css.flow
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
// @flow strict
/* This file is automatically generated by css-modules-flow-types */
declare module.exports: {|
+'columnSticky': string,
+'columnStickyShadow': string,
+'horizontalScrollLeft': string,
+'horizontalScrollRight': string,
+'hoverShadeGray': string,
+'sticky': string,
+'table': string,
4 changes: 2 additions & 2 deletions packages/gestalt/src/Table.js
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ type Props = {|
export default function Table(props: Props): Node {
const { borderStyle, children, maxHeight, stickyColumns } = props;
const [showShadowScroll, setShowShadowScroll] = useState(null);
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think Flow will be able to properly infer the type here, so you may want to add it. Looks like it's an optional enum? ?('left' | 'right')

Copy link
Contributor

Choose a reason for hiding this comment

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

image

Copy link
Contributor

@AlbertCarreras AlbertCarreras Apr 6, 2021

Choose a reason for hiding this comment

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

nit, I think ryan was suggesting here useState<('left' | 'right'| null)>(null)

const contentRef = useRef<?HTMLDivElement>(null);
const contentRef = useRef<?HTMLElement>(null);

const updateShadows = useCallback(() => {
const target = contentRef.current;
@@ -43,7 +43,7 @@ export default function Table(props: Props): Node {
const target = contentRef.current;
target?.addEventListener('scroll', updateShadows);
return () => {
target.removeEventListener('scroll', updateShadows);
target?.removeEventListener('scroll', updateShadows);
};
}, [updateShadows]);

2 changes: 1 addition & 1 deletion packages/gestalt/src/TableContextProvider.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
import { createContext, type Context } from 'react';

type TableContextType = {|
stickyColumns?: number,
stickyColumns?: ?number,
|};

const initialState = {