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', + }, + }, +];