Use Tanstack table for Selectable Table, quick actions (#998)

* feat: implement example of data table

* feat: load item data into table

* chore: begin switching dialogs

* feat: implement old dialog for controlling headers and page size

* feat: get table into relatively usable state

* feat: enhance dropdown actions for multi-selection and CSV download

* feat: enhance table cell and dropdown button styles for better usability

* feat: json download for table

* feat: add expanded row component for item details in data table

* chore: add translation support

* feat: restore table on home page

* fix: oops need ids

* feat: move card view to use tanstack to allow for pagination

* feat: switch the items search to use ItemViewSelectable

* fix: update pagination handling and improve button click logic

* feat: improve selectable table

* feat: add indeterminate to checkbox

* feat: overhaul maintenance dialog to use new system and add maintenance options to table

* feat: add label ids and location id to item patch api

* feat: change location and labels in table view

* feat: add quick actions preference and enable toggle in table settings

* fix: lint

* fix: remove sized 1 pages

* fix: attempt to fix type error

* fix: various issues

* fix: remove

* fix: refactor item fetching logic to use useAsyncData for improved reactivity and improve use confirm

* fix: sort backend issues

* fix: enhance CSV export functionality by escaping fields to prevent formula injection

* fix: put aria sort on th not button

* chore: update api types

frontend/components/Item/Card.vue

@@ -1,5 +1,13 @@
 <template>
-  <Card class="overflow-hidden">
+  <Card class="relative overflow-hidden">
+    <div v-if="tableRow" class="absolute left-1 top-1 z-10">
+      <Checkbox
+        class="size-5 bg-accent hover:bg-background-accent"
+        :model-value="tableRow.getIsSelected()"
+        :aria-label="$t('components.item.view.selectable.select_card')"
+        @update:model-value="tableRow.toggleSelected()"
+      />
+    </div>
     <NuxtLink :to="`/item/${item.id}`">
       <div class="relative h-[200px]">
         <img v-if="imageUrl" class="h-[200px] w-full object-cover shadow-md" loading="lazy" :src="imageUrl" alt="" />
@@ -64,6 +72,8 @@
   import { Separator } from "@/components/ui/separator";
   import Markdown from "@/components/global/Markdown.vue";
   import LabelChip from "@/components/Label/Chip.vue";
+  import type { Row } from "@tanstack/vue-table";
+  import { Checkbox } from "@/components/ui/checkbox";
 
   const api = useUserApi();
 
@@ -92,6 +102,11 @@
       required: false,
       default: () => [],
     },
+    tableRow: {
+      type: Object as () => Row<ItemSummary>,
+      required: false,
+      default: () => null,
+    },
   });
 
   const locationString = computed(