diff --git a/src/components/Table/Table.mdx b/src/components/Table/Table.mdx
index 005fa40eb..549983857 100644
--- a/src/components/Table/Table.mdx
+++ b/src/components/Table/Table.mdx
@@ -53,3 +53,12 @@ This type includes all the configuration for the columns
### Sorting
+
+### Sticky Header
+
+
+ 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
+
+
+
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index c45687b87..d06353de0 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/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 (
+
+ 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'],
+ },
+ },
+};
diff --git a/src/components/Table/constants.tsx b/src/components/Table/constants.tsx
index a6d58bef7..10e9142cf 100644
--- a/src/components/Table/constants.tsx
+++ b/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',
+ },
+ },
+];