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

50 lines
1.3 KiB
TypeScript
Raw Normal View History

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>
);
}