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

Merge pull request #101 from phuoc-ng/sticky-table-headers

Browse Source 
Add sticky table headers
This commit is contained in:
phuoc-ng
2019-12-26 21:27:22 +07:00
committed by GitHub
parent 71976d562e e8b09d8a14
commit 7933686f10
6 changed files with 199 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -66,6 +66,7 @@ enum Pattern {
StickyFooter = 'Sticky footer', StickyFooter = 'Sticky footer',
StickyHeader = 'Sticky header', StickyHeader = 'Sticky header',
StickySections = 'Sticky sections', StickySections = 'Sticky sections',
StickyTableHeaders = 'Sticky table headers',
Switch = 'Switch', Switch = 'Switch',
Tab = 'Tab', Tab = 'Tab',
Timeline = 'Timeline', Timeline = 'Timeline',

1
client/pages/ExplorePage.tsx
View File

@@ -168,6 +168,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Ribbon} /> <CoverCard pattern={Pattern.Ribbon} />
<CoverCard pattern={Pattern.Separator} /> <CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.StackedCards} /> <CoverCard pattern={Pattern.StackedCards} />
<CoverCard pattern={Pattern.StickyTableHeaders} />
<CoverCard pattern={Pattern.Timeline} /> <CoverCard pattern={Pattern.Timeline} />
<CoverCard pattern={Pattern.VideoBackground} /> <CoverCard pattern={Pattern.VideoBackground} />
</div> </div>

6
client/patterns/sticky-header/Details.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react'; import React from 'react';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout'; import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -11,7 +13,7 @@ const Details: React.FC<{}> = () => {
<DetailsLayout title="Sticky header"> <DetailsLayout title="Sticky header">
<Helmet> <Helmet>
<meta name="description" content="Create a sticky header with CSS" /> <meta name="description" content="Create a sticky header with CSS" />
<meta name="keywords" content="css layout, css sticky, css sticky header" /> <meta name="keywords" content="css layout, css position sticky, css sticky header" />
</Helmet> </Helmet>
<div style={{ padding: '64px 32px' }}> <div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}> <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
@@ -53,6 +55,8 @@ const Details: React.FC<{}> = () => {
`} `}
/> />
</div> </div>
<RelatedPatterns patterns={[Pattern.StickyTableHeaders]} />
</DetailsLayout> </DetailsLayout>
); );
}; };

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

@@ -0,0 +1,65 @@
import 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;

126
client/patterns/sticky-table-headers/Details.tsx Normal file
View File

@@ -0,0 +1,126 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Sticky table headers">
<Helmet>
<meta name="description" content="Create sticky table headers with CSS" />
<meta name="keywords" content="css position sticky, css sticky table headers" />
</Helmet>
<div style={{ padding: '64px 32px' }}>
<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
content={(
<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 style={{ }}>
<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>
)}
source={`
<table>
<thead>
<tr>
<th style="
/* Background color */
background-color: #ddd;
/* Sticky to the top */
position: sticky;
top: 0px;
/* Displayed on top of other rows when scrolling */
z-index: 9999;
">
...
</th>
<!-- Repeat other header column ... -->
</tr>
</thead>
<tbody>
</tbody>
</table>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.StickyHeader]} />
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -67,6 +67,7 @@
<url><loc>https://csslayout.io/patterns/sticky-footer</loc></url> <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-header</loc></url> <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-sections</loc></url> <url><loc>https://csslayout.io/patterns/sticky-sections</loc></url>
<url><loc>https://csslayout.io/patterns/sticky-table-headers</loc></url>
<url><loc>https://csslayout.io/patterns/switch</loc></url> <url><loc>https://csslayout.io/patterns/switch</loc></url>
<url><loc>https://csslayout.io/patterns/tab</loc></url> <url><loc>https://csslayout.io/patterns/tab</loc></url>
<url><loc>https://csslayout.io/patterns/timeline</loc></url> <url><loc>https://csslayout.io/patterns/timeline</loc></url>