mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-08 07:07:15 +02:00
Code Issues Releases Wiki Activity

feat: Sticky table column

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-20 10:38:49 +07:00
parent 9b1ec2fa57
commit ac897c9e63
7 changed files with 91 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
contents/_includes/patterns/sticky-table-column.njk Normal file
View 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>

6
contents/index.njk
View File

@@ -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
View 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 %}

156
pages/sticky-table-column/index.tsx
View File

@@ -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;

77
patterns/sticky-table-column/Cover.tsx
View File

@@ -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;

1
styles/index.scss
View File

@@ -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
View 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;
}