diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts index 2cf8d5f..26b6f18 100644 --- a/client/constants/Pattern.ts +++ b/client/constants/Pattern.ts @@ -66,6 +66,7 @@ enum Pattern { StickyFooter = 'Sticky footer', StickyHeader = 'Sticky header', StickySections = 'Sticky sections', + StickyTableColumn = 'Sticky table column', StickyTableHeaders = 'Sticky table headers', Switch = 'Switch', Tab = 'Tab', diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx index a3ad273..b7966af 100644 --- a/client/pages/ExplorePage.tsx +++ b/client/pages/ExplorePage.tsx @@ -168,6 +168,7 @@ const ExplorePage = () => { + diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx index fb8a09d..ad51a09 100644 --- a/client/patterns/stepper-input/Details.tsx +++ b/client/patterns/stepper-input/Details.tsx @@ -10,9 +10,9 @@ const Details: React.FC<{}> = () => { const [value, setValue] = useState(0); const decrease = () => setValue(value - 1); const increase = () => setValue(value + 1); - const change = (e: React.ChangeEvent) => { - const value = parseInt(e.target.value, 10); - const newValue = isNaN(value) ? 0 : value; + const change = (e: React.ChangeEvent) => { + const v = parseInt(e.target.value, 10); + const newValue = isNaN(v) ? 0 : v; setValue(newValue); }; diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx index 8266d5e..6ea9e96 100644 --- a/client/patterns/sticky-header/Details.tsx +++ b/client/patterns/sticky-header/Details.tsx @@ -43,6 +43,7 @@ const Details: React.FC<{}> = () => { source={`
@@ -56,7 +57,11 @@ const Details: React.FC<{}> = () => { />
- + ); }; diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx index 241a9f2..5c4b80a 100644 --- a/client/patterns/sticky-sections/Details.tsx +++ b/client/patterns/sticky-sections/Details.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Helmet } from 'react-helmet'; +import RelatedPatterns from '../../components/RelatedPatterns'; +import Pattern from '../../constants/Pattern'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -62,7 +64,7 @@ const Details: React.FC<{}> = () => { height: 100%; width: 100%; - /* Stick at the top */ + /* Stick to the top */ position: sticky; top: 0; "> @@ -75,6 +77,8 @@ const Details: React.FC<{}> = () => { `} /> + + ); }; diff --git a/client/patterns/sticky-table-column/Cover.tsx b/client/patterns/sticky-table-column/Cover.tsx new file mode 100644 index 0000000..cb55f08 --- /dev/null +++ b/client/patterns/sticky-table-column/Cover.tsx @@ -0,0 +1,77 @@ +import React from 'react'; + +import Frame from '../../placeholders/Frame'; +import Line from '../../placeholders/Line'; +import Rectangle from '../../placeholders/Rectangle'; + +const Cover: React.FC<{}> = () => { + return ( + +
+ + + + { + Array(3).fill(0).map((_, index) => { + return ( + + ); + }) + } + + + + { + Array(2).fill(0).map((_, row) => { + return ( + + { + Array(3).fill(0).map((__, col) => { + return ( + + ); + }) + } + + ); + }) + } + +
+ {index === 0 ? : } +
+ {col === 0 ? : } +
+
+ + ); +}; + +export default Cover; diff --git a/client/patterns/sticky-table-column/Details.tsx b/client/patterns/sticky-table-column/Details.tsx new file mode 100644 index 0000000..de6f2ea --- /dev/null +++ b/client/patterns/sticky-table-column/Details.tsx @@ -0,0 +1,151 @@ +// tslint:disable:prefer-object-spread +import React from 'react'; +import { Helmet } from 'react-helmet'; + +import RelatedPatterns from '../../components/RelatedPatterns'; +import Pattern from '../../constants/Pattern'; +import DetailsLayout from '../../layouts/DetailsLayout'; +import Block from '../../placeholders/Block'; +import BrowserFrame from '../../placeholders/BrowserFrame'; +import Rectangle from '../../placeholders/Rectangle'; + +const Details: React.FC<{}> = () => { + const numberOfColumns = 10; + return ( + + + + + +
+
+ Try to scroll the main content of table horizontally to see the first column sticks to the left. +
+ +
+ + + + { + Array(numberOfColumns).fill(0).map((_, index) => { + return ( + + ); + }) + } + + + + { + Array(10).fill(0).map((_, row) => { + return ( + + { + Array(numberOfColumns).fill(0).map((__, col) => { + return ( + + ); + }) + } + + ); + }) + } + +
+
+ { + index === 0 + ? + : + } +
+
+ { + col === 0 + ? + : + } +
+
+
+ )} + source={` + + + + + + + + + + +
+ ... +
+`} + /> + + + + + ); +}; + +export default Details; diff --git a/client/patterns/sticky-table-headers/Details.tsx b/client/patterns/sticky-table-headers/Details.tsx index c13ef25..2443049 100644 --- a/client/patterns/sticky-table-headers/Details.tsx +++ b/client/patterns/sticky-table-headers/Details.tsx @@ -45,7 +45,7 @@ const Details: React.FC<{}> = () => { width: '100%', }} > - + { Array(3).fill(0).map((_, index) => { @@ -98,9 +98,9 @@ const Details: React.FC<{}> = () => { /* Background color */ background-color: #ddd; - /* Sticky to the top */ + /* Stick to the top */ position: sticky; - top: 0px; + top: 0; /* Displayed on top of other rows when scrolling */ z-index: 9999; @@ -118,7 +118,11 @@ const Details: React.FC<{}> = () => { /> - + ); }; diff --git a/public/sitemap.xml b/public/sitemap.xml index dd05075..fe438a9 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -67,6 +67,7 @@ https://csslayout.io/patterns/sticky-footer https://csslayout.io/patterns/sticky-header https://csslayout.io/patterns/sticky-sections + https://csslayout.io/patterns/sticky-table-column https://csslayout.io/patterns/sticky-table-headers https://csslayout.io/patterns/switch https://csslayout.io/patterns/tab