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

45 lines
1.1 KiB
TypeScript

import { Row, Table as TableInstance } from '@tanstack/react-table';
import { Table } from './Table';
interface Props<D extends Record<string, unknown>> {
tableInstance: TableInstance<D>;
renderRow(row: Row<D>): 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 headerGroups = tableInstance.getHeaderGroups();
const pageRowModel = tableInstance.getPaginationRowModel();
return (
<Table>
<thead>
{headerGroups.map((headerGroup) => (
<Table.HeaderRow<D>
key={headerGroup.id}
headers={headerGroup.headers}
onSortChange={onSortChange}
/>
))}
</thead>
<tbody>
<Table.Content<D>
rows={pageRowModel.rows}
isLoading={isLoading}
emptyContent={emptyContentLabel}
renderRow={renderRow}
/>
</tbody>
</Table>
);
}