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

feat: Sticky table headers

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-20 13:50:43 +07:00
parent ac897c9e63
commit 9ed4eebe82
9 changed files with 101 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
contents/_includes/patterns/sticky-table-headers.njk Normal file
View File

@@ -0,0 +1,18 @@
<table class="sticky-table-headers">
<thead>
<tr class="sticky-table-headers__sticky">
<td>{% rectangle %}</td>
<td>{% rectangle %}</td>
<td>{% rectangle %}</td>
</tr>
</thead>
<tbody>
{% for i in range(0, 3) -%}
<tr>
<td>{% rectangle %}</td>
<td>{% lines "hor", 3 %}</td>
<td>{% lines "hor", 2 %}</td>
</tr>
{%- endfor %}
</tbody>
</table>

12
contents/index.njk
View File

@@ -271,6 +271,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Sticky table column</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/sticky-table-headers/">
<div class="pattern__cover">{% include "patterns/sticky-table-headers.njk" %}</div>
<div class="pattern__title">Sticky table headers</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/teardrop/">
<div class="pattern__cover">{% include "patterns/teardrop.njk" %}</div>
@@ -295,6 +301,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Tree diagram</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/triangle-buttons/">
<div class="pattern__cover">{% include "patterns/triangle-buttons.njk" %}</div>
<div class="pattern__title">Triangle buttons</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/video-background/">
<div class="pattern__cover">{% include "patterns/video-background.njk" %}</div>

4
contents/sticky-table-column.md
View File

@@ -21,7 +21,7 @@ keywords: css position sticky, css sticky table column
<tbody>
<tr>
<td class="sticky-table-column__sticky">...</td>
<!-- Other columns -->
<!-- Other columns ... -->
</tr>
</tbody>
</table>
@@ -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;

39
contents/sticky-table-headers.md Normal file
View File

@@ -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
<table class="sticky-table-headers">
<thead>
<tr class="sticky-table-headers__sticky"></tr>
</thead>
<tbody>
...
</tbody>
</table>
```
## 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 %}

130
pages/sticky-table-headers/index.tsx
View File

@@ -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 (
<PatternLayout pattern={Pattern.StickyTableHeaders}>
<Head>
<meta name="description" content="Create sticky table headers with CSS" />
<meta name="og:description" content="Create sticky table headers with CSS" />
<meta name="twitter:description" content="Create sticky table headers with CSS" />
<meta name="keywords" content="css position sticky, css sticky table headers" />
</Head>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
Try to scroll the main content of table to see the header sticks to the top.
</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 top */
position: sticky;
top: 0;
/* 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(3)
.fill(0)
.map((_, index) => {
return (
<th
key={index}
style={{
backgroundColor: '#ddd',
padding: '16px',
position: 'sticky',
top: 0,
zIndex: 9999,
}}
>
<Rectangle />
</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(3)
.fill(0)
.map((__, col) => {
return (
<td key={col} style={{ padding: '16px' }}>
<Block numberOfBlocks={3} />
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableColumn]} />
</PatternLayout>
);
};
export default Details;

65
patterns/sticky-table-headers/Cover.tsx
View File

@@ -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 (
<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 style={{ backgroundColor: 'rgba(0, 0, 0, 0.1)' }}>
<tr>
{Array(3)
.fill(0)
.map((_, index) => {
return (
<th key={index} style={{ padding: '6px 4px' }}>
<Rectangle />
</th>
);
})}
</tr>
</thead>
<tbody>
{Array(3)
.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={{ padding: '6px 4px' }}>
<Line />
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

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

2
styles/patterns/_sticky-table-column.scss
View File

@@ -22,4 +22,6 @@
/* Displayed on top of other rows when scrolling */
z-index: 9999;
padding: 0 0.25rem;
}

27
styles/patterns/_sticky-table-headers.scss Normal file
View File

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