feat: sticky tables

Author: shiftpsh

example/src/stories/Table/Table.stories.tsx

@@ -24,6 +24,12 @@ export default {
       description:
         'Whether the table should take up the full width of the container',
     },
+    sticky: {
+      control: {
+        type: 'string',
+      },
+      description: 'Whether the table should be sticky',
+    },
   },
 } as ComponentMeta<typeof Table>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.0.1-alpha.33",
+  "version": "0.0.1-alpha.34",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",

src/components/Table/Cell.tsx

@@ -1,5 +1,5 @@
 import React, { ElementType, useContext } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { TableContext } from './TableContext'
 import { TableRowGroupContext } from './TableRowGroupContext'
@@ -14,18 +14,26 @@ const paddingMap = {
 interface CellContainerProps {
   padding: 'none' | 'dense' | 'normal' | 'wide'
   numeric: boolean
+  header: boolean
 }
 
+const whenHeader = css`
+  text-align: center;
+  font-weight: 700;
+`
+
 const CellContainer = styled.td<CellContainerProps>`
   display: table-cell;
   border-bottom: ${({ theme }) => theme.styles.border()};
   ${({ padding }) => paddingMap[padding]}
   ${({ numeric }) =>
     numeric && "text-align: right; font-feature-settings: 'tnum';"}
+  ${({ header }) => header && whenHeader}
 `
 
 export interface CellProps {
   padding?: 'none' | 'dense' | 'normal' | 'wide'
+  header?: boolean
   numeric?: boolean
 }
 
@@ -35,17 +43,21 @@ export const Cell: PC<'td', CellProps> = React.forwardRef(
     const tableRowGroupContext = useContext(TableRowGroupContext)
     const {
       padding = tableContext.padding,
-      as = tableRowGroupContext.header ? 'th' : 'td',
+      header = tableRowGroupContext.header,
+      as,
       numeric = false,
       ...rest
     } = props
 
+    const calculatedAs = as || (header ? 'th' : 'td')
+
     return (
       <CellContainer
         padding={padding}
         numeric={numeric}
+        header={header}
         ref={ref}
-        as={as}
+        as={calculatedAs}
         {...rest}
       />
     )

src/components/Table/Row.tsx

@@ -28,7 +28,7 @@ export const Row: PC<'tr', RowProps> = React.forwardRef(
     } = props
 
     return (
-      <TableContext.Provider value={{ padding }}>
+      <TableContext.Provider value={{ ...tableContext, padding }}>
         <RowContainer header={header} ref={ref} as={as} {...rest} />
       </TableContext.Provider>
     )

src/components/Table/Table.tsx

@@ -15,6 +15,7 @@ const TableContainer = styled.table<TableContainerProps>`
 
 export interface TableProps {
   fullWidth?: boolean
+  sticky?: boolean | number | string
   padding?: 'none' | 'dense' | 'normal' | 'wide'
 }
 
@@ -23,12 +24,13 @@ export const Table: PC<'table', TableProps> = React.forwardRef(
     const {
       fullWidth = false,
       padding = 'normal',
+      sticky = false,
       as = 'table',
       ...rest
     } = props
 
     return (
-      <TableContext.Provider value={{ padding }}>
+      <TableContext.Provider value={{ padding, sticky }}>
         <TableRowGroupContext.Provider value={{ header: false }}>
           <TableContainer fullWidth={fullWidth} ref={ref} as={as} {...rest} />
         </TableRowGroupContext.Provider>

src/components/Table/TableContext.ts

@@ -2,8 +2,10 @@ import React from 'react'
 
 export interface TableContextProps {
   padding: 'none' | 'dense' | 'normal' | 'wide'
+  sticky: boolean | number | string
 }
 
 export const TableContext = React.createContext<TableContextProps>({
   padding: 'normal',
+  sticky: false,
 })

src/components/Table/TableHead.tsx

@@ -1,21 +1,42 @@
-import React, { ElementType } from 'react'
+import React, { ElementType, useContext } from 'react'
 import styled from 'styled-components'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { TableContext } from './TableContext'
 import { TableRowGroupContext } from './TableRowGroupContext'
 
-const TableHeadContainer = styled.thead`
+export interface TableHeadContainerProps {
+  sticky: boolean | number | string
+}
+
+const getStickyValue = (sticky: boolean | number | string): string => {
+  if (typeof sticky === 'number') {
+    return `${sticky}px`
+  }
+  if (typeof sticky === 'string') {
+    return sticky
+  }
+  return '0'
+}
+
+const TableHeadContainer = styled.thead<TableHeadContainerProps>`
   display: table-header-group;
-  text-align: center;
-  font-weight: 700;
+  ${({ sticky }) =>
+    (typeof sticky !== 'boolean' || sticky === true) &&
+    `position: sticky; top: ${getStickyValue(sticky)};`}
 `
 
-export const TableHead: PC<'thead'> = React.forwardRef(
-  <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
-    const { as = 'thead', ...rest } = props
+export interface TableHeadProps {
+  sticky?: boolean | number | string
+}
+
+export const TableHead: PC<'thead', TableHeadProps> = React.forwardRef(
+  <T extends ElementType>(props: PP<T, TableHeadProps>, ref?: PR<T>) => {
+    const tableContext = useContext(TableContext)
+    const { sticky = tableContext.sticky, as = 'thead', ...rest } = props
 
     return (
       <TableRowGroupContext.Provider value={{ header: true }}>
-        <TableHeadContainer ref={ref} as={as} {...rest} />
+        <TableHeadContainer sticky={sticky} ref={ref} as={as} {...rest} />
       </TableRowGroupContext.Provider>
     )
   }