mirror of https://github.com/portainer/portainer
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
|
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>
|
||
|
);
|
||
|
}
|