Render noDataMessage after useReactTable

differentialhq · Dec 29, 2023 · cc68699 · cc68699
1 parent bfe7749
commit cc68699
Showing 1 changed file with 3 additions and 5 deletions.
diff --git a/admin/app/clusters/[id]/DataTable.tsx b/admin/app/clusters/[id]/DataTable.tsx
@@ -22,11 +22,8 @@ export const DataTable = <T = any,>({
   noDataMessage?: string;
   columnDef?: ColumnDef<T>[];
 }) => {
-  if (data === undefined || data.length === 0) {
-    return <p className="text-gray-400 mt-2">{noDataMessage}</p>;
-  }
 
-  const keys = Object.keys(data[0]);
+  const keys = data.length > 0 ? Object.keys(data[0]) : [];
 
   const columns: ColumnDef<any>[] =
     columnDef ||
@@ -42,6 +39,7 @@ export const DataTable = <T = any,>({
     manualSorting: true,
   });
 
+
   return (
     <div className="rounded-md border">
       <Table>
@@ -80,7 +78,7 @@ export const DataTable = <T = any,>({
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+                  <p className="text-gray-400 mt-2">{noDataMessage}</p>;
               </TableCell>
             </TableRow>
           )}