Data Grid Row Height Menu

1"use client";
2 
3import type { Table } from "@tanstack/react-table";
4import {
5  AlignVerticalSpaceAroundIcon,
6  ChevronsDownUpIcon,
7  EqualIcon,
8  MinusIcon,
9} from "lucide-react";
10import * as React from "react";
11import {
12  Select,
13  SelectContent,
14  SelectGroup,
15  SelectItem,
16  SelectTrigger,
17  SelectValue,
18} from "@/components/ui/select";
19 
20const rowHeights = [
21  {
22    label: "Short",
23    value: "short" as const,
24    icon: MinusIcon,
25  },
26  {
27    label: "Medium",
28    value: "medium" as const,
29    icon: EqualIcon,
30  },
31  {
32    label: "Tall",
33    value: "tall" as const,
34    icon: AlignVerticalSpaceAroundIcon,
35  },
36  {
37    label: "Extra Tall",
38    value: "extra-tall" as const,
39    icon: ChevronsDownUpIcon,
40  },
41] as const;
42 
43interface DataGridRowHeightMenuProps<TData>
44  extends React.ComponentProps<typeof SelectContent> {
45  table: Table<TData>;
46  disabled?: boolean;
47}
48 
49export function DataGridRowHeightMenu<TData>({
50  table,
51  disabled,
52  ...props
53}: DataGridRowHeightMenuProps<TData>) {
54  const rowHeight = table.options.meta?.rowHeight;
55  const onRowHeightChange = table.options.meta?.onRowHeightChange;
56 
57  const selectedRowHeight = React.useMemo(() => {
58    return (
59      rowHeights.find((opt) => opt.value === rowHeight) ?? {
60        label: "Short",
61        value: "short" as const,
62        icon: MinusIcon,
63      }
64    );
65  }, [rowHeight]);
66 
67  return (
68    <Select
69      value={rowHeight}
70      onValueChange={onRowHeightChange}
71      disabled={disabled}
72    >
73      <SelectTrigger className="[&_svg:nth-child(2)]:hidden">
74        <SelectValue placeholder="Row height">
75          <selectedRowHeight.icon />
76          {selectedRowHeight.label}
77        </SelectValue>
78      </SelectTrigger>
79      <SelectContent {...props}>
80        <SelectGroup>
81          {rowHeights.map((option) => (
82            <SelectItem key={option.value} value={option.value}>
83              <option.icon />
84              {option.label}
85            </SelectItem>
86          ))}
87        </SelectGroup>
88      </SelectContent>
89    </Select>
90  );
91}