// tslint:disable:prefer-object-spread import * as React from 'react'; import Head from 'next/head'; import { Spacer } from '@1milligram/design'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { const numberOfColumns = 10; return (

Try to scroll the main content of table horizontally to see the first column sticks to the left.

... `} css={` .header { /* Background color */ background-color: #ddd; /* Stick to the left */ left: 0; position: sticky; /* Displayed on top of other rows when scrolling */ z-index: 9999; } `} >

{Array(numberOfColumns) .fill(0) .map((_, index) => { return ( ); })} {Array(10) .fill(0) .map((_, row) => { return ( {Array(numberOfColumns) .fill(0) .map((__, col) => { return ( ); })} ); })}

{index === 0 ? : }
{col === 0 ? ( ) : ( )}

); }; export default Details;