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/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 (
+
+ {index === 0 ? : }
+ |
+ );
+ })
+ }
+
+
+
+ {
+ Array(2).fill(0).map((_, row) => {
+ return (
+
+ {
+ Array(3).fill(0).map((__, col) => {
+ return (
+
+ {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 (
+
+
+ {
+ index === 0
+ ?
+ :
+ }
+
+ |
+ );
+ })
+ }
+
+
+
+ {
+ Array(10).fill(0).map((_, row) => {
+ return (
+
+ {
+ Array(numberOfColumns).fill(0).map((__, col) => {
+ return (
+
+ {
+ 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