feat(mui-table): add empty cell placeholder

Availity · Nov 18, 2024 · 2751a39 · 2751a39
1 parent 6025a97
commit 2751a39
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 16 deletions.
diff --git a/data/patients.json b/data/patients.json
@@ -19,7 +19,7 @@
           "genderCode": "F",
           "ssn": null,
           "birthDate": "1956-02-16T05:00:00.000+0000",
-          "deathDate": null,
+          "deathDate": "2018-05-31T15:04:05.999-05:00",
           "address": null,
           "subscriberMemberId": "ABC12345",
           "payerName": "PAYER 1"
@@ -114,7 +114,7 @@
           "genderCode": "F",
           "ssn": null,
           "birthDate": "1958-01-19T05:00:00.000+0000",
-          "deathDate": null,
+          "deathDate": "2018-05-31T15:04:05.999-05:00",
           "address": null,
           "subscriberMemberId": "12380123",
           "payerName": "PAYER 4"
@@ -133,7 +133,7 @@
           "genderCode": "F",
           "ssn": null,
           "birthDate": "1955-08-25T04:00:00.000+0000",
-          "deathDate": null,
+          "deathDate": "2018-05-31T15:04:05.999-05:00",
           "address": null,
           "subscriberMemberId": "NAD12315",
           "payerName": "PAYER 5"
@@ -190,7 +190,7 @@
           "genderCode": "F",
           "ssn": null,
           "birthDate": "1935-08-28T04:00:00.000+0000",
-          "deathDate": null,
+          "deathDate": "2018-05-31T15:04:05.999-05:00",
           "address": null,
           "subscriberMemberId": "ASD13501",
           "payerName": "PAYER 2"
@@ -247,7 +247,7 @@
           "genderCode": "M",
           "ssn": null,
           "birthDate": "2017-08-20T04:00:00.000+0000",
-          "deathDate": null,
+          "deathDate": "2018-05-31T15:04:05.999-05:00",
           "address": null,
           "subscriberMemberId": "ASDF02389",
           "payerName": "PAYER 2"
@@ -323,7 +323,7 @@
           "genderCode": "M",
           "ssn": null,
           "birthDate": "1991-02-11T05:00:00.000+0000",
-          "deathDate": null,
+          "deathDate": "2018-05-31T15:04:05.999-05:00",
           "address": null,
           "subscriberMemberId": "AFN1098",
           "payerName": "PAYER 5"
@@ -380,7 +380,7 @@
           "genderCode": "F",
           "ssn": null,
           "birthDate": "1945-03-13T04:00:00.000+0000",
-          "deathDate": null,
+          "deathDate": "2018-05-31T15:04:05.999-05:00",
           "address": null,
           "subscriberMemberId": "SGTEST2",
           "payerName": "PAYER 5"

diff --git a/packages/table/src/lib/Table.stories.tsx b/packages/table/src/lib/Table.stories.tsx
@@ -4,9 +4,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useMemo, useState } from 'react';
 import Checkbox from '@mui/material/Checkbox';
-import { visuallyHidden } from '@mui/utils';
-import type { AlertColor } from '@mui/material/Alert';
-import { Chip } from '@availity/mui-chip';
+import { StatusChip, StatusChipProps } from '@availity/mui-chip';
+import { Typography } from '@availity/mui-typography';
+import { visuallyHidden } from '@availity/mui-utils';
 import Patients from '../../../../data/patients.json';
 import { Patient } from '../../../../data/patient';
 import {
@@ -21,7 +21,6 @@ import {
   TablePagination,
   TableFooter,
 } from '../index';
-import { Typography } from '@availity/mui-typography';
 
 const meta: Meta<typeof Table> = {
   title: 'Components/Table/Table',
@@ -31,15 +30,15 @@ const meta: Meta<typeof Table> = {
 
 export default meta;
 
-const StatusChip = (status: string) => {
-  const color: Record<string, AlertColor> = {
+const Status = (status: string) => {
+  const color: Record<string, StatusChipProps['color']> = {
     Pending: 'warning',
     'Needs Info': 'info',
     Denied: 'error',
     Approved: 'success',
   };
 
-  return <Chip size="small" color={color[status]} label={status} />;
+  return <StatusChip color={color[status]} label={status} />;
 };
 
 const dataRows = Patients.data.patientPagination.items.slice(0, 7);
@@ -56,6 +55,7 @@ export const _Table: StoryObj<typeof Table> = {
             <TableRow>
               <TableCell>Payer</TableCell>
               <TableCell>Patient First Name</TableCell>
+              <TableCell>Patient Middle Initial</TableCell>
               <TableCell>Patient Last Name</TableCell>
               <TableCell>Birth Date</TableCell>
             </TableRow>
@@ -66,6 +66,7 @@ export const _Table: StoryObj<typeof Table> = {
                 <TableRow key={`basicTable-${row.payerName}-${row.birthDate}`}>
                   <TableCell>{row.payerName}</TableCell>
                   <TableCell>{row.firstName}</TableCell>
+                  <TableCell>{row.middleName}</TableCell>
                   <TableCell>{row.lastName}</TableCell>
                   {/* TODO: switch to dayjs */}
                   <TableCell>{new Date(row.birthDate).toLocaleDateString('en-us')}</TableCell>
@@ -380,6 +381,10 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
         id: 'birthDate',
         label: 'Birth Date',
       },
+      {
+        id: 'deathDate',
+        label: 'Death Date',
+      },
       {
         id: 'payerName',
         label: 'Payer',
@@ -431,6 +436,7 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
                 <TableCell>{row.firstName}</TableCell>
                 <TableCell>{row.lastName}</TableCell>
                 <TableCell>{new Date(row.birthDate).toLocaleDateString('en-us')}</TableCell>
+                <TableCell>{row.deathDate && new Date(row.deathDate).toLocaleDateString('en-us')}</TableCell>
                 <TableCell>{row.payerName}</TableCell>
               </TableRow>
             ))}

diff --git a/packages/table/src/lib/TableCell.test.tsx b/packages/table/src/lib/TableCell.test.tsx
@@ -6,4 +6,14 @@ describe('TableCell', () => {
     const { getByText } = render(<TableCell>Test</TableCell>);
     expect(getByText('Test')).toBeTruthy();
   });
+  test('should add placeholder to empty cell', () => {
+    const { getByText } = render(<TableCell></TableCell>);
+    expect(getByText('-')).toBeTruthy();
+    expect(getByText('No Data')).toBeTruthy();
+  });
+  test('shouldnt add placeholder to empty cell when disableEmptyPlaceholder is true', () => {
+    const { queryByText } = render(<TableCell disableEmptyPlaceholder></TableCell>);
+    expect(queryByText('-')).toBeNull();
+    expect(queryByText('No Data')).toBeNull();
+  });
 });
diff --git a/packages/table/src/lib/TableCell.tsx b/packages/table/src/lib/TableCell.tsx
@@ -3,6 +3,7 @@ import {
   TableCellProps as MuiTableCellProps,
   TableCellBaseProps,
 } from '@mui/material/TableCell';
+import { visuallyHidden } from '@availity/mui-utils';
 import { ElementType } from 'react';
 
 declare module '@mui/material/TableCell' {
@@ -13,8 +14,13 @@ declare module '@mui/material/TableCell' {
 
 export type TableCellProps = {
   component?: ElementType<TableCellBaseProps>;
+  /** If `true` the placeholder for empty cells and accessible "No Data" text is disabled. */
+  disableEmptyPlaceholder?: boolean;
 } & MuiTableCellProps;
 
-export const TableCell = (props: TableCellProps): JSX.Element => {
-  return <MuiTableCell {...props} />;
+export const TableCell = ({disableEmptyPlaceholder = false, children, ...props}: TableCellProps): JSX.Element => {
+  const isPlaceholderActive = !disableEmptyPlaceholder && !children;
+  const placeholder = <><div aria-hidden>-</div><div style={visuallyHidden}>No Data</div></>;
+
+  return <MuiTableCell {...props}>{isPlaceholderActive ? placeholder : children}</MuiTableCell>;
 };