@availity/mui-table 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/package.json +11 -11
- package/src/lib/Table.stories.tsx +86 -0
- package/src/lib/TableRow.stories.tsx +90 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.2.3](https://github.com/Availity/element/compare/@availity/mui-table@0.2.2...@availity/mui-table@0.2.3) (2024-12-16)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `mui-pagination` updated to version `0.2.2`
|
|
10
|
+
## [0.2.2](https://github.com/Availity/element/compare/@availity/mui-table@0.2.1...@availity/mui-table@0.2.2) (2024-12-09)
|
|
11
|
+
|
|
12
|
+
### Dependency Updates
|
|
13
|
+
|
|
14
|
+
* `mui-button` updated to version `0.2.1`
|
|
15
|
+
* `mui-chip` updated to version `0.2.1`
|
|
16
|
+
* `mui-form-utils` updated to version `0.2.1`
|
|
17
|
+
* `mui-icon` updated to version `0.2.1`
|
|
18
|
+
* `mui-link` updated to version `0.2.1`
|
|
19
|
+
* `mui-menu` updated to version `0.2.1`
|
|
20
|
+
* `mui-textfield` updated to version `0.2.1`
|
|
21
|
+
* `mui-pagination` updated to version `0.2.1`
|
|
22
|
+
* `mui-transitions` updated to version `0.2.1`
|
|
5
23
|
## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-table@0.2.0...@availity/mui-table@0.2.1) (2024-11-21)
|
|
6
24
|
|
|
7
25
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-table",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Availity MUI Table Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -33,21 +33,21 @@
|
|
|
33
33
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@availity/mui-form-utils": "0.15.
|
|
37
|
-
"@availity/mui-icon": "0.11.
|
|
38
|
-
"@availity/mui-pagination": "0.3.
|
|
36
|
+
"@availity/mui-form-utils": "0.15.1",
|
|
37
|
+
"@availity/mui-icon": "0.11.1",
|
|
38
|
+
"@availity/mui-pagination": "0.3.7",
|
|
39
39
|
"@availity/mui-utils": "0.1.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@availity/mui-button": "0.6.
|
|
43
|
-
"@availity/mui-chip": "0.2.
|
|
44
|
-
"@availity/mui-form-utils": "0.15.
|
|
45
|
-
"@availity/mui-icon": "0.11.
|
|
42
|
+
"@availity/mui-button": "0.6.12",
|
|
43
|
+
"@availity/mui-chip": "0.2.23",
|
|
44
|
+
"@availity/mui-form-utils": "0.15.1",
|
|
45
|
+
"@availity/mui-icon": "0.11.1",
|
|
46
46
|
"@availity/mui-layout": "0.2.0",
|
|
47
|
-
"@availity/mui-link": "0.4.
|
|
48
|
-
"@availity/mui-menu": "0.2.
|
|
47
|
+
"@availity/mui-link": "0.4.5",
|
|
48
|
+
"@availity/mui-menu": "0.2.12",
|
|
49
49
|
"@availity/mui-paper": "0.1.9",
|
|
50
|
-
"@availity/mui-textfield": "0.6.
|
|
50
|
+
"@availity/mui-textfield": "0.6.13",
|
|
51
51
|
"@availity/mui-typography": "0.2.1",
|
|
52
52
|
"@mui/material": "^5.15.15",
|
|
53
53
|
"react": "18.2.0",
|
|
@@ -4,7 +4,11 @@
|
|
|
4
4
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
5
5
|
import { useMemo, useState } from 'react';
|
|
6
6
|
import Checkbox from '@mui/material/Checkbox';
|
|
7
|
+
import { IconButton } from '@availity/mui-button';
|
|
7
8
|
import { StatusChip, StatusChipProps } from '@availity/mui-chip';
|
|
9
|
+
import { CollapseIcon, ExpandIcon } from '@availity/mui-icon';
|
|
10
|
+
import { Box, Grid } from '@availity/mui-layout';
|
|
11
|
+
import { Collapse } from '@availity/mui-transitions';
|
|
8
12
|
import { Typography } from '@availity/mui-typography';
|
|
9
13
|
import { visuallyHidden } from '@availity/mui-utils';
|
|
10
14
|
import Patients from '../../../../data/patients.json';
|
|
@@ -459,3 +463,85 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
|
|
|
459
463
|
);
|
|
460
464
|
},
|
|
461
465
|
};
|
|
466
|
+
|
|
467
|
+
export const _ExpandableTable: StoryObj<typeof Table> = {
|
|
468
|
+
render: (args: TableProps) => {
|
|
469
|
+
return (
|
|
470
|
+
<TableContainer>
|
|
471
|
+
<Typography id="table-title" sx={visuallyHidden}>
|
|
472
|
+
Table
|
|
473
|
+
</Typography>
|
|
474
|
+
<Table aria-labelledby="table-title" {...args}>
|
|
475
|
+
<TableHead>
|
|
476
|
+
<TableRow>
|
|
477
|
+
<TableCell><div style={visuallyHidden}>Expand Row</div></TableCell>
|
|
478
|
+
<TableCell>Payer</TableCell>
|
|
479
|
+
<TableCell>Patient First Name</TableCell>
|
|
480
|
+
<TableCell>Patient Last Name</TableCell>
|
|
481
|
+
<TableCell>Birth Date</TableCell>
|
|
482
|
+
</TableRow>
|
|
483
|
+
</TableHead>
|
|
484
|
+
<TableBody>
|
|
485
|
+
{dataRows.map((row) => {
|
|
486
|
+
const [open, setOpen] = useState(false);
|
|
487
|
+
return (
|
|
488
|
+
<>
|
|
489
|
+
<TableRow key={`expandableTable-${row.payerName}-${row.birthDate}`}>
|
|
490
|
+
<TableCell padding="checkbox">
|
|
491
|
+
<IconButton
|
|
492
|
+
title="expand row"
|
|
493
|
+
size="medium"
|
|
494
|
+
onClick={() => setOpen(!open)}
|
|
495
|
+
>
|
|
496
|
+
{open ? <ExpandIcon /> : <CollapseIcon />}
|
|
497
|
+
</IconButton>
|
|
498
|
+
</TableCell>
|
|
499
|
+
<TableCell>{row.payerName}</TableCell>
|
|
500
|
+
<TableCell>{row.firstName}</TableCell>
|
|
501
|
+
<TableCell>{row.lastName}</TableCell>
|
|
502
|
+
{/* TODO: switch to dayjs */}
|
|
503
|
+
<TableCell>{new Date(row.birthDate).toLocaleDateString('en-us')}</TableCell>
|
|
504
|
+
</TableRow>
|
|
505
|
+
<TableRow key={`expandableTable-expanded-${row.payerName}-${row.birthDate}`} >
|
|
506
|
+
<TableCell style={{ padding: 0, paddingLeft: "32px" }} colSpan={12}>
|
|
507
|
+
<Collapse in={open} timeout="auto" unmountOnExit>
|
|
508
|
+
<Box sx={{ padding: 2 }}>
|
|
509
|
+
<Grid container spacing={2}>
|
|
510
|
+
<Grid xs>
|
|
511
|
+
<Typography variant="body2" sx={{fontWeight: "bold"}}>
|
|
512
|
+
Subscriber Member Id
|
|
513
|
+
</Typography>
|
|
514
|
+
<Typography variant="body2">
|
|
515
|
+
{row.subscriberMemberId}
|
|
516
|
+
</Typography>
|
|
517
|
+
</Grid>
|
|
518
|
+
<Grid xs>
|
|
519
|
+
<Typography variant="body2" sx={{fontWeight: "bold"}}>
|
|
520
|
+
Subscriber Relationship
|
|
521
|
+
</Typography>
|
|
522
|
+
<Typography variant="body2">
|
|
523
|
+
{row.subscriberRelationship}
|
|
524
|
+
</Typography>
|
|
525
|
+
</Grid>
|
|
526
|
+
<Grid xs>
|
|
527
|
+
<Typography variant="body2" sx={{fontWeight: "bold"}}>
|
|
528
|
+
Subscriber Relationship Code
|
|
529
|
+
</Typography>
|
|
530
|
+
<Typography variant="body2">
|
|
531
|
+
{row.subscriberRelationshipCode}
|
|
532
|
+
</Typography>
|
|
533
|
+
</Grid>
|
|
534
|
+
</Grid>
|
|
535
|
+
</Box>
|
|
536
|
+
</Collapse>
|
|
537
|
+
</TableCell>
|
|
538
|
+
</TableRow>
|
|
539
|
+
</>
|
|
540
|
+
);
|
|
541
|
+
})}
|
|
542
|
+
</TableBody>
|
|
543
|
+
</Table>
|
|
544
|
+
</TableContainer>
|
|
545
|
+
);
|
|
546
|
+
},
|
|
547
|
+
};
|
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
4
|
import { TableRow, TableRowProps } from './TableRow';
|
|
5
5
|
import { TableBody, TableCell } from '..';
|
|
6
|
+
import { useState } from 'react';
|
|
7
|
+
import { IconButton } from '@availity/mui-button';
|
|
8
|
+
import { CollapseIcon, ExpandIcon } from '@availity/mui-icon';
|
|
9
|
+
import { Box, Grid } from '@availity/mui-layout';
|
|
10
|
+
import { Collapse } from '@availity/mui-transitions';
|
|
11
|
+
import { Typography } from '@availity/mui-typography';
|
|
6
12
|
|
|
7
13
|
const meta: Meta<typeof TableRow> = {
|
|
8
14
|
title: 'Components/Table/TableRow',
|
|
@@ -26,3 +32,87 @@ export const _TableRow: StoryObj<typeof TableRow> = {
|
|
|
26
32
|
</TableBody>
|
|
27
33
|
),
|
|
28
34
|
};
|
|
35
|
+
|
|
36
|
+
export const _CollapsibleRow: StoryObj<typeof TableRow> = {
|
|
37
|
+
render: (args: TableRowProps) => {
|
|
38
|
+
const [open, setOpen] = useState(false);
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<TableBody>
|
|
42
|
+
<TableRow {...args}>
|
|
43
|
+
<TableCell padding="checkbox">
|
|
44
|
+
<IconButton
|
|
45
|
+
title="expand row"
|
|
46
|
+
size="medium"
|
|
47
|
+
onClick={() => setOpen(!open)}
|
|
48
|
+
>
|
|
49
|
+
{open ? <ExpandIcon /> : <CollapseIcon />}
|
|
50
|
+
</IconButton>
|
|
51
|
+
</TableCell>
|
|
52
|
+
<TableCell>Cell 1</TableCell>
|
|
53
|
+
<TableCell>Cell 2</TableCell>
|
|
54
|
+
<TableCell>Cell 3</TableCell>
|
|
55
|
+
</TableRow>
|
|
56
|
+
<TableRow {...args}>
|
|
57
|
+
<TableCell style={{ padding: 0, paddingLeft: "32px" }} colSpan={12} >
|
|
58
|
+
<Collapse in={open} timeout="auto" unmountOnExit>
|
|
59
|
+
<Box sx={{ padding: 2 }}>
|
|
60
|
+
<Grid container spacing={2} wrap="wrap">
|
|
61
|
+
<Grid xs>
|
|
62
|
+
<Typography variant="body2" sx={{fontWeight: "bold"}}>
|
|
63
|
+
Extra Data 1
|
|
64
|
+
</Typography>
|
|
65
|
+
<Typography variant="body2">
|
|
66
|
+
Lorem Ipsum
|
|
67
|
+
</Typography>
|
|
68
|
+
</Grid>
|
|
69
|
+
<Grid xs>
|
|
70
|
+
<Typography variant="body2" sx={{fontWeight: "bold"}}>
|
|
71
|
+
Extra Data 2
|
|
72
|
+
</Typography>
|
|
73
|
+
<Typography variant="body2">
|
|
74
|
+
Lorem Ipsum
|
|
75
|
+
</Typography>
|
|
76
|
+
</Grid>
|
|
77
|
+
<Grid xs>
|
|
78
|
+
<Typography variant="body2" sx={{fontWeight: "bold"}}>
|
|
79
|
+
Extra Data 3
|
|
80
|
+
</Typography>
|
|
81
|
+
<Typography variant="body2">
|
|
82
|
+
Lorem Ipsum
|
|
83
|
+
</Typography>
|
|
84
|
+
</Grid>
|
|
85
|
+
</Grid>
|
|
86
|
+
<Grid container spacing={2} wrap="wrap">
|
|
87
|
+
<Grid xs>
|
|
88
|
+
<Typography variant="body2" sx={{fontWeight: "bold"}}>
|
|
89
|
+
Extra Data 4
|
|
90
|
+
</Typography>
|
|
91
|
+
<Typography variant="body2">
|
|
92
|
+
Lorem Ipsum
|
|
93
|
+
</Typography>
|
|
94
|
+
</Grid>
|
|
95
|
+
<Grid xs>
|
|
96
|
+
<Typography variant="body2" sx={{fontWeight: "bold"}}>
|
|
97
|
+
Extra Data 5
|
|
98
|
+
</Typography>
|
|
99
|
+
<Typography variant="body2">
|
|
100
|
+
Lorem Ipsum
|
|
101
|
+
</Typography>
|
|
102
|
+
</Grid>
|
|
103
|
+
<Grid xs>
|
|
104
|
+
<Typography variant="body2" sx={{fontWeight: "bold"}}>
|
|
105
|
+
Extra Data 6
|
|
106
|
+
</Typography>
|
|
107
|
+
<Typography variant="body2">
|
|
108
|
+
Lorem Ipsum
|
|
109
|
+
</Typography>
|
|
110
|
+
</Grid>
|
|
111
|
+
</Grid>
|
|
112
|
+
</Box>
|
|
113
|
+
</Collapse>
|
|
114
|
+
</TableCell>
|
|
115
|
+
</TableRow>
|
|
116
|
+
</TableBody>
|
|
117
|
+
)},
|
|
118
|
+
};
|