Skip to content

Commit

Permalink
Merge pull request #587 from Availity/docs/expandable-table-rows
Browse files Browse the repository at this point in the history 
docs: add expandable table row examples
  • Loading branch information
@LauRoxx
LauRoxx authored Nov 26, 2024
2 parents e9f543a + 72fb7f0 commit 3fc4185
Show file tree
Hide file tree
Showing 2 changed files with 176 additions and 0 deletions.
86 changes: 86 additions & 0 deletions packages/table/src/lib/Table.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
import type { Meta, StoryObj } from '@storybook/react';
import { useMemo, useState } from 'react';
import Checkbox from '@mui/material/Checkbox';
import { IconButton } from '@availity/mui-button';
import { StatusChip, StatusChipProps } from '@availity/mui-chip';
import { CollapseIcon, ExpandIcon } from '@availity/mui-icon';
import { Box, Grid } from '@availity/mui-layout';
import { Collapse } from '@availity/mui-transitions';
import { Typography } from '@availity/mui-typography';
import { visuallyHidden } from '@availity/mui-utils';
import Patients from '../../../../data/patients.json';
Expand Down Expand Up @@ -459,3 +463,85 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
);
},
};

export const _ExpandableTable: StoryObj<typeof Table> = {
render: (args: TableProps) => {
return (
<TableContainer>
<Typography id="table-title" sx={visuallyHidden}>
Table
</Typography>
<Table aria-labelledby="table-title" {...args}>
<TableHead>
<TableRow>
<TableCell><div style={visuallyHidden}>Expand Row</div></TableCell>
<TableCell>Payer</TableCell>
<TableCell>Patient First Name</TableCell>
<TableCell>Patient Last Name</TableCell>
<TableCell>Birth Date</TableCell>
</TableRow>
</TableHead>
<TableBody>
{dataRows.map((row) => {
const [open, setOpen] = useState(false);
return (
<>
<TableRow key={`expandableTable-${row.payerName}-${row.birthDate}`}>
<TableCell padding="checkbox">
<IconButton
title="expand row"
size="medium"
onClick={() => setOpen(!open)}
>
{open ? <ExpandIcon /> : <CollapseIcon />}
</IconButton>
</TableCell>
<TableCell>{row.payerName}</TableCell>
<TableCell>{row.firstName}</TableCell>
<TableCell>{row.lastName}</TableCell>
{/* TODO: switch to dayjs */}
<TableCell>{new Date(row.birthDate).toLocaleDateString('en-us')}</TableCell>
</TableRow>
<TableRow key={`expandableTable-expanded-${row.payerName}-${row.birthDate}`} >
<TableCell style={{ padding: 0, paddingLeft: "32px" }} colSpan={12}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ padding: 2 }}>
<Grid container spacing={2}>
<Grid xs>
<Typography variant="body2" sx={{fontWeight: "bold"}}>
Subscriber Member Id
</Typography>
<Typography variant="body2">
{row.subscriberMemberId}
</Typography>
</Grid>
<Grid xs>
<Typography variant="body2" sx={{fontWeight: "bold"}}>
Subscriber Relationship
</Typography>
<Typography variant="body2">
{row.subscriberRelationship}
</Typography>
</Grid>
<Grid xs>
<Typography variant="body2" sx={{fontWeight: "bold"}}>
Subscriber Relationship Code
</Typography>
<Typography variant="body2">
{row.subscriberRelationshipCode}
</Typography>
</Grid>
</Grid>
</Box>
</Collapse>
</TableCell>
</TableRow>
</>
);
})}
</TableBody>
</Table>
</TableContainer>
);
},
};
90 changes: 90 additions & 0 deletions packages/table/src/lib/TableRow.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
import type { Meta, StoryObj } from '@storybook/react';
import { TableRow, TableRowProps } from './TableRow';
import { TableBody, TableCell } from '..';
import { useState } from 'react';
import { IconButton } from '@availity/mui-button';
import { CollapseIcon, ExpandIcon } from '@availity/mui-icon';
import { Box, Grid } from '@availity/mui-layout';
import { Collapse } from '@availity/mui-transitions';
import { Typography } from '@availity/mui-typography';

const meta: Meta<typeof TableRow> = {
title: 'Components/Table/TableRow',
Expand All @@ -26,3 +32,87 @@ export const _TableRow: StoryObj<typeof TableRow> = {
</TableBody>
),
};

export const _CollapsibleRow: StoryObj<typeof TableRow> = {
render: (args: TableRowProps) => {
const [open, setOpen] = useState(false);

return (
<TableBody>
<TableRow {...args}>
<TableCell padding="checkbox">
<IconButton
title="expand row"
size="medium"
onClick={() => setOpen(!open)}
>
{open ? <ExpandIcon /> : <CollapseIcon />}
</IconButton>
</TableCell>
<TableCell>Cell 1</TableCell>
<TableCell>Cell 2</TableCell>
<TableCell>Cell 3</TableCell>
</TableRow>
<TableRow {...args}>
<TableCell style={{ padding: 0, paddingLeft: "32px" }} colSpan={12} >
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ padding: 2 }}>
<Grid container spacing={2} wrap="wrap">
<Grid xs>
<Typography variant="body2" sx={{fontWeight: "bold"}}>
Extra Data 1
</Typography>
<Typography variant="body2">
Lorem Ipsum
</Typography>
</Grid>
<Grid xs>
<Typography variant="body2" sx={{fontWeight: "bold"}}>
Extra Data 2
</Typography>
<Typography variant="body2">
Lorem Ipsum
</Typography>
</Grid>
<Grid xs>
<Typography variant="body2" sx={{fontWeight: "bold"}}>
Extra Data 3
</Typography>
<Typography variant="body2">
Lorem Ipsum
</Typography>
</Grid>
</Grid>
<Grid container spacing={2} wrap="wrap">
<Grid xs>
<Typography variant="body2" sx={{fontWeight: "bold"}}>
Extra Data 4
</Typography>
<Typography variant="body2">
Lorem Ipsum
</Typography>
</Grid>
<Grid xs>
<Typography variant="body2" sx={{fontWeight: "bold"}}>
Extra Data 5
</Typography>
<Typography variant="body2">
Lorem Ipsum
</Typography>
</Grid>
<Grid xs>
<Typography variant="body2" sx={{fontWeight: "bold"}}>
Extra Data 6
</Typography>
<Typography variant="body2">
Lorem Ipsum
</Typography>
</Grid>
</Grid>
</Box>
</Collapse>
</TableCell>
</TableRow>
</TableBody>
)},
};

0 comments on commit 3fc4185

Please sign in to comment.