import { useMemo} from "react"; import type { BaseRecord } from "@refinedev/core"; import { useTable } from "@refinedev/react-table"; import { type ColumnDef, flexRender, } from "@tanstack/react-table"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "./ui/table" import { Skeleton } from "./ui/skeleton"; import { DataTablePagination } from "./table-pagination" interface DataTableProps { columns: ColumnDef[], resource: string; dataProviderName?: string; } export function DataTable({ columns, resource, dataProviderName }: DataTableProps) { const table = useTable({ columns, refineCoreProps: { resource, dataProviderName: dataProviderName || "default" } }) const loadingRows = useMemo(() => Array(4).fill({}).map(() => ({ getIsSelected: () => false, getVisibleCells: () => columns.map(() => ({ column: { columnDef: { cell: , } }, getContext: () => null })), })), []) const rows = table.refineCore.tableQueryResult.isLoading ? loadingRows : table.getRowModel().rows return ( <> {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header, index) => { return ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ) })} ))} {rows.length ? ( rows.map((row, index) => ( {row.getVisibleCells().map((cell, index) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} )) ) : ( No results. )}
) }