feat: add sticky table header option (#729)

* feat: add sticky table header option * refactor: move `stickyHeader` prop to `TableHeader` * style: hide rows under sticky header * refactor: rename stickyHeader to sticky
zakodium-oss · May 28, 2024 · 1827fe7 · 1827fe7
1 parent dd1d8e7
commit 1827fe7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/components/table/TableHeader.tsx b/src/components/table/TableHeader.tsx
@@ -1,9 +1,21 @@
 import type { TableProps } from './Table';
 import { TableRow } from './TableRow';
 
-export const TableHeader = ({ children, bordered, style }: TableProps) => {
+const headerStyle: React.CSSProperties = {
+  position: 'sticky',
+  top: 0,
+  zIndex: 10,
+  backgroundColor: 'white',
+};
+
+export const TableHeader = ({
+  children,
+  bordered,
+  style,
+  sticky,
+}: TableProps & { sticky?: boolean }) => {
   return (
-    <thead>
+    <thead style={sticky ? headerStyle : undefined}>
       <TableRow bordered={bordered} style={style}>
         {children}
       </TableRow>

diff --git a/stories/components/table.stories.tsx b/stories/components/table.stories.tsx
@@ -10,13 +10,14 @@ interface ControlProps extends React.HTMLAttributes<HTMLTableElement> {
   compact?: boolean;
   interactive?: boolean;
   striped?: boolean;
+  sticky?: boolean;
 }
 
 export default {
   title: 'Components / Table',
   decorators: [
     (Story: any) => (
-      <div style={{ padding: 12, height: '100%', overflowY: 'auto' }}>
+      <div style={{ margin: 12, height: '100%', overflowY: 'auto' }}>
         <Story />
       </div>
     ),
@@ -28,6 +29,7 @@ export function Control({
   compact,
   interactive,
   striped,
+  sticky,
 }: ControlProps) {
   const Rows = data.map(({ id, name, rn, mw, em, isExpensive, color }) => (
     <Table.Row key={id}>
@@ -47,7 +49,7 @@ export function Control({
       interactive={interactive}
       striped={striped}
     >
-      <Table.Header>
+      <Table.Header sticky={sticky}>
         <ValueRenderers.Header value="id" />
         <ValueRenderers.Header value="name" />
         <ValueRenderers.Header value="rn" />
@@ -65,6 +67,7 @@ Control.args = {
   compact: false,
   interactive: false,
   striped: false,
+  sticky: false,
 };
 
 export function RowBorder({ border }: TableStoryProps) {
@@ -134,6 +137,7 @@ export function StyledTable({
   compact,
   interactive,
   striped,
+  sticky,
 }: ControlProps) {
   return (
     <Table
@@ -143,7 +147,7 @@ export function StyledTable({
       striped={striped}
       color="white"
     >
-      <Table.Header style={{ backgroundColor: '#cccccc' }}>
+      <Table.Header sticky={sticky} style={{ backgroundColor: '#cccccc' }}>
         <ValueRenderers.Header value="id" />
         <ValueRenderers.Header value="name" />
         <ValueRenderers.Header value="message" />
@@ -172,4 +176,5 @@ StyledTable.args = {
   compact: false,
   interactive: false,
   striped: false,
+  sticky: false,
 };