Merge pull request #21 from MetroStar/CSG-818

CSG-818: Replace Dashboard Table with new Data Table

package.json

@@ -27,9 +27,10 @@
   },
   "dependencies": {
     "@metrostar/comet-data-viz": "1.1.1",
-    "@metrostar/comet-extras": "1.1.0",
+    "@metrostar/comet-extras": "1.2.0",
     "@metrostar/comet-uswds": "1.4.0",
     "@tanstack/react-query": "4.32.0",
+    "@tanstack/react-table": "8.9.3",
     "@types/keycloak-js": "^3.4.1",
     "@uswds/uswds": "3.6.0",
     "axios": "1.4.0",
@@ -47,9 +48,10 @@
     "@babel/preset-env": "7.22.9",
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/jest": "^29.5.4",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "6.2.0",

src/pages/dashboard/dashboard-table/dashboard-table.test.tsx

@@ -27,9 +27,9 @@ describe('DashboardTable', () => {
     await act(async () => {
       expect(baseElement).toBeTruthy();
     });
-    expect(baseElement.querySelector('.usa-table')).toBeDefined();
+    expect(baseElement.querySelector('.data-table')).toBeDefined();
     expect(
-      baseElement.querySelectorAll('.usa-table > tbody > tr'),
+      baseElement.querySelectorAll('.data-table > tbody > tr'),
     ).toHaveLength(5);
   });
 });

src/pages/dashboard/dashboard-table/dashboard-table.tsx

@@ -1,4 +1,5 @@
-import { Table, TableColumn } from '@metrostar/comet-uswds';
+import { DataTable } from '@metrostar/comet-extras';
+import { ColumnDef } from '@tanstack/react-table';
 import React, { useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import { Launch } from '../../../types/launch';
@@ -12,52 +13,61 @@ export const DashboardTable = ({
   items,
 }: DashboardTableProps): React.ReactElement => {
   const [data, setData] = useState<LaunchData[]>();
+  const cols = React.useMemo<ColumnDef<LaunchData>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: 'Name',
+        cell: (info) => info.getValue(),
+      },
+      {
+        accessorKey: 'provider',
+        header: 'Service Provider',
+        cell: (info) => info.getValue(),
+      },
+      {
+        accessorKey: 'status',
+        header: 'Status',
+        cell: (info) => info.getValue(),
+      },
+      {
+        accessorKey: 'last_updated',
+        header: 'Last Updated',
+        cell: (info) => info.getValue(),
+      },
+    ],
+    [],
+  );
+
   useEffect(() => {
     if (items) {
       const newData: LaunchData[] = [];
       items.forEach((item: Launch) => {
         newData.push({
-          name: {
-            value: (
-              <NavLink
-                id={`details-link-${item.id}`}
-                to={`/details/${item.id}`}
-              >
-                {item.name}
-              </NavLink>
-            ),
-            sortValue: item.status.name,
-          },
-          provider: {
-            value: item.launch_service_provider.name,
-            sortValue: item.launch_service_provider.name,
-          },
-          status: { value: item.status.name, sortValue: item.status.name },
-          last_updated: {
-            value: item.last_updated,
-            sortValue: item.last_updated,
-          },
+          name: (
+            <NavLink id={`details-link-${item.id}`} to={`/details/${item.id}`}>
+              {item.name}
+            </NavLink>
+          ),
+          provider: item.launch_service_provider.name,
+          status: item.status.name,
+          last_updated: item.last_updated,
         });
       });
       setData(newData);
     }
   }, [items]);
 
-  const columns: TableColumn[] = [
-    { id: 'name', name: 'Name' },
-    { id: 'provider', name: 'Service Provider' },
-    { id: 'status', name: 'Status' },
-    { id: 'last_updated', name: 'Last Updated' },
-  ];
-
   return data ? (
-    <Table
+    <DataTable
       id="launch-table"
       className="width-full"
-      columns={columns}
+      columns={cols}
       data={data}
       sortable
-    />
+      sortCol="last_updated"
+      sortDir="desc"
+    ></DataTable>
   ) : (
     <></>
   );

src/pages/dashboard/types.ts

@@ -1,15 +1,10 @@
 import { ReactNode } from 'react';
 
 export interface LaunchData {
-  provider: SortableDataCell;
-  name: SortableDataCell;
-  status: SortableDataCell;
-  last_updated: SortableDataCell;
-}
-
-export interface SortableDataCell {
-  value: string | ReactNode;
-  sortValue: string;
+  name: string | ReactNode;
+  provider: string;
+  status: string;
+  last_updated: string;
 }
 
 export interface ChartData {