Column Customizer

Import { Card } from '@/components/ui/card'; import { Switch } from '@/components/ui/switch'; import { Table } from '@tanstack/react table'; import { AnimatePresence, motion } from 'framer motion'; import { Star } from 'lucide react'; import { useState } from 'react'; const MotionCard = motion(Card); interface ColumnCustomizerProps<T> { table: Table<T>; } function ColumnCustomizer<T>({ table }: ColumnCustomizerProps<T>) { const [localColumns, setLocalColumns] = useState(() => table .getAllColumns() .map(column => ({ id: column.id, isVisible: column.getIsVisible(), canHide: column.getCanHide() })), ); const handleVisibilityChange = (columnId: string) => { setLocalColumns(prevColumns => prevColumns.map(col => (col.id === columnId && col.canHide ? { ...col, isVisible: !col.isVisible } : col)), ); const column = table.getColumn(columnId); if (column && column.getCanHide()) column.toggleVisibility(); }; return ( <motion.div className="mx auto w full max w lg overflow hidden rounded lg border border gray 200 bg gradient to br from white via gray 50 to gray 100 p 6 shadow 2xl backdrop blur lg backdrop filter md:max w xl" initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: 0.3 }} > <motion.h3 className="mb 6 border b border gray 300 pb 3 text center text xl font semibold text gray 800" initial={{ y: 10 }} animate={{ y: 0 }} transition={{ delay: 0.1, type: 'spring', stiffness: 200 }} > Column Customizer </motion.h3> <AnimatePresence> {localColumns.map(column => ( <motion.div key={column.id} layout initial={{ opacity: 0, scale: 0.9, y: 10 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.9, y: 10 }} transition={{ duration: 0.3, type: 'spring', stiffness: 200, damping: 20 }} className="mb 4" > <MotionCard className="rounded lg bg gradient to r from indigo 200 via purple 300 to pink 200 p 4 shadow xl backdrop blur md" whileHover={{ scale: 1.05, boxShadow: '0 4px 25px rgba(0, 0, 0, 0.2)' }} > <div className="flex items center justify between text sm md:text base"> <div className="flex items center space x 4"> <Star className="h 5 w 5 text yellow 500 md:h 6 md:w 6" /> <span className="font semibold text gray 900">{column.id}</span> </div> <div className="flex items center space x 4"> <Switch checked={column.isVisible} onCheckedChange={() => handleVisibilityChange(column.id)} className="relative inline flex h 5 w 10 rounded full bg gray 200 transition colors duration 300 ease in out md:h 6 md:w 12" > <span aria hidden="true" className={`${ column.isVisible ? 'translate x 5 bg green 400' : 'translate x 1 bg gray 400' } inline block h 4 w 4 transform rounded full transition duration 300 ease in out md:h 5 md:w 5`} /> </Switch> </div> </div> </MotionCard> </motion.div> ))} </AnimatePresence> </motion.div> ); } export default ColumnCustomizer;