✨ Add support for scrollable tables

Author: Frontendland

src/components/Table/Table.astro

@@ -12,6 +12,7 @@ const {
     striped,
     offsetStripe,
     compact,
+    maxHeight,
     className
 } = Astro.props
 
@@ -21,11 +22,15 @@ const classes = [
     striped && styles[`striped-${striped}s`],
     offsetStripe && styles.offset,
     compact && styles.compact,
+    maxHeight && styles.scroll,
     className
 ]
 ---
 
-<div class:list={classes}>
+<div
+    class:list={classes}
+    style={maxHeight ? `max-height:${maxHeight}` : undefined}
+>
     <table>
         {headings?.length && (
             <thead>

src/components/Table/Table.svelte

@@ -11,6 +11,7 @@
     export let striped: TableProps['striped'] = null
     export let offsetStripe: TableProps['offsetStripe'] = false
     export let compact: TableProps['compact'] = false
+    export let maxHeight: TableProps['maxHeight'] = 0
     export let className: TableProps['className'] = ''
 
     const classes = classNames([
@@ -19,11 +20,12 @@
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
+        maxHeight && styles.scroll,
         className
     ])
 </script>
 
-<div class={classes}>
+<div class={classes} style={maxHeight ? `max-height:${maxHeight}` : null}>
     <table>
         {#if headings?.length}
             <thead>

src/components/Table/Table.tsx

@@ -12,6 +12,7 @@ const Table = ({
     striped,
     offsetStripe,
     compact,
+    maxHeight,
     className
 }: TableProps) => {
     const classes = classNames([
@@ -20,11 +21,16 @@ const Table = ({
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
+        maxHeight && styles.scroll,
         className
     ])
 
+    const styleVariables = {
+        ...(maxHeight && { 'max-height': maxHeight })
+    } as React.CSSProperties
+
     return (
-        <div className={classes}>
+        <div className={classes} style={styleVariables}>
             <table>
                 {headings?.length && (
                     <thead>

src/components/Table/table.module.scss

@@ -57,4 +57,14 @@
             @include spacing(py-xxs, px-sm);
         }
     }
+
+    &.scroll {
+        @include spacing(pr-sm);
+
+        thead {
+            @include position(sticky, t0);
+            @include background(primary-70);
+            box-shadow: 0 .5px 0 var(--w-color-primary-50);
+        }
+    }
 }

src/components/Table/table.ts

@@ -6,5 +6,6 @@ export type TableProps = {
     striped?: 'column' | 'row' | null
     offsetStripe?: boolean
     compact?: boolean
+    maxHeight?: number
     className?: string
 }

src/pages/table.astro

@@ -46,6 +46,29 @@ const overflowTable = {
         '✅'
     ]),
 }
+
+const scrollTable = {
+    headings: ['Keyword', 'CSS'],
+    data: [
+        ['none', '0'],
+        ['xxs', '2px'],
+        ['xs', '5px'],
+        ['sm', '10px'],
+        ['md', '15px'],
+        ['default', '20px'],
+        ['lg', '25px'],
+        ['xl', '30px'],
+        ['2xl', '35px'],
+        ['3xl', '40px'],
+        ['4xl', '45px'],
+        ['5xl', '50px'],
+        ['6xl', '55px'],
+        ['7xl', '60px'],
+        ['8xl', '65px'],
+        ['9xl', '70px'],
+        ['10xl', '75px']
+    ]
+}
 ---
 
 <Layout>
@@ -148,6 +171,14 @@ const overflowTable = {
                     striped="column"
                 />
             </ComponentWrapper>
+
+            <ComponentWrapper title="Scroll table">
+                <section.component
+                    {...scrollTable}
+                    maxHeight="250px"
+                    striped="column"
+                />
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>