portainer/app/react/components/datatables/TableContent.tsx

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-muted text-center">
        {children}
      </td>
    </tr>
  );
}