Revert columns

This commit is contained in:
Owen
2025-11-05 11:41:07 -08:00
parent 301654b63e
commit 6ddfc9b8fe
2 changed files with 5 additions and 63 deletions

View File

@@ -24,7 +24,6 @@ interface DataTablePaginationProps<TData> {
isServerPagination?: boolean; isServerPagination?: boolean;
isLoading?: boolean; isLoading?: boolean;
disabled?: boolean; disabled?: boolean;
renderAdditionalControls?: () => React.ReactNode;
} }
export function DataTablePagination<TData>({ export function DataTablePagination<TData>({
@@ -34,8 +33,7 @@ export function DataTablePagination<TData>({
totalCount, totalCount,
isServerPagination = false, isServerPagination = false,
isLoading = false, isLoading = false,
disabled = false, disabled = false
renderAdditionalControls
}: DataTablePaginationProps<TData>) { }: DataTablePaginationProps<TData>) {
const t = useTranslations(); const t = useTranslations();
@@ -115,11 +113,6 @@ export function DataTablePagination<TData>({
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
{renderAdditionalControls && (
<div className="flex items-center space-x-2">
{renderAdditionalControls()}
</div>
)}
</div> </div>
<div className="flex items-center space-x-3 lg:space-x-8"> <div className="flex items-center space-x-3 lg:space-x-8">

View File

@@ -9,9 +9,7 @@ import {
SortingState, SortingState,
getSortedRowModel, getSortedRowModel,
ColumnFiltersState, ColumnFiltersState,
getFilteredRowModel, getFilteredRowModel
VisibilityState,
Column
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { import {
Table, Table,
@@ -25,7 +23,7 @@ import { Button } from "@app/components/ui/button";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination"; import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search, RefreshCw, Settings2 } from "lucide-react"; import { Plus, Search, RefreshCw } from "lucide-react";
import { import {
Card, Card,
CardContent, CardContent,
@@ -34,12 +32,6 @@ import {
} from "@app/components/ui/card"; } from "@app/components/ui/card";
import { Tabs, TabsList, TabsTrigger } from "@app/components/ui/tabs"; import { Tabs, TabsList, TabsTrigger } from "@app/components/ui/tabs";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuCheckboxItem,
DropdownMenuTrigger
} from "@app/components/ui/dropdown-menu";
const STORAGE_KEYS = { const STORAGE_KEYS = {
PAGE_SIZE: 'datatable-page-size', PAGE_SIZE: 'datatable-page-size',
@@ -101,7 +93,6 @@ type DataTableProps<TData, TValue> = {
defaultTab?: string; defaultTab?: string;
persistPageSize?: boolean | string; persistPageSize?: boolean | string;
defaultPageSize?: number; defaultPageSize?: number;
enableColumnToggle?: boolean;
}; };
export function DataTable<TData, TValue>({ export function DataTable<TData, TValue>({
@@ -118,8 +109,7 @@ export function DataTable<TData, TValue>({
tabs, tabs,
defaultTab, defaultTab,
persistPageSize = false, persistPageSize = false,
defaultPageSize = 20, defaultPageSize = 20
enableColumnToggle = true
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const t = useTranslations(); const t = useTranslations();
@@ -139,7 +129,6 @@ export function DataTable<TData, TValue>({
); );
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]); const [globalFilter, setGlobalFilter] = useState<any>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [activeTab, setActiveTab] = useState<string>( const [activeTab, setActiveTab] = useState<string>(
defaultTab || tabs?.[0]?.id || "" defaultTab || tabs?.[0]?.id || ""
); );
@@ -168,7 +157,6 @@ export function DataTable<TData, TValue>({
onColumnFiltersChange: setColumnFilters, onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter, onGlobalFilterChange: setGlobalFilter,
onColumnVisibilityChange: setColumnVisibility,
initialState: { initialState: {
pagination: { pagination: {
pageSize: pageSize, pageSize: pageSize,
@@ -178,8 +166,7 @@ export function DataTable<TData, TValue>({
state: { state: {
sorting, sorting,
columnFilters, columnFilters,
globalFilter, globalFilter
columnVisibility
} }
}); });
@@ -212,43 +199,6 @@ export function DataTable<TData, TValue>({
} }
}; };
const getColumnLabel = (column: Column<any, any>) => {
return typeof column.columnDef.header === "string" ?
column.columnDef.header :
column.id; // fallback to id if header is JSX
};
const renderColumnToggle = () => {
if (!enableColumnToggle) return null;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Settings2 className="mr-2 h-4 w-4" />
{t("columns")}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
{table.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(!!value)}
>
{getColumnLabel(column)}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
};
return ( return (
<div className="container mx-auto max-w-12xl"> <div className="container mx-auto max-w-12xl">
<Card> <Card>
@@ -362,7 +312,6 @@ export function DataTable<TData, TValue>({
<DataTablePagination <DataTablePagination
table={table} table={table}
onPageSizeChange={handlePageSizeChange} onPageSizeChange={handlePageSizeChange}
renderAdditionalControls={renderColumnToggle}
/> />
</div> </div>
</CardContent> </CardContent>