refactor(ui/datatables): migrate views to use datatable component [EE-4064] (#7609)

app/react/components/datatables/DatatableContent.tsx

@@ -0,0 +1,62 @@
+import { Row, TableInstance, TableRowProps } from 'react-table';
+
+import { Table } from './Table';
+
+interface Props<D extends Record<string, unknown>> {
+  tableInstance: TableInstance<D>;
+  renderRow(row: Row<D>, rowProps: TableRowProps): React.ReactNode;
+  onSortChange?(colId: string, desc: boolean): void;
+  isLoading?: boolean;
+  emptyContentLabel?: string;
+}
+
+export function DatatableContent<D extends Record<string, unknown>>({
+  tableInstance,
+  renderRow,
+  onSortChange,
+  isLoading,
+  emptyContentLabel,
+}: Props<D>) {
+  const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow } =
+    tableInstance;
+
+  const tableProps = getTableProps();
+  const tbodyProps = getTableBodyProps();
+  return (
+    <Table
+      className={tableProps.className}
+      role={tableProps.role}
+      style={tableProps.style}
+    >
+      <thead>
+        {headerGroups.map((headerGroup) => {
+          const { key, className, role, style } =
+            headerGroup.getHeaderGroupProps();
+          return (
+            <Table.HeaderRow<D>
+              key={key}
+              className={className}
+              role={role}
+              style={style}
+              headers={headerGroup.headers}
+              onSortChange={onSortChange}
+            />
+          );
+        })}
+      </thead>
+      <tbody
+        className={tbodyProps.className}
+        role={tbodyProps.role}
+        style={tbodyProps.style}
+      >
+        <Table.Content<D>
+          rows={page}
+          isLoading={isLoading}
+          prepareRow={prepareRow}
+          emptyContent={emptyContentLabel}
+          renderRow={renderRow}
+        />
+      </tbody>
+    </Table>
+  );
+}