feat: documentation

src/components/Table/Table.mdx

@@ -53,3 +53,12 @@ This type includes all the configuration for the columns
 ### Sorting
 
 <Canvas of={TableStories.Sorting} />
+
+### Sticky Header
+
+<Tip>
+  In order to create a table with sticky header, use the hasStickyHeader prop and also pass a
+  max-height for the tbody though the sx prop
+</Tip>
+
+<Canvas of={TableStories.StickyHeader} />

src/components/Table/Table.stories.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import Table from './Table';
-import { SimpleData, simpleColumns, simpleData } from './constants';
+import { SimpleData, moreData, simpleColumns, simpleData } from './constants';
 import Typography from 'components/Typography';
 import { SortingState } from '@tanstack/react-table';
+import { concat } from 'lodash';
 
 export default {
   title: 'Updated Components/Table/Table',
@@ -11,6 +12,7 @@ export default {
   args: {
     rowSize: 'sm',
     isMultiSortable: false,
+    maxHeight: 280,
   },
 
   argTypes: {
@@ -20,6 +22,7 @@ export default {
     ageWidth: { control: 'number', name: 'Age Width' },
     jobWidth: { control: 'number', name: 'Job Width' },
     rowSize: { name: 'Row Size' },
+    maxHeight: { name: 'Tbody Max height' },
   },
 };
 
@@ -180,3 +183,27 @@ export const Sorting = {
     },
   },
 };
+
+export const StickyHeader = {
+  render: (args) => {
+    const { rowSize, maxHeight } = args;
+
+    return (
+      <Table<SimpleData>
+        data={concat(simpleData, moreData)}
+        columns={simpleColumns}
+        rowSize={rowSize}
+        hasStickyHeader
+        sx={{ tbody: { maxHeight: `${maxHeight}px` } }}
+      />
+    );
+  },
+
+  name: 'Sticky Header',
+
+  parameters: {
+    controls: {
+      include: ['Row Size', 'Tbody Max height'],
+    },
+  },
+};

src/components/Table/constants.tsx

@@ -61,3 +61,78 @@ export const simpleData = [
     },
   },
 ];
+
+export const moreData = [
+  {
+    cells: {
+      firstName: 'Gunther',
+      lastName: 'N/A',
+      age: '35',
+      job: 'Central Perk Manager',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Janice',
+      lastName: 'Litman-Foralnik',
+      age: '35',
+      job: 'Personal Shopper',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Richard',
+      lastName: 'Burke',
+      age: '50',
+      job: 'Ophthalmologist',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Estelle',
+      lastName: 'Leonard',
+      age: 'N/A',
+      job: 'Talent Agent',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Mike',
+      lastName: 'Hannigan',
+      age: '31',
+      job: 'N/A',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Charlie',
+      lastName: 'Wheeler',
+      age: '28',
+      job: 'Paleontologist',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Emily',
+      lastName: 'Waltham',
+      age: '28',
+      job: 'N/A',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Carol',
+      lastName: 'Willick',
+      age: '35',
+      job: 'N/A',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Frank',
+      lastName: 'Buffay Jr.',
+      age: '29',
+      job: 'N/A',
+    },
+  },
+];