@revenexx/studio-shared 0.1.2 → 0.3.0

package/dist/runtime/components/DataTable/DataTable.vue

@@ -0,0 +1,510 @@
+<script setup>
+import { AltArrowDown, Filter, Magnifier as Search, SidebarMinimalistic } from "#solar-icons";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  Input
+} from "@revenexx/studio";
+import SortHeader from "../Shared/SortHeader.vue";
+import ColumnsMenu from "./ColumnsMenu.vue";
+import FilterMenu from "./FilterMenu.vue";
+import SavedViewsMenu from "./SavedViewsMenu.vue";
+import SortMenu from "./SortMenu.vue";
+import ViewModeSwitch from "./ViewModeSwitch.vue";
+const props = defineProps({
+  data: { type: Array, required: true },
+  columns: { type: Array, required: true },
+  rowKey: { type: Function, required: true, skipCheck: true },
+  search: { type: [Boolean, Object], required: false, default: true },
+  columnsMenu: { type: Boolean, required: false, default: true },
+  filter: { type: [Boolean, Object], required: false, default: false },
+  filterTabs: { type: [Object, Array], required: false },
+  savedViews: { type: [Object, null], required: false, default: null },
+  viewModes: { type: [Array, null], required: false, default: null },
+  rail: { type: [Boolean, Object], required: false, default: false },
+  pagination: { type: [Boolean, Object], required: false, default: true },
+  defaultSort: { type: Object, required: false },
+  serverMode: { type: Boolean, required: false, default: false },
+  total: { type: Number, required: false },
+  loading: { type: Boolean, required: false, default: false },
+  emptyText: { type: String, required: false },
+  groupBy: { type: [Function, null], required: false, default: null },
+  groupEmptyLabel: { type: String, required: false }
+});
+const emit = defineEmits(["rowClick", "stateChange"]);
+const t = useT();
+const query = ref("");
+const sort = defineModel("sort", { type: Object, ...{
+  default: () => ({
+    column: null,
+    direction: null
+  })
+} });
+const page = defineModel("page", { type: Number, ...{ default: 0 } });
+const viewMode = defineModel("viewMode", { type: String, ...{ default: "list" } });
+const railOpen = defineModel("railOpen", { type: Boolean, ...{ default: true } });
+if (props.defaultSort && sort.value.column == null) {
+  sort.value = { column: props.defaultSort.column, direction: props.defaultSort.direction };
+}
+const pageSize = ref(
+  typeof props.pagination === "object" && props.pagination?.pageSize ? props.pagination.pageSize : 20
+);
+const pageSizeOptions = computed(() => Array.from(/* @__PURE__ */ new Set([10, 20, 50, 100, pageSize.value])).sort((a, b) => a - b));
+const visibleKeys = ref(
+  new Set(props.columns.filter((c) => c.visible !== false).map((c) => c.key))
+);
+function toggleColumn(key) {
+  const next = new Set(visibleKeys.value);
+  if (next.has(key)) next.delete(key);
+  else next.add(key);
+  visibleKeys.value = next;
+}
+const visibleColumns = computed(
+  () => props.columns.filter((c) => visibleKeys.value.has(c.key))
+);
+const menuColumns = computed(() => props.columns);
+function searchOf(col, row) {
+  if (col.searchGetter) return col.searchGetter(row).toLowerCase();
+  if (col.sortGetter) {
+    const v = col.sortGetter(row);
+    return v == null ? "" : String(v).toLowerCase();
+  }
+  const raw = row[col.key];
+  return raw == null ? "" : String(raw).toLowerCase();
+}
+const filterDims = computed(() => {
+  const raw = props.filterTabs;
+  if (!raw) return [];
+  const arr = Array.isArray(raw) ? raw : [raw];
+  return arr.map((f, i) => ({ key: f.key ?? f.label ?? `dim${i}`, label: f.label ?? t("shared.datatable.filter.dimension.label.default"), getter: f.getter, options: f.options, allLabel: f.allLabel }));
+});
+const activeFilters = ref({});
+const anyFilterActive = computed(() => Object.values(activeFilters.value).some(Boolean));
+function setFilter(key, value) {
+  activeFilters.value = { ...activeFilters.value, [key]: value };
+}
+function dimCounts(d) {
+  const m = {};
+  for (const row of props.data) {
+    const k = String(d.getter(row) ?? "");
+    m[k] = (m[k] ?? 0) + 1;
+  }
+  return m;
+}
+const filtered = computed(() => {
+  if (props.serverMode || !filterDims.value.length) return props.data;
+  const active = filterDims.value.filter((d) => activeFilters.value[d.key]);
+  if (!active.length) return props.data;
+  return props.data.filter((row) => active.every((d) => String(d.getter(row) ?? "") === activeFilters.value[d.key]));
+});
+const searched = computed(() => {
+  if (props.serverMode) return props.data;
+  const q = query.value.trim().toLowerCase();
+  if (!q) return filtered.value;
+  return filtered.value.filter(
+    (row) => props.columns.some((col) => searchOf(col, row).includes(q))
+  );
+});
+function sortKey(col, row) {
+  if (col.sortGetter) return col.sortGetter(row);
+  const raw = row[col.key];
+  return raw;
+}
+const sorted = computed(() => {
+  if (props.serverMode) return searched.value;
+  const col = sort.value.column;
+  const dir = sort.value.direction;
+  if (!col || !dir) return searched.value;
+  const c = props.columns.find((x) => x.key === col);
+  if (!c) return searched.value;
+  const sign = dir === "asc" ? 1 : -1;
+  return [...searched.value].sort((a, b) => {
+    const av = sortKey(c, a);
+    const bv = sortKey(c, b);
+    const aNull = av == null || av === "";
+    const bNull = bv == null || bv === "";
+    if (aNull && bNull) return 0;
+    if (aNull) return 1;
+    if (bNull) return -1;
+    const aCmp = typeof av === "boolean" ? av ? 1 : 0 : av;
+    const bCmp = typeof bv === "boolean" ? bv ? 1 : 0 : bv;
+    if (aCmp < bCmp) return -1 * sign;
+    if (aCmp > bCmp) return 1 * sign;
+    return 0;
+  });
+});
+const totalCount = computed(
+  () => props.serverMode ? props.total ?? props.data.length : sorted.value.length
+);
+const paginated = computed(() => {
+  if (props.serverMode || !props.pagination) return sorted.value;
+  const start = page.value * pageSize.value;
+  return sorted.value.slice(start, start + pageSize.value);
+});
+const displayedRows = computed(() => props.groupBy ? sorted.value : paginated.value);
+const keyedRows = computed(() => {
+  const seen = /* @__PURE__ */ new Map();
+  return displayedRows.value.map((row) => {
+    const base = rowKeyFor(row) ?? "\u2205";
+    const n = seen.get(base) ?? 0;
+    seen.set(base, n + 1);
+    return { row, key: n === 0 ? base : `${base}#${n}` };
+  });
+});
+const renderRows = computed(() => {
+  if (!props.groupBy) return keyedRows.value.map(({ row, key }) => ({ kind: "row", row, key }));
+  const emptyLabel = props.groupEmptyLabel ?? t("shared.datatable.group.ungrouped.default");
+  const groups = /* @__PURE__ */ new Map();
+  for (const entry of keyedRows.value) {
+    const labels2 = props.groupBy(entry.row);
+    for (const label of labels2.length ? labels2 : [emptyLabel]) {
+      if (!groups.has(label)) groups.set(label, []);
+      groups.get(label).push(entry);
+    }
+  }
+  const labels = [...groups.keys()].sort((a, b) => a.localeCompare(b));
+  if (labels.includes(emptyLabel)) {
+    labels.splice(labels.indexOf(emptyLabel), 1);
+    labels.push(emptyLabel);
+  }
+  const out = [];
+  for (const label of labels) {
+    const rows = groups.get(label);
+    out.push({ kind: "header", label, count: rows.length, key: `__group__${label}` });
+    for (const e of rows) out.push({ kind: "row", row: e.row, key: `${label}::${e.key}` });
+  }
+  return out;
+});
+function emitState() {
+  emit("stateChange", {
+    search: query.value,
+    sort: { ...sort.value },
+    page: page.value,
+    pageSize: pageSize.value
+  });
+}
+watch([query, sort, page, pageSize], () => {
+  if (props.serverMode) emitState();
+});
+watch([query, sort, pageSize, activeFilters], () => {
+  page.value = 0;
+}, { deep: true });
+function toggleSort(column) {
+  if (sort.value.column !== column) {
+    sort.value = { column, direction: "asc" };
+    return;
+  }
+  if (sort.value.direction === "asc") {
+    sort.value = { column, direction: "desc" };
+    return;
+  }
+  sort.value = { column: null, direction: null };
+}
+function rowKeyFor(row) {
+  if (typeof props.rowKey === "function") return props.rowKey(row);
+  return row[props.rowKey];
+}
+const gridTemplate = computed(() => {
+  const tracks = visibleColumns.value.map((c) => c.width ?? "minmax(0,1fr)");
+  return `grid-template-columns: ${tracks.join(" ")};`;
+});
+const placeholder = computed(
+  () => typeof props.search === "object" ? props.search.placeholder ?? t("shared.datatable.toolbar.search.placeholder.default") : t("shared.datatable.toolbar.search.placeholder.default")
+);
+const slots = useSlots();
+const showToolbar = computed(
+  () => props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!props.savedViews || !!props.viewModes?.length || !!props.rail || !!slots.actions || !!slots.scope || !!slots["toolbar-left"] || !!slots["toolbar-right"]
+);
+const railLabel = computed(
+  () => (typeof props.rail === "object" ? props.rail.label : void 0) ?? t("shared.datatable.toolbar.rail.label.default")
+);
+const showTable = computed(() => !props.viewModes?.length || viewMode.value === "list");
+const sortableColumns = computed(() => props.columns.filter((c) => c.sortable));
+const showSortMenu = computed(() => !showTable.value && sortableColumns.value.length > 0);
+function cellIconFor(col) {
+  return col.cellIcon ?? null;
+}
+const showFooter = computed(() => props.pagination !== false && !props.groupBy);
+const lastPage = computed(
+  () => pageSize.value > 0 ? Math.max(0, Math.ceil(totalCount.value / pageSize.value) - 1) : 0
+);
+const rangeStart = computed(() => totalCount.value === 0 ? 0 : page.value * pageSize.value + 1);
+const rangeEnd = computed(
+  () => Math.min((page.value + 1) * pageSize.value, totalCount.value)
+);
+function prevPage() {
+  if (page.value > 0) page.value -= 1;
+}
+function nextPage() {
+  if (page.value < lastPage.value) page.value += 1;
+}
+function defaultCell(col, row) {
+  const v = col.sortGetter ? col.sortGetter(row) : row[col.key];
+  if (v == null) return "\u2014";
+  return String(v);
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-black/[0.06] overflow-hidden flex flex-col">
+    <!-- Toolbar ------------------------------------------------------ -->
+    <!-- The single control row of a list surface:
+         LEFT  = rail · search · filter · columns · #toolbar-left
+         RIGHT = #toolbar-right · saved views · #scope · view mode · #actions
+         (Pagination always lives in the footer.) -->
+    <div
+      v-if="showToolbar"
+      class="flex flex-wrap items-center justify-between gap-2 px-4 py-3 bg-white/55 backdrop-blur-md"
+    >
+      <div class="flex items-center gap-2 min-w-0">
+        <Button
+          v-if="rail"
+          variant="outline"
+          size="sm"
+          class="h-7 shrink-0 gap-1.5 text-sm"
+          :class="railOpen ? 'border-primary/30 text-primary' : ''"
+          :aria-pressed="railOpen"
+          :aria-label="railOpen ? t('shared.datatable.toolbar.rail.aria.hide', { label: railLabel }) : t('shared.datatable.toolbar.rail.aria.show', { label: railLabel })"
+          @click="railOpen = !railOpen"
+        >
+          <SidebarMinimalistic :size="14" />
+          {{ railLabel }}
+        </Button>
+        <!-- Shrinks (never wraps the row) once the toolbar carries scope /
+             view-mode / saved-view controls next to it. -->
+        <div v-if="search" class="relative w-[21rem] min-w-40 max-w-full shrink">
+          <Search :size="13" class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            v-model="query"
+            :placeholder="placeholder"
+            class="h-7 pl-8 text-sm bg-white"
+          />
+        </div>
+        <!-- Generic "Filter" dropdown — each dimension is a labelled sub-menu. -->
+        <DropdownMenu v-if="filterDims.length">
+          <DropdownMenuTrigger as-child>
+            <Button
+              variant="outline"
+              size="sm"
+              class="h-7 gap-1.5 text-sm"
+              :class="anyFilterActive ? 'border-primary/30 text-primary' : ''"
+            >
+              <Filter :size="14" />
+              {{ t("shared.datatable.toolbar.filter.action") }}
+              <AltArrowDown :size="12" class="opacity-60" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" class="w-48">
+            <DropdownMenuSub v-for="d in filterDims" :key="d.key">
+              <DropdownMenuSubTrigger class="gap-2">
+                <span class="flex-1">{{ d.label }}</span>
+                <span v-if="activeFilters[d.key]" class="text-xs text-primary capitalize">{{ activeFilters[d.key] }}</span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent class="w-48">
+                <DropdownMenuItem class="gap-2" @select="setFilter(d.key, null)">
+                  <span class="flex-1">{{ d.allLabel ?? t("shared.datatable.toolbar.filter.all.default") }}</span>
+                  <span class="tabular-nums text-muted-foreground">{{ data.length }}</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  v-for="o in d.options"
+                  :key="o.value"
+                  class="gap-2"
+                  @select="setFilter(d.key, o.value)"
+                >
+                  <span class="flex-1">{{ o.label }}</span>
+                  <span class="tabular-nums text-muted-foreground">{{ dimCounts(d)[o.value] ?? 0 }}</span>
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <FilterMenu
+          v-if="filter"
+          :width="typeof filter === 'object' ? filter.width : void 0"
+          :active="typeof filter === 'object' ? filter.active : void 0"
+        >
+          <slot name="filter-menu" />
+        </FilterMenu>
+        <SortMenu v-if="showSortMenu" v-model="sort" :columns="sortableColumns" />
+        <ColumnsMenu
+          v-if="columnsMenu && showTable"
+          :columns="menuColumns"
+          :visible="visibleKeys"
+          @toggle="toggleColumn"
+        />
+        <slot name="toolbar-left" />
+      </div>
+      <div class="flex items-center gap-1.5 ml-auto shrink-0">
+        <slot name="toolbar-right" />
+        <SavedViewsMenu v-if="savedViews" :config="savedViews" />
+        <!-- Market scope ("Showing: … / All markets") — the surface passes the
+             shared MarketScopeToggle in; the row position is fixed here. -->
+        <slot name="scope" />
+        <ViewModeSwitch v-if="viewModes?.length" v-model="viewMode" :modes="viewModes" />
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <!-- Alternate view mode (gallery, board, …) — same toolbar, same footer. -->
+    <div v-if="!showTable" class="border-t border-black/[0.04] bg-white/55">
+      <slot name="view" :rows="displayedRows" :loading="loading" />
+    </div>
+
+    <!-- Header row -------------------------------------------------- -->
+    <div
+      v-if="showTable"
+      class="grid items-center gap-2 border-t rounded-t-lg border-gray-200 bg-gray-100 px-4 py-2.5 text-sm font-medium uppercase tracking-normal text-muted-foreground"
+      :style="gridTemplate"
+    >
+      <div
+        v-for="col in visibleColumns"
+        :key="col.key"
+        :class="col.alignRight ? 'text-right' : ''"
+      >
+        <!-- `#header-<key>` lets a page take over a header cell (e.g. a
+             select-all checkbox in a selection column). Default: sortable
+             SortHeader or the plain label. -->
+        <slot :name="`header-${col.key}`">
+          <SortHeader
+            v-if="col.sortable"
+            :column="col.key"
+            :active="sort.column"
+            :direction="sort.direction"
+            :align-right="col.alignRight"
+            @toggle="toggleSort"
+          >
+            {{ col.label }}
+          </SortHeader>
+          <span v-else>{{ col.label }}</span>
+        </slot>
+      </div>
+    </div>
+
+    <!-- Body --------------------------------------------------------- -->
+    <template v-for="entry in showTable ? renderRows : []" :key="entry.key">
+      <!-- Group header (groupBy mode) -->
+      <div
+        v-if="entry.kind === 'header'"
+        class="flex items-center gap-2 border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+      >
+        {{ entry.label }}
+        <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
+      </div>
+      <div
+        v-else
+        class="group grid items-center gap-2 border-t border-black/[0.04] px-4 py-3 cursor-pointer bg-gray-50 transition-colors"
+        :style="gridTemplate"
+        @click="emit('rowClick', entry.row)"
+      >
+        <div
+          v-for="col in visibleColumns"
+          :key="col.key"
+          class="min-w-0"
+          :class="col.alignRight ? 'text-right' : ''"
+        >
+          <slot :name="`cell-${col.key}`" :row="entry.row">
+            <!-- Primary column: bold record anchor + optional tinted icon tile. -->
+            <div v-if="col.primary" class="flex items-center gap-2.5 min-w-0">
+              <span
+                v-if="cellIconFor(col)"
+                class="flex size-7 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"
+              >
+                <component :is="cellIconFor(col)" :size="13" />
+              </span>
+              <span class="text-sm font-semibold text-[#0B0522] truncate transition-colors group-hover:text-primary">{{ defaultCell(col, entry.row) }}</span>
+            </div>
+            <!-- `block`, or `truncate` clips nothing: an inline span establishes
+                 no box, so a long unbroken value overruns the next column
+                 instead of ending in an ellipsis. -->
+            <span v-else class="block truncate text-sm" :title="String(defaultCell(col, entry.row) ?? '')">{{ defaultCell(col, entry.row) }}</span>
+          </slot>
+        </div>
+      </div>
+    </template>
+
+    <!-- Loading skeleton (only when there are no rows yet) ----------- -->
+    <template v-if="showTable && loading && !displayedRows.length">
+      <div
+        v-for="n in 6"
+        :key="`sk-${n}`"
+        class="grid items-center gap-2 border-t border-black/[0.04] bg-gray-50 px-4 py-3"
+        :style="gridTemplate"
+      >
+        <div
+          v-for="col in visibleColumns"
+          :key="col.key"
+          :class="col.alignRight ? 'flex justify-end' : ''"
+        >
+          <div
+            class="h-3 rounded bg-black/[0.07] animate-pulse"
+            :class="col.alignRight ? 'w-10' : 'w-2/3'"
+          />
+        </div>
+      </div>
+    </template>
+
+    <!-- Empty -------------------------------------------------------- -->
+    <div
+      v-if="showTable && !displayedRows.length && !loading"
+      class="px-3 py-8 text-center text-sm text-muted-foreground"
+    >
+      <slot name="empty">
+        {{ emptyText ?? t("shared.datatable.empty.default") }}
+      </slot>
+    </div>
+
+    <!-- Footer ------------------------------------------------------- -->
+    <div
+      v-if="showFooter"
+      class="flex items-center justify-between gap-2 border-t border-gray-200 bg-white/55 backdrop-blur-md px-4 py-3 text-sm text-muted-foreground/60"
+    >
+      <div class="flex items-center gap-2.5">
+        <span class="tabular-nums">
+          <span v-if="totalCount === 0">{{ t("shared.datatable.footer.noresults") }}</span>
+          <span v-else>{{ t("shared.datatable.footer.showing", { start: rangeStart, end: rangeEnd, total: totalCount }) }}</span>
+        </span>
+        <span class="text-muted-foreground/40">-</span>
+        <label class="flex items-center gap-1.5">
+          <span class="hidden sm:inline">{{ t("shared.datatable.footer.pagesize.label") }}</span>
+          <select
+            v-model.number="pageSize"
+            class="h-7 rounded-md border border-input bg-white px-1.5 text-sm tabular-nums focus:outline-none focus:ring-1 focus:ring-ring"
+          >
+            <option v-for="s in pageSizeOptions" :key="s" :value="s">{{ s }}</option>
+          </select>
+        </label>
+      </div>
+      <div v-if="lastPage > 0" class="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          class="h-7 text-sm"
+          :disabled="page === 0 || loading"
+          @click="prevPage"
+        >
+          {{ t("shared.datatable.footer.action.previous") }}
+        </Button>
+        <span class="tabular-nums">
+          {{ page + 1 }} / {{ lastPage + 1 }}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          class="h-7 text-sm"
+          :disabled="page >= lastPage || loading"
+          @click="nextPage"
+        >
+          {{ t("shared.datatable.footer.action.next") }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/DataTable/DataTable.vue.d.ts

@@ -0,0 +1,87 @@
+import type { DataTableColumn, DataTableFilter, DataTableRail, DataTableSavedViews, DataTableState, DataTableViewMode, RowKey, SortState } from './types.js';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:sort"?: ((value: SortState) => any) | undefined;
+        readonly "onUpdate:page"?: ((value: number) => any) | undefined;
+        readonly "onUpdate:viewMode"?: ((value: string) => any) | undefined;
+        readonly "onUpdate:railOpen"?: ((value: boolean) => any) | undefined;
+        readonly onRowClick?: ((row: T) => any) | undefined;
+        readonly onStateChange?: ((state: DataTableState) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onUpdate:viewMode" | "onUpdate:railOpen" | "onRowClick" | "onStateChange"> & ({
+        data: T[];
+        columns: DataTableColumn<T>[];
+        rowKey: RowKey<T>;
+        search?: boolean | {
+            placeholder?: string;
+        };
+        columnsMenu?: boolean;
+        /** Mount the surface's own filter panel in the toolbar's Filter popover
+         *  (`#filter-menu`). Pass an object to widen it / flag it as active. */
+        filter?: boolean | {
+            width?: string;
+            active?: boolean;
+        };
+        /** Built-in status/dimension filter pills (static mode). One dimension, or
+         *  several (each renders as its own sub-menu). */
+        filterTabs?: DataTableFilter<T> | DataTableFilter<T>[];
+        /** Saved views control — the surface supplies snapshot/apply, the table
+         *  owns the control, the storage and the dialogs. */
+        savedViews?: DataTableSavedViews | null;
+        /** View-mode switch (e.g. List | Gallery). Any mode other than `list`
+         *  renders the `#view` slot in place of the table body. */
+        viewModes?: DataTableViewMode[] | null;
+        /** Collapse handle for the surface's left rail (see `ListSurface`). */
+        rail?: boolean | DataTableRail;
+        pagination?: boolean | {
+            pageSize?: number;
+        };
+        defaultSort?: {
+            column: string;
+            direction: "asc" | "desc";
+        };
+        serverMode?: boolean;
+        total?: number;
+        loading?: boolean;
+        emptyText?: string;
+        groupBy?: ((row: T) => string[]) | null;
+        groupEmptyLabel?: string;
+    } & {
+        sort?: SortState;
+        page?: number;
+        viewMode?: string;
+        railOpen?: boolean;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {}) => any) | undefined;
+    } & {
+        [x: string]: ((props: {
+            row: any;
+        }) => any) | undefined;
+    } & {
+        'filter-menu'?: (props: {}) => any;
+    } & {
+        'toolbar-left'?: (props: {}) => any;
+    } & {
+        'toolbar-right'?: (props: {}) => any;
+    } & {
+        scope?: (props: {}) => any;
+    } & {
+        actions?: (props: {}) => any;
+    } & {
+        view?: (props: {
+            rows: any;
+            loading: any;
+        }) => any;
+    } & {
+        empty?: (props: {}) => any;
+    };
+    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void)) & (((evt: "update:sort", value: SortState) => void) & ((evt: "update:page", value: number) => void) & ((evt: "update:viewMode", value: string) => void) & ((evt: "update:railOpen", value: boolean) => void));
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/DataTable/FilterMenu.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /** Popover width class (a wide panel of inputs needs more than the default). */
+    width?: string;
+    /** Tint the trigger while at least one filter is set. */
+    active?: boolean;
+};
+declare var __VLS_34: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_34) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+    width: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DataTable/FilterMenu.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { AltArrowDown, Filter } from "#solar-icons";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@revenexx/studio";
+defineProps({
+  width: { type: String, required: false, default: "w-56" },
+  active: { type: Boolean, required: false, default: false }
+});
+const t = useT();
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-7 gap-1.5 text-sm"
+        :class="active ? 'border-primary/30 text-primary' : ''"
+        :aria-label="t('shared.datatable.filtermenu.aria')"
+      >
+        <Filter :size="14" />
+        {{ t("shared.datatable.filtermenu.action") }}
+        <AltArrowDown :size="12" class="opacity-60" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start" :class="width">
+      <DropdownMenuLabel class="text-sm text-muted-foreground">
+        {{ t("shared.datatable.filtermenu.heading") }}
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <slot>
+        <DropdownMenuItem disabled>
+          {{ t("shared.datatable.filtermenu.empty") }}
+        </DropdownMenuItem>
+      </slot>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>