MF-647: Add Patient Table component

packages/esm-patient-list-app/src/PatientTable/patient-table.component.tsx

@@ -0,0 +1,64 @@
+import DataTable, {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from 'carbon-components-react/lib/components/DataTable';
+import React from 'react';
+
+const PatientTable: React.FC<{ patients: Array<Object>; columns: Array<PatientTableColumn> }> = ({
+  patients,
+  columns,
+}) => {
+  const rows = patients.map((patient) => {
+    const row = {};
+    columns.forEach((column) => {
+      row['id'] = patient['id'] || patient['uuid'];
+      row[column.key] = column.getValue ? column.getValue(patient) : patient[column.key];
+    });
+    return row;
+  });
+  return (
+    <TableContainer>
+      <DataTable rows={rows as any} headers={columns as any} isSortable={true} size="normal" useZebraStyles={true}>
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader
+                    {...getHeaderProps({
+                      header,
+                      isSortable: header.isSortable,
+                    })}>
+                    {header.header?.content ?? header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+    </TableContainer>
+  );
+};
+
+export interface PatientTableColumn {
+  key: string;
+  label: string;
+  getValue?: (patient) => any;
+}
+
+export default PatientTable;

packages/esm-patient-list-app/src/index.ts

@@ -1,5 +1,4 @@
-import { getAsyncLifecycle } from '@openmrs/esm-framework';
-import { registerBreadcrumbs } from '@openmrs/esm-framework';
+import { getAsyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
 import './offline/offlineData';
 import './patientListData/api';
 
@@ -66,6 +65,15 @@ function setupOpenMRS() {
           moduleName,
         }),
       },
+      {
+        id: 'patient-table',
+        load: getAsyncLifecycle(() => import('./PatientTable/patient-table.component'), {
+          featureName: 'patient-table',
+          moduleName,
+        }),
+        online: true,
+        offline: true,
+      },
     ],
   };
 }