From ac897c9e63e0cac4f72b6da9d07a4c9b40a25855 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 20 Sep 2022 10:38:49 +0700
Subject: [PATCH] feat: Sticky table column

---
 .../patterns/sticky-table-column.njk          |  11 ++
 contents/index.njk                            |   6 +
 contents/sticky-table-column.md               |  48 ++++++
 pages/sticky-table-column/index.tsx           | 156 ------------------
 patterns/sticky-table-column/Cover.tsx        |  77 ---------
 styles/index.scss                             |   1 +
 styles/patterns/_sticky-table-column.scss     |  25 +++
 7 files changed, 91 insertions(+), 233 deletions(-)
 create mode 100644 contents/_includes/patterns/sticky-table-column.njk
 create mode 100644 contents/sticky-table-column.md
 delete mode 100644 pages/sticky-table-column/index.tsx
 delete mode 100644 patterns/sticky-table-column/Cover.tsx
 create mode 100644 styles/patterns/_sticky-table-column.scss

diff --git a/contents/_includes/patterns/sticky-table-column.njk b/contents/_includes/patterns/sticky-table-column.njk
new file mode 100644
index 0000000..f46f3f7
--- /dev/null
+++ b/contents/_includes/patterns/sticky-table-column.njk
@@ -0,0 +1,11 @@
+<table class="sticky-table-column">
+    <tbody>
+        {% for i in range(0, 3) -%}
+        <tr>
+            <td class="sticky-table-column__sticky">{% rectangle %}</td>
+            <td>{% lines "hor", 3 %}</td>
+            <td>{% lines "hor", 2 %}</td>
+        </tr>
+        {%- endfor %}
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index d58838c..5ca51bd 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -265,6 +265,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Status light</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/sticky-table-column/">
+                    <div class="pattern__cover">{% include "patterns/sticky-table-column.njk" %}</div>
+                    <div class="pattern__title">Sticky table column</div>
+                </a>
+            </div>
             <div class="pattern__item">
                 <a class="pattern__link" href="/teardrop/">
                     <div class="pattern__cover">{% include "patterns/teardrop.njk" %}</div>
diff --git a/contents/sticky-table-column.md b/contents/sticky-table-column.md
new file mode 100644
index 0000000..682590e
--- /dev/null
+++ b/contents/sticky-table-column.md
@@ -0,0 +1,48 @@
+---
+layout: layouts/post.njk
+title: Sticky table column
+description: Create sticky table column with CSS
+keywords: css position sticky, css sticky table column
+---
+
+## HTML
+
+```html
+<table class="sticky-table-column">
+    <thead>
+        <tr>
+            <th class="sticky-table-column__sticky">
+                ...
+            </th>
+
+            <!-- Other header column ... -->
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td class="sticky-table-column__sticky">...</td>
+            <!-- Other columns -->
+        </tr>
+    </tbody>
+</table>
+```
+
+## CSS
+
+```css
+.sticky-table-column__sticky {
+    /* Background color */
+    background-color: #9ca3af;
+
+    /* Stick to the left */
+    left: 0;
+    position: sticky;
+
+    /* Displayed on top of other rows when scrolling */
+    z-index: 9999;
+}
+```
+
+{% demo %}
+{% include "patterns/sticky-table-column.njk" %}
+{% enddemo %}
diff --git a/pages/sticky-table-column/index.tsx b/pages/sticky-table-column/index.tsx
deleted file mode 100644
index c4d24a1..0000000
--- a/pages/sticky-table-column/index.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-// tslint:disable:prefer-object-spread
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    const numberOfColumns = 10;
-    return (
-        <PatternLayout pattern={Pattern.StickyTableColumn}>
-            <Head>
-                <meta name="description" content="Create sticky table column with CSS" />
-                <meta name="og:description" content="Create sticky table column with CSS" />
-                <meta name="twitter:description" content="Create sticky table column with CSS" />
-                <meta name="keywords" content="css position sticky, css sticky table column" />
-            </Head>
-            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                Try to scroll the main content of table horizontally to see the first column sticks to the left.
-            </div>
-            <BrowserFrame
-                html={`
-<table>
-    <thead>
-        <tr>
-            <th class="header">
-                ...
-            </th>
-
-            <!-- Repeat other header column ... -->
-        </tr>
-    </thead>
-    <tbody>
-    </tbody>
-</table>
-`}
-                css={`
-                    .header {
-                        /* Background color */
-                        background-color: #ddd;
-
-                        /* Stick to the left */
-                        left: 0;
-                        position: sticky;
-
-                        /* Displayed on top of other rows when scrolling */
-                        z-index: 9999;
-                    }
-                `}
-            >
-                <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>
-                                <tr>
-                                    {Array(numberOfColumns)
-                                        .fill(0)
-                                        .map((_, index) => {
-                                            return (
-                                                <th
-                                                    key={index}
-                                                    style={
-                                                        index === 0
-                                                            ? {
-                                                                  backgroundColor: '#ddd',
-                                                                  left: 0,
-                                                                  padding: '16px',
-                                                                  position: 'sticky',
-                                                              }
-                                                            : {
-                                                                  padding: '16px',
-                                                              }
-                                                    }
-                                                >
-                                                    <div style={{ width: '200px' }}>
-                                                        {index === 0 ? <Rectangle /> : <Block numberOfBlocks={3} />}
-                                                    </div>
-                                                </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(numberOfColumns)
-                                                    .fill(0)
-                                                    .map((__, col) => {
-                                                        return (
-                                                            <td
-                                                                key={col}
-                                                                style={
-                                                                    col === 0
-                                                                        ? {
-                                                                              backgroundColor: '#ddd',
-                                                                              left: 0,
-                                                                              padding: '16px',
-                                                                              position: 'sticky',
-                                                                          }
-                                                                        : {
-                                                                              padding: '16px',
-                                                                          }
-                                                                }
-                                                            >
-                                                                {col === 0 ? (
-                                                                    <Rectangle />
-                                                                ) : (
-                                                                    <Block numberOfBlocks={3} />
-                                                                )}
-                                                            </td>
-                                                        );
-                                                    })}
-                                            </tr>
-                                        );
-                                    })}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/sticky-table-column/Cover.tsx b/patterns/sticky-table-column/Cover.tsx
deleted file mode 100644
index ec0ecd0..0000000
--- a/patterns/sticky-table-column/Cover.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as 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>
-                        <tr>
-                            {Array(3)
-                                .fill(0)
-                                .map((_, index) => {
-                                    return (
-                                        <th
-                                            key={index}
-                                            style={{
-                                                backgroundColor: index === 0 ? 'rgba(0, 0, 0, 0.1)' : '',
-                                                padding: '6px 4px',
-                                            }}
-                                        >
-                                            {index === 0 ? <Rectangle /> : <Line />}
-                                        </th>
-                                    );
-                                })}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {Array(2)
-                            .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={{
-                                                            backgroundColor: col === 0 ? 'rgba(0, 0, 0, 0.1)' : '',
-                                                            padding: '6px 4px',
-                                                        }}
-                                                    >
-                                                        {col === 0 ? <Rectangle /> : <Line />}
-                                                    </td>
-                                                );
-                                            })}
-                                    </tr>
-                                );
-                            })}
-                    </tbody>
-                </table>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index e011b49..ad0c7b2 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -53,6 +53,7 @@
 @import './patterns/stamp-border';
 @import './patterns/statistic';
 @import './patterns/status-light';
+@import './patterns/sticky-table-column';
 @import './patterns/teardrop';
 @import './patterns/three-dimensions-card';
 @import './patterns/timeline';
diff --git a/styles/patterns/_sticky-table-column.scss b/styles/patterns/_sticky-table-column.scss
new file mode 100644
index 0000000..210c49a
--- /dev/null
+++ b/styles/patterns/_sticky-table-column.scss
@@ -0,0 +1,25 @@
+.sticky-table-column {
+    /* Demo */
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.sticky-table-column tbody {
+    border-bottom: 1px solid #d1d5db;
+}
+
+.sticky-table-column tr {
+    border-top: 1px solid #d1d5db;
+}
+
+.sticky-table-column__sticky {
+    /* Background color */
+    background-color: #9ca3af;
+
+    /* Stick to the left */
+    left: 0;
+    position: sticky;
+
+    /* Displayed on top of other rows when scrolling */
+    z-index: 9999;
+}
\ No newline at end of file