feat: release v1.0.0

src/components/data-table/view-options.tsx

@@ -0,0 +1,63 @@
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
+import { type Column, type Table } from '@tanstack/react-table'
+import { Settings2 } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu'
+
+type DataTableViewOptionsProps<TData> = {
+  table: Table<TData>
+}
+
+const getColumnLabel = <TData,>(column: Column<TData, unknown>) => {
+  const metaLabel = column.columnDef.meta?.label
+  const header = column.columnDef.header
+
+  if (typeof metaLabel === 'string') {
+    return metaLabel
+  }
+
+  if (typeof header === 'string') {
+    return header
+  }
+
+  return column.id
+}
+
+export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' size='sm' className='ms-auto h-8 flex'>
+          <Settings2 />
+          视图
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end' className='w-37.5'>
+        <DropdownMenuLabel>显示列</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className='capitalize'
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {getColumnLabel(column)}
+              </DropdownMenuCheckboxItem>
+            )
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}