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 @@ + + + {% for i in range(0, 3) -%} + + + + + + {%- endfor %} + +
{% rectangle %}{% lines "hor", 3 %}{% lines "hor", 2 %}
\ 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
Status light
+
+ +
{% include "patterns/sticky-table-column.njk" %}
+
Sticky table column
+ +
{% include "patterns/teardrop.njk" %}
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 + + + + + + + + + + + + + + +
+ ... +
...
+``` + +## 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 ( - - - - - - - -
- Try to scroll the main content of table horizontally to see the first column sticks to the left. -
- - - - - ... - - - - - - - - -`} - 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; - } - `} - > -
-
- - - - {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 ? ( - - ) : ( - - )} -
-
-
- - - - - ); -}; - -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 ( - -
- - - - {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/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