feat: enhance DataTable with custom empty state support and update GrnClient to utilize it

distribution_fe/components/shared/data-table/data-table.tsx

@@ -620,9 +620,11 @@ export function DataTable<T extends object>({
           </div>
         ))}
         {!loading && displayData.length === 0 && (
-          <div className="h-32 flex items-center justify-center text-muted-foreground text-sm">
-            {config.emptyMessage ?? 'No records found.'}
-          </div>
+          config.emptyState ?? (
+            <div className="h-32 flex items-center justify-center text-muted-foreground text-sm">
+              {config.emptyMessage ?? 'No records found.'}
+            </div>
+          )
         )}
         {!loading && displayData.map(row => (
           <MobileCard
@@ -710,9 +712,13 @@ export function DataTable<T extends object>({
               <TableRow>
                 <TableCell
                   colSpan={visibleColumns.length + (config.selectable ? 1 : 0) + (config.expandable ? 1 : 0)}
-                  className="h-32 text-center text-muted-foreground"
+                  className="p-0"
                 >
-                  {config.emptyMessage ?? 'No records found.'}
+                  {config.emptyState ?? (
+                    <div className="h-32 flex items-center justify-center text-muted-foreground text-sm">
+                      {config.emptyMessage ?? 'No records found.'}
+                    </div>
+                  )}
                 </TableCell>
               </TableRow>
             )}

distribution_fe/components/shared/data-table/types.ts

@@ -119,6 +119,8 @@ export interface TableConfig<T = object> {
   exportable?: boolean | ExportConfig;
   density?: 'compact' | 'normal' | 'comfortable';
   emptyMessage?: string;
+  /** Custom rendered empty state. Overrides emptyMessage when both are provided. */
+  emptyState?: React.ReactNode;
   rowClass?: (row: T) => string;
   isRowSelectable?: (row: T) => boolean;
   expandRender?: (row: T) => React.ReactNode;