fix: add key function for data tables

frontend/src/ui/components/DataTable.tsx

@@ -28,6 +28,7 @@ export interface DataTableProps<T> {
   defaultSort: SortingOrder<T>;
   rowComponent: (data: { data: T }) => ReactElement;
   sort: (key: keyof T) => SortFunction<T>;
+  keyFunction: (data: T) => string;
 }
 
 const Sortable = styled('div', {
@@ -46,6 +47,7 @@ export function DataTable<T>({
   defaultSort,
   sort,
   rowComponent,
+  keyFunction,
 }: DataTableProps<T>): React.ReactElement {
   const [entriesPerPage, setEntriesPerPage] = useState(15);
   const [page, setPage] = useState(0);
@@ -119,7 +121,7 @@ export function DataTable<T>({
         </thead>
         <tbody>
           {paged.map((entry) => (
-            <RowComponent data={entry} />
+            <RowComponent key={keyFunction(entry)} data={entry} />
           ))}
         </tbody>
       </Table>

frontend/src/ui/pages/LoyaltyQueue.tsx

@@ -104,6 +104,7 @@ function RewardQueue() {
         <DataTable
           sort={sortfn}
           data={data}
+          keyFunction={(d) => `${d.when.toString()}/${d.username}`}
           columns={[
             {
               key: 'when',
@@ -350,6 +351,7 @@ function UserList() {
         <DataTable
           sort={sortfn}
           data={filtered}
+          keyFunction={(entry) => entry.username}
           columns={[
             {
               key: 'username',