@@ -53,6 +55,8 @@ const Details: React.FC<{}> = () => {
`}
/>
+
+
);
};
diff --git a/client/patterns/sticky-table-headers/Cover.tsx b/client/patterns/sticky-table-headers/Cover.tsx
new file mode 100644
index 0000000..00c0c9b
--- /dev/null
+++ b/client/patterns/sticky-table-headers/Cover.tsx
@@ -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 (
+
+
+
+
+
+ {
+ Array(3).fill(0).map((_, index) => {
+ return (
+ |
+
+ |
+ );
+ })
+ }
+
+
+
+ {
+ Array(3).fill(0).map((_, row) => {
+ return (
+
+ {
+ Array(3).fill(0).map((__, col) => {
+ return (
+ |
+
+ |
+ );
+ })
+ }
+
+ );
+ })
+ }
+
+
+
+
+ );
+};
+
+export default Cover;
diff --git a/client/patterns/sticky-table-headers/Details.tsx b/client/patterns/sticky-table-headers/Details.tsx
new file mode 100644
index 0000000..c13ef25
--- /dev/null
+++ b/client/patterns/sticky-table-headers/Details.tsx
@@ -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 (
+
+
+
+
+
+
+
+ Try to scroll the main content of table to see the header sticks to the top.
+
+
+
+
+
+
+ {
+ Array(3).fill(0).map((_, index) => {
+ return (
+ |
+
+ |
+ );
+ })
+ }
+
+
+
+ {
+ Array(10).fill(0).map((_, row) => {
+ return (
+
+ {
+ Array(3).fill(0).map((__, col) => {
+ return (
+ |
+
+ |
+ );
+ })
+ }
+
+ );
+ })
+ }
+
+
+
+
+
+ |
+ ...
+ |
+
+
+
+
+
+
+
+`}
+ />
+
+
+