summaryrefslogtreecommitdiff
path: root/components/data-table/data-table-view-options.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/data-table/data-table-view-options.tsx')
-rw-r--r--components/data-table/data-table-view-options.tsx44
1 files changed, 33 insertions, 11 deletions
diff --git a/components/data-table/data-table-view-options.tsx b/components/data-table/data-table-view-options.tsx
index c55617ec..69666237 100644
--- a/components/data-table/data-table-view-options.tsx
+++ b/components/data-table/data-table-view-options.tsx
@@ -24,6 +24,12 @@ import {
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip"
// Sortable
import {
@@ -36,9 +42,11 @@ import {
/**
* ViewOptionsProps:
* - table: TanStack Table instance
+ * - resetAutoSize: Function to reset autosize calculations (optional)
*/
interface DataTableViewOptionsProps<TData> {
table: Table<TData>
+ resetAutoSize?: () => void
}
declare module "@tanstack/table-core" {
@@ -56,13 +64,12 @@ declare module "@tanstack/table-core" {
*/
export function DataTableViewOptions<TData>({
table,
+ resetAutoSize,
}: DataTableViewOptionsProps<TData>) {
const triggerRef = React.useRef<HTMLButtonElement>(null)
// 1) Identify columns that can be hidden
const hideableCols = React.useMemo(() => {
-
-
return table
.getAllLeafColumns()
.filter((col) => col.getCanHide())
@@ -103,7 +110,10 @@ export function DataTableViewOptions<TData>({
// Now we set the table's official column order
table.setColumnOrder(finalOrder)
- }, [columnOrder, hideableCols, table])
+
+ // Reset auto-size when column order changes
+ resetAutoSize?.()
+ }, [columnOrder, hideableCols, table, resetAutoSize])
return (
@@ -118,7 +128,7 @@ export function DataTableViewOptions<TData>({
className="gap-2"
>
<Settings2 className="size-4" />
- <span className="hidden sm:inline">View</span>
+ <span className="hidden sm:inline">보기</span>
<ChevronsUpDown className="ml-auto size-4 shrink-0 opacity-50 hidden sm:inline" />
</Button>
</PopoverTrigger>
@@ -145,16 +155,19 @@ export function DataTableViewOptions<TData>({
{columnOrder.map((colId) => {
// find column instance
const column = hideableCols.find((c) => c.id === colId)
-
if (!column) return null
+ const columnLabel = column?.columnDef?.meta?.excelHeader || column.id
+
return (
<SortableItem key={colId} value={colId} asChild>
<CommandItem
- onSelect={() =>
+ onSelect={() => {
column.toggleVisibility(!column.getIsVisible())
- }
+ // Reset autosize calculations when toggling columns
+ resetAutoSize?.()
+ }}
>
{/* Drag handle on the left */}
<SortableDragHandle
@@ -165,10 +178,19 @@ export function DataTableViewOptions<TData>({
<GripVertical className="size-3.5" aria-hidden="true" />
</SortableDragHandle>
- {/* label */}
- <span className="truncate">
- {column?.columnDef?.meta?.excelHeader}
- </span>
+ {/* label with tooltip for long names */}
+ <TooltipProvider>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <span className="truncate">
+ {columnLabel}
+ </span>
+ </TooltipTrigger>
+ <TooltipContent>
+ {columnLabel}
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
{/* check if visible */}
<Check