mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-08 15:16:52 +02:00
feat: Sticky table column
This commit is contained in:
Phuoc Nguyen
11
contents/_includes/patterns/sticky-table-column.njk
Normal file
11
contents/_includes/patterns/sticky-table-column.njk
Normal file
@@ -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>
|
||||||
@@ -265,6 +265,12 @@ eleventyExcludeFromCollections: true
|
|||||||
<div class="pattern__title">Status light</div>
|
<div class="pattern__title">Status light</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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">
|
<div class="pattern__item">
|
||||||
<a class="pattern__link" href="/teardrop/">
|
<a class="pattern__link" href="/teardrop/">
|
||||||
<div class="pattern__cover">{% include "patterns/teardrop.njk" %}</div>
|
<div class="pattern__cover">{% include "patterns/teardrop.njk" %}</div>
|
||||||
|
|||||||
48
contents/sticky-table-column.md
Normal file
48
contents/sticky-table-column.md
Normal file
@@ -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 %}
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
@@ -53,6 +53,7 @@
|
|||||||
@import './patterns/stamp-border';
|
@import './patterns/stamp-border';
|
||||||
@import './patterns/statistic';
|
@import './patterns/statistic';
|
||||||
@import './patterns/status-light';
|
@import './patterns/status-light';
|
||||||
|
@import './patterns/sticky-table-column';
|
||||||
@import './patterns/teardrop';
|
@import './patterns/teardrop';
|
||||||
@import './patterns/three-dimensions-card';
|
@import './patterns/three-dimensions-card';
|
||||||
@import './patterns/timeline';
|
@import './patterns/timeline';
|
||||||
|
|||||||
25
styles/patterns/_sticky-table-column.scss
Normal file
25
styles/patterns/_sticky-table-column.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user