mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-07 22:56:51 +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>
|
||||
</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>
|
||||
|
||||
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/statistic';
|
||||
@import './patterns/status-light';
|
||||
@import './patterns/sticky-table-column';
|
||||
@import './patterns/teardrop';
|
||||
@import './patterns/three-dimensions-card';
|
||||
@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