Refactor LicenseQueuePage to use AdvancedTable for improved rendering and sorting functionality

libs/ui/src/lib/data/AdvancedTable.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from "react";
+import { CSSProperties, ReactNode, useState } from "react";
 import {
   Table,
   Button,
@@ -41,6 +41,8 @@ interface AdvancedTableProps<T> {
   onSearchChange?: (q: string) => void;
   isLoading?: boolean;
   emptyText?: string;
+  verticalSpacing?: string | number;
+  rowStyle?: (row: T, index: number) => CSSProperties | undefined;
 }
 
 function getByPath(obj: unknown, path?: string): unknown {
@@ -67,6 +69,8 @@ export function AdvancedTable<T extends { id?: string | number }>({
   refresh,
   isLoading = false,
   emptyText,
+  verticalSpacing = "sm",
+  rowStyle,
 }: AdvancedTableProps<T>) {
   const { t } = useTranslation();
   const [visible, setVisible] = useState<boolean[]>(
@@ -145,7 +149,7 @@ export function AdvancedTable<T extends { id?: string | number }>({
           highlightOnHover
           withTableBorder
           withColumnBorders
-          verticalSpacing="sm"
+          verticalSpacing={verticalSpacing}
         >
           <Table.Thead>
             <Table.Tr>
@@ -183,7 +187,7 @@ export function AdvancedTable<T extends { id?: string | number }>({
               </Table.Tr>
             ) : (
               data.map((row, rowIndex) => (
-                <Table.Tr key={row.id ?? rowIndex}>
+                <Table.Tr key={row.id ?? rowIndex} style={rowStyle?.(row, rowIndex)}>
                   {shownColumns.map((col, i) => {
                     const value = getByPath(row, col.accessorKey);
                     return (