41e80b6c0c
All checks were successful
Trigger Cloudarix Deploy / call-webhook (push) Successful in 2s
✨ New Features - Advanced data table with TanStack Table v8 + Server Actions - Server-side pagination (10/25/50/100 rows per page) - Multi-column sorting with visual indicators - Column management (show/hide, resize) persisted to localStorage - URL state synchronization for shareable filtered views - Sticky header with compact/comfortable density modes 📦 Components Added - PolicyTableV2.tsx - Main table with TanStack integration - PolicyTableColumns.tsx - 7 column definitions with sorting - PolicyTablePagination.tsx - Pagination controls - PolicyTableToolbar.tsx - Density toggle + column visibility menu - ColumnVisibilityMenu.tsx - Show/hide columns dropdown 🔧 Hooks Added - usePolicyTable.ts - TanStack Table initialization - useURLState.ts - URL query param sync with nuqs - useTablePreferences.ts - localStorage persistence 🎨 Server Actions Updated - getPolicySettingsV2 - Pagination + sorting + filtering + Zod validation - exportPolicySettingsCSV - Server-side CSV generation (max 5000 rows) 📚 Documentation Added - Intune Migration Guide (1400+ lines) - Reverse engineering strategy - Intune Reference Version tracking - Tasks completed: 22/62 (Phase 1-3) ✅ Zero TypeScript compilation errors ✅ All MVP success criteria met (pagination, sorting, column management) ✅ Ready for Phase 4-7 (filtering, export, detail view, polish) Refs: specs/004-policy-explorer-v2/tasks.md
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
/**
|
|
* PolicyTableToolbar
|
|
*
|
|
* Toolbar above the data table with:
|
|
* - Column visibility menu
|
|
* - Density mode toggle (compact/comfortable)
|
|
* - Export button (added later in Phase 5)
|
|
* - Filter controls (added later in Phase 4)
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { ColumnVisibilityMenu } from './ColumnVisibilityMenu';
|
|
import { LayoutList, LayoutGrid } from 'lucide-react';
|
|
import type { Table } from '@tanstack/react-table';
|
|
import type { PolicySettingRow } from '@/lib/types/policy-table';
|
|
|
|
interface PolicyTableToolbarProps {
|
|
table: Table<PolicySettingRow>;
|
|
density: 'compact' | 'comfortable';
|
|
onDensityChange: (density: 'compact' | 'comfortable') => void;
|
|
}
|
|
|
|
export function PolicyTableToolbar({
|
|
table,
|
|
density,
|
|
onDensityChange,
|
|
}: PolicyTableToolbarProps) {
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-1 items-center space-x-2">
|
|
{/* Search and filters will be added here in Phase 4 */}
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
{/* Density Toggle */}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8"
|
|
onClick={() => onDensityChange(density === 'compact' ? 'comfortable' : 'compact')}
|
|
>
|
|
{density === 'compact' ? (
|
|
<>
|
|
<LayoutGrid className="mr-2 h-4 w-4" />
|
|
Comfortable
|
|
</>
|
|
) : (
|
|
<>
|
|
<LayoutList className="mr-2 h-4 w-4" />
|
|
Compact
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
{/* Column Visibility Menu */}
|
|
<ColumnVisibilityMenu table={table} />
|
|
|
|
{/* Export button will be added here in Phase 5 */}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|