From e8b09d8a1454c5d1b470094660471c101ce0e9ad Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 26 Dec 2019 21:23:46 +0700
Subject: [PATCH] Add sticky table headers

---
 client/constants/Pattern.ts                   |   1 +
 client/pages/ExplorePage.tsx                  |   1 +
 client/patterns/sticky-header/Details.tsx     |   6 +-
 .../patterns/sticky-table-headers/Cover.tsx   |  65 +++++++++
 .../patterns/sticky-table-headers/Details.tsx | 126 ++++++++++++++++++
 public/sitemap.xml                            |   1 +
 6 files changed, 199 insertions(+), 1 deletion(-)
 create mode 100644 client/patterns/sticky-table-headers/Cover.tsx
 create mode 100644 client/patterns/sticky-table-headers/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index e1e27e5..2cf8d5f 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',
+    StickyTableHeaders = 'Sticky table headers',
     Switch = 'Switch',
     Tab = 'Tab',
     Timeline = 'Timeline',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 1496eb9..a3ad273 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -168,6 +168,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Ribbon} />
                         <CoverCard pattern={Pattern.Separator} />
                         <CoverCard pattern={Pattern.StackedCards} />
+                        <CoverCard pattern={Pattern.StickyTableHeaders} />
                         <CoverCard pattern={Pattern.Timeline} />
                         <CoverCard pattern={Pattern.VideoBackground} />
                     </div>
diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx
index 7605eaa..8266d5e 100644
--- a/client/patterns/sticky-header/Details.tsx
+++ b/client/patterns/sticky-header/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 Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -11,7 +13,7 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout title="Sticky header">
             <Helmet>
                 <meta name="description" content="Create a sticky header with CSS" />
-                <meta name="keywords" content="css layout, css sticky, css sticky header" />
+                <meta name="keywords" content="css layout, css position sticky, css sticky header" />
             </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
@@ -53,6 +55,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.StickyTableHeaders]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/sticky-table-headers/Cover.tsx b/client/patterns/sticky-table-headers/Cover.tsx
new file mode 100644
index 0000000..00c0c9b
--- /dev/null
+++ b/client/patterns/sticky-table-headers/Cover.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <table
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderCollapse: 'collapse',
+                        width: '100%',
+                    }}
+                >
+                    <thead style={{ backgroundColor: 'rgba(0, 0, 0, 0.1)' }}>
+                        <tr>
+                            {
+                                Array(3).fill(0).map((_, index) => {
+                                    return (
+                                        <th key={index} style={{ padding: '6px 4px' }}>
+                                            <Rectangle />
+                                        </th>
+                                    );
+                                })
+                            }
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            Array(3).fill(0).map((_, row) => {
+                                return (
+                                    <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                                        {
+                                            Array(3).fill(0).map((__, col) => {
+                                                return (
+                                                    <td key={col} style={{ padding: '6px 4px' }}>
+                                                        <Line />
+                                                    </td>
+                                                );
+                                            })
+                                        }
+                                    </tr>
+                                );
+                            })
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/sticky-table-headers/Details.tsx b/client/patterns/sticky-table-headers/Details.tsx
new file mode 100644
index 0000000..c13ef25
--- /dev/null
+++ b/client/patterns/sticky-table-headers/Details.tsx
@@ -0,0 +1,126 @@
+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<{}> = () => {
+    return (
+        <DetailsLayout title="Sticky table headers">
+            <Helmet>
+                <meta name="description" content="Create sticky table headers with CSS" />
+                <meta name="keywords" content="css position sticky, css sticky table headers" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    Try to scroll the main content of table to see the header sticks to the top.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '400px',
+                                    overflow: 'auto',
+                                    width: '60%',
+                                }}
+                            >
+                                <table
+                                    style={{
+                                        borderCollapse: 'collapse',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <thead style={{  }}>
+                                        <tr>
+                                            {
+                                                Array(3).fill(0).map((_, index) => {
+                                                    return (
+                                                        <th
+                                                            key={index}
+                                                            style={{
+                                                                backgroundColor: '#ddd',
+                                                                padding: '16px',
+                                                                position: 'sticky',
+                                                                top: 0,
+                                                                zIndex: 9999,
+                                                            }}
+                                                        >
+                                                            <Rectangle />
+                                                        </th>
+                                                    );
+                                                })
+                                            }
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {
+                                            Array(10).fill(0).map((_, row) => {
+                                                return (
+                                                    <tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
+                                                        {
+                                                            Array(3).fill(0).map((__, col) => {
+                                                                return (
+                                                                    <td key={col} style={{ padding: '16px' }}>
+                                                                        <Block numberOfBlocks={3} />
+                                                                    </td>
+                                                                );
+                                                            })
+                                                        }
+                                                    </tr>
+                                                );
+                                            })
+                                        }
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<table>
+    <thead>
+        <tr>
+            <th style="
+                /* Background color */
+                background-color: #ddd;
+
+                /* Sticky to the top */
+                position: sticky;
+                top: 0px;
+
+                /* Displayed on top of other rows when scrolling */
+                z-index: 9999;
+            ">
+                ...
+            </th>
+
+            <!-- Repeat other header column ... -->
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.StickyHeader]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 0ce492d..dd05075 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -67,6 +67,7 @@
     <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-sections</loc></url>
+    <url><loc>https://csslayout.io/patterns/sticky-table-headers</loc></url>
     <url><loc>https://csslayout.io/patterns/switch</loc></url>
     <url><loc>https://csslayout.io/patterns/tab</loc></url>
     <url><loc>https://csslayout.io/patterns/timeline</loc></url>