From 9ed4eebe82c86fce34b3e3a23a3492f9f1be4333 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Tue, 20 Sep 2022 13:50:43 +0700 Subject: [PATCH] feat: Sticky table headers --- .../patterns/sticky-table-headers.njk | 18 +++ contents/index.njk | 12 ++ contents/sticky-table-column.md | 4 +- contents/sticky-table-headers.md | 39 ++++++ pages/sticky-table-headers/index.tsx | 130 ------------------ patterns/sticky-table-headers/Cover.tsx | 65 --------- styles/index.scss | 1 + styles/patterns/_sticky-table-column.scss | 2 + styles/patterns/_sticky-table-headers.scss | 27 ++++ 9 files changed, 101 insertions(+), 197 deletions(-) create mode 100644 contents/_includes/patterns/sticky-table-headers.njk create mode 100644 contents/sticky-table-headers.md delete mode 100644 pages/sticky-table-headers/index.tsx delete mode 100644 patterns/sticky-table-headers/Cover.tsx create mode 100644 styles/patterns/_sticky-table-headers.scss diff --git a/contents/_includes/patterns/sticky-table-headers.njk b/contents/_includes/patterns/sticky-table-headers.njk new file mode 100644 index 0000000..66d5d7e --- /dev/null +++ b/contents/_includes/patterns/sticky-table-headers.njk @@ -0,0 +1,18 @@ + + + + + + + + + + {% for i in range(0, 3) -%} + + + + + + {%- endfor %} + +
{% rectangle %}{% rectangle %}{% rectangle %}
{% rectangle %}{% lines "hor", 3 %}{% lines "hor", 2 %}
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 5ca51bd..3070d24 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -271,6 +271,12 @@ eleventyExcludeFromCollections: true
Sticky table column
+
+ +
{% include "patterns/sticky-table-headers.njk" %}
+
Sticky table headers
+ +
{% include "patterns/teardrop.njk" %}
@@ -295,6 +301,12 @@ eleventyExcludeFromCollections: true
Tree diagram
+
+ +
{% include "patterns/triangle-buttons.njk" %}
+
Triangle buttons
+ +
{% include "patterns/video-background.njk" %}
diff --git a/contents/sticky-table-column.md b/contents/sticky-table-column.md index 682590e..556c2bf 100644 --- a/contents/sticky-table-column.md +++ b/contents/sticky-table-column.md @@ -21,7 +21,7 @@ keywords: css position sticky, css sticky table column ... - + @@ -30,7 +30,7 @@ keywords: css position sticky, css sticky table column ## CSS ```css -.sticky-table-column__sticky { +.sticky-table-headers__sticky { /* Background color */ background-color: #9ca3af; diff --git a/contents/sticky-table-headers.md b/contents/sticky-table-headers.md new file mode 100644 index 0000000..c01be0a --- /dev/null +++ b/contents/sticky-table-headers.md @@ -0,0 +1,39 @@ +--- +layout: layouts/post.njk +title: Sticky table headers +description: Create sticky table headers with CSS +keywords: css position sticky, css sticky table headers +--- + +## HTML + +```html + + + + + + ... + +
+``` + +## CSS + +```css +.sticky-table-headers__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-headers.njk" %} +{% enddemo %} diff --git a/pages/sticky-table-headers/index.tsx b/pages/sticky-table-headers/index.tsx deleted file mode 100644 index 15d35b8..0000000 --- a/pages/sticky-table-headers/index.tsx +++ /dev/null @@ -1,130 +0,0 @@ -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<{}> = () => { - return ( - - - - - - - -
- Try to scroll the main content of table to see the header sticks to the top. -
- - - - - ... - - - - - - - - -`} - css={` - .header { - /* Background color */ - background-color: #ddd; - - /* Stick to the top */ - position: sticky; - top: 0; - - /* Displayed on top of other rows when scrolling */ - z-index: 9999; - } - `} - > -
-
- - - - {Array(3) - .fill(0) - .map((_, index) => { - return ( - - ); - })} - - - - {Array(10) - .fill(0) - .map((_, row) => { - return ( - - {Array(3) - .fill(0) - .map((__, col) => { - return ( - - ); - })} - - ); - })} - -
- -
- -
-
-
- - - - - - ); -}; - -export default Details; diff --git a/patterns/sticky-table-headers/Cover.tsx b/patterns/sticky-table-headers/Cover.tsx deleted file mode 100644 index acaad3a..0000000 --- a/patterns/sticky-table-headers/Cover.tsx +++ /dev/null @@ -1,65 +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 ( - -
- - - - {Array(3) - .fill(0) - .map((_, index) => { - return ( - - ); - })} - - - - {Array(3) - .fill(0) - .map((_, row) => { - return ( - - {Array(3) - .fill(0) - .map((__, col) => { - return ( - - ); - })} - - ); - })} - -
- -
- -
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index ad0c7b2..c9d24c5 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -54,6 +54,7 @@ @import './patterns/statistic'; @import './patterns/status-light'; @import './patterns/sticky-table-column'; +@import './patterns/sticky-table-headers'; @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 index 210c49a..615457e 100644 --- a/styles/patterns/_sticky-table-column.scss +++ b/styles/patterns/_sticky-table-column.scss @@ -22,4 +22,6 @@ /* Displayed on top of other rows when scrolling */ z-index: 9999; + + padding: 0 0.25rem; } \ No newline at end of file diff --git a/styles/patterns/_sticky-table-headers.scss b/styles/patterns/_sticky-table-headers.scss new file mode 100644 index 0000000..e9068b5 --- /dev/null +++ b/styles/patterns/_sticky-table-headers.scss @@ -0,0 +1,27 @@ +.sticky-table-headers { + /* Demo */ + border-collapse: collapse; + width: 100%; +} + +.sticky-table-headers tbody { + border-bottom: 1px solid #d1d5db; +} +.sticky-table-headers thead td { + padding: 0.25rem; +} +.sticky-table-headers tr { + border-top: 1px solid #d1d5db; +} + +.sticky-table-headers__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