'use client'; import * as React from 'react'; import { RiArrowDownSFill, RiArrowDownSLine, RiArrowUpSFill, RiCheckboxCircleFill, RiExpandUpDownFill, RiFilter3Fill, RiForbidFill, RiMore2Line, RiSearch2Line, RiSortDesc, } from '@remixicon/react'; import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef, type SortingState, } from '@tanstack/react-table'; import * as Avatar from './components/ui/avatar'; import * as Button from './components/ui/button'; import * as Checkbox from './components/ui/checkbox'; import * as FileFormatIcon from './components/ui/file-format-icon'; import * as Input from './components/ui/input'; import * as Kbd from './components/ui/kbd'; import * as SegmentedControl from './components/ui/segmented-control'; import * as StatusBadge from './components/ui/status-badge'; import * as Table from './components/ui/table'; function IconCmd(props: React.SVGProps) { return ( ); } type UserData = { id: string; companyName: { name: string; description: string; logo: string; }; contactPerson: { name: string; email: string; avatar: string; color: 'yellow' | 'blue' | 'sky' | 'purple' | 'red' | 'gray'; }; relationship: string; contractDetails: { fileName: string; fileSize: string; period: string; }; status: { variant: 'completed' | 'disabled'; label: string; }; }; const data: UserData[] = [ { id: '1', companyName: { name: 'Trello', description: 'Project Management', logo: 'https://alignui.com/images/major-brands/trello.svg', }, contactPerson: { name: 'Nuray Aksoy', email: 'nuray@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/nuray.png', color: 'red', }, relationship: 'Client-Provider', contractDetails: { fileName: 'trello-contract.pdf', fileSize: '1.8 MB', period: 'Aug 2022 - 2024', }, status: { variant: 'completed', label: 'Active', }, }, { id: '2', companyName: { name: 'Loom', description: 'Video Messaging', logo: 'https://alignui.com/images/major-brands/loom.svg', }, contactPerson: { name: 'Ravi Patel', email: 'ravi@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/ravi.png', color: 'purple', }, relationship: 'Partnership Collab.', contractDetails: { fileName: 'loom-contract.pdf', fileSize: '1.5 MB', period: 'Sep 2023 - 2024', }, status: { variant: 'completed', label: 'Active', }, }, { id: '3', companyName: { name: 'Monday.com', description: 'Work Operation System', logo: 'https://alignui.com/images/major-brands/monday.svg', }, contactPerson: { name: 'Natalia Nowak', email: 'natalia@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/natalia.png', color: 'sky', }, relationship: 'Vendor-Client', contractDetails: { fileName: 'mondaycom-contract.pdf', fileSize: '1.6 MB', period: 'May 2022 - May 2023', }, status: { variant: 'completed', label: 'Active', }, }, { id: '4', companyName: { name: 'Zoom', description: 'Video Conferencing', logo: 'https://alignui.com/images/major-brands/zoom.svg', }, contactPerson: { name: 'Juma Omondi', email: 'juma@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/juma.png', color: 'yellow', }, relationship: 'Partnership Collab.', contractDetails: { fileName: 'zoom-contract.pdf', fileSize: '1.8 MB', period: 'Apr 2021 - 2024', }, status: { variant: 'completed', label: 'Active', }, }, { id: '5', companyName: { name: 'Linear', description: 'Issue Tracking', logo: 'https://alignui.com/images/major-brands/linear.svg', }, contactPerson: { name: 'Lena Müller', email: 'lena@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/lena.png', color: 'blue', }, relationship: 'Client-Provider', contractDetails: { fileName: 'linear-contract.pdf', fileSize: '1.2 MB', period: 'Jan 2023 - Jan 2025', }, status: { variant: 'disabled', label: 'Inactive', }, }, { id: '6', companyName: { name: 'Skype', description: 'Video Communication', logo: 'https://alignui.com/images/major-brands/skype.svg', }, contactPerson: { name: 'Wei Chen', email: 'wei@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/wei.png', color: 'gray', }, relationship: 'Supplier-Customer', contractDetails: { fileName: 'skype-contract.pdf', fileSize: '1.4 MB', period: 'May 2020 - Jan 2023', }, status: { variant: 'completed', label: 'Active', }, }, { id: '7', companyName: { name: 'Evernote', description: 'Note-taking and Organization', logo: 'https://alignui.com/images/major-brands/evernote.svg', }, contactPerson: { name: 'Laura Perez', email: 'laura@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/laura.png', color: 'red', }, relationship: 'Vendor-Client', contractDetails: { fileName: 'evernote-contract.pdf', fileSize: '1.8 MB', period: 'Sep 2019 - 2022', }, status: { variant: 'disabled', label: 'Inactive', }, }, ]; const getSortingIcon = (state: 'asc' | 'desc' | false) => { if (state === 'asc') return ; if (state === 'desc') return ; return ; }; const columns: ColumnDef[] = [ { id: 'select', header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label='Select all' /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label='Select row' /> ), }, { id: 'companyName', accessorKey: 'companyName.name', header: ({ column }) => (

Company Name

), cell: ({ row }) => (

{row.original.companyName.name} {row.original.companyName.description}

), }, { id: 'contactPerson', accessorKey: 'contactPerson.name', header: ({ column }) => (

Contact Person

), cell: ({ row }) => (

{row.original.contactPerson.name} {row.original.contactPerson.email}

), }, { id: 'relationship', accessorKey: 'relationship', header: ({ column }) => (

Relationship

), cell: ({ row }) => (

{row.original.relationship} {row.original.contractDetails.period}

), }, { id: 'contractDetails', accessorKey: 'contractDetails.fileName', header: ({ column }) => (

Contract Details

), cell: ({ row }) => (

{row.original.contractDetails.fileName} {row.original.contractDetails.fileSize}

), }, { id: 'status', accessorKey: 'status.label', header: ({ column }) => (

Status

), cell: ({ row }) => ( {row.original.status.label} ), }, { id: 'actions', cell: () => ( ), }, ]; export default function Table01() { const [sorting, setSorting] = React.useState([]); const [filter, setFilter] = React.useState('all'); // Filtrelenmiş verileri hesapla const filteredData = React.useMemo(() => { if (filter === 'all') return data; return data.filter((item) => { if (filter === 'active') return item.status.label === 'Active'; if (filter === 'inactive') return item.status.label === 'Inactive'; return true; }); }, [filter]); const table = useReactTable({ data: filteredData, columns, onSortingChange: setSorting, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), state: { sorting, }, initialState: { sorting: [ { id: 'companyName', desc: false, }, ], }, }); return (

All Active Inactive

Filter Sort by

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { const customClass = header.id === 'select' ? 'pr-0' : ''; return ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext(), )} ); })} ))} {table.getRowModel().rows?.length > 0 && table.getRowModel().rows.map((row, i, arr) => ( {row.getVisibleCells().map((cell) => { const customCellClass = cell.column.id === 'select' ? 'pr-0' : ''; return ( {flexRender( cell.column.columnDef.cell, cell.getContext(), )} ); })} {i < arr.length - 1 && } ))}

); }