refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/datatables/TableContent.tsx

@@ -0,0 +1,49 @@
+import { PropsWithChildren } from 'react';
+import { Row, TableRowProps } from 'react-table';
+
+interface Props<T extends Record<string, unknown> = Record<string, unknown>> {
+  isLoading?: boolean;
+  rows: Row<T>[];
+  emptyContent?: string;
+  prepareRow(row: Row<T>): void;
+  renderRow(row: Row<T>, rowProps: TableRowProps): React.ReactNode;
+}
+
+export function TableContent<
+  T extends Record<string, unknown> = Record<string, unknown>
+>({
+  isLoading = false,
+  rows,
+  emptyContent = 'No items available',
+  prepareRow,
+  renderRow,
+}: Props<T>) {
+  if (isLoading) {
+    return <TableContentOneColumn>Loading...</TableContentOneColumn>;
+  }
+
+  if (!rows.length) {
+    return <TableContentOneColumn>{emptyContent}</TableContentOneColumn>;
+  }
+
+  return (
+    <>
+      {rows.map((row) => {
+        prepareRow(row);
+        const { key, className, role, style } = row.getRowProps();
+        return renderRow(row, { key, className, role, style });
+      })}
+    </>
+  );
+}
+
+function TableContentOneColumn({ children }: PropsWithChildren<unknown>) {
+  // using MAX_SAFE_INTEGER to make sure the single column will be the size of the table
+  return (
+    <tr>
+      <td colSpan={Number.MAX_SAFE_INTEGER} className="text-center text-muted">
+        {children}
+      </td>
+    </tr>
+  );
+}