Advanced Table

1<script setup lang="ts" generic="T extends Record<string, any>">
2import { computed, ref, watch, nextTick, onMounted } from "vue";
3import ColumnToggle from "./ColumnToggle.vue";
4import TablePagination from "./TablePagination.vue";
5import type { Column, Locale, RowKeyType } from "./types";
6import { GetI18nText } from "./locales";
7import { useResizeObserver, useMediaQuery } from "@vueuse/core";
8import { ChevronDown, ChevronRight, ShieldOff } from "@lucide/vue";
9import {
10  Tooltip,
11  TooltipTrigger,
12  TooltipContent,
13} from "@/components/ui/tooltip";
14import { Button } from "@/components/ui/button";
15import { Checkbox } from "@/components/ui/checkbox";
16import {
17  Table,
18  TableBody,
19  TableCell,
20  TableHead,
21  TableHeader,
22  TableRow,
23} from "@/components/ui/table";
24import {
25  Empty,
26  EmptyDescription,
27  EmptyHeader,
28  EmptyMedia,
29  EmptyTitle,
30} from "@/components/ui/empty";
31import { Toolbar } from "@/components/toolbar";
32import type { ToolbarAction } from "@/components/toolbar";
33import {
34  SmartSearchInput,
35  ActiveFilterTags,
36} from "@/components/smart-search-input";
37import type {
38  FilterOption,
39  FilterValue,
40  ActiveFilterItem,
41} from "@/components/smart-search-input";
42 
43type Props = {
44  data: T[];
45  total: number;
46  showCheckbox?: boolean;
47  rowSelectable?: (row: T) => boolean;
48  selectionScope?: "cross-page" | "page";
49  showColumnToggle?: boolean;
50  showExpand?: boolean;
51  rowExpandable?: (row: T) => boolean;
52  rowExpandMode?: (row: T) => "children" | "slot" | false;
53  showPagination?: boolean;
54  loading?: boolean;
55  rowKey?: string;
56  locale?: Locale;
57  onReset?: () => void;
58  showToolbar?: boolean;
59  showSmartSearch?: boolean;
60  showActiveFilters?: boolean;
61  toolbarPrimaryActions?: ToolbarAction[];
62  toolbarSecondaryActions?: ToolbarAction[];
63  filterOptions?: FilterOption[];
64};
65 
66const props = withDefaults(defineProps<Props>(), {
67  showCheckbox: true,
68  selectionScope: "cross-page",
69  showColumnToggle: true,
70  showExpand: false,
71  showPagination: true,
72  loading: false,
73  rowKey: "id",
74  locale: "en",
75  showToolbar: false,
76  showSmartSearch: false,
77  showActiveFilters: false,
78});
79 
80const emit = defineEmits<{
81  (e: "search", value: FilterValue): void;
82  (e: "filter-remove", key: string): void;
83  (e: "filter-clear-all"): void;
84  (
85    e: "row-expand-change",
86    payload: { row: T; expanded: boolean; key: RowKeyType },
87  ): void;
88}>();
89 
90const $t = (key: Parameters<typeof GetI18nText>[0]) =>
91  GetI18nText(key, props.locale);
92 
93// … truncated