'use client'; import * as React from 'react'; import { RiArrowDownSFill, RiArrowDownSLine, RiArrowUpSFill, RiDeleteBin6Line, RiEdit2Line, RiExpandUpDownFill, RiFilter3Fill, RiSearch2Line, RiSortDesc, } from '@remixicon/react'; import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef, type SortingState, } from '@tanstack/react-table'; import * as Button from './components/ui/button'; import * as Checkbox from './components/ui/checkbox'; import * as Input from './components/ui/input'; import * as Kbd from './components/ui/kbd'; import * as SegmentedControl from './components/ui/segmented-control'; import * as Table from './components/ui/table'; type TransactionData = { id: string; date: string; product: string; clientCompany: string; amount: number; }; const data: TransactionData[] = [ { id: '#4170', date: '10/08/2023', product: 'Notion Monthly Subscription', clientCompany: 'Notion Labs Inc.', amount: -280.35, }, { id: '#4169', date: '09/08/2023', product: 'Zoom Annual Plan Renewal', clientCompany: 'Zoom Video Communications', amount: -1599.0, }, { id: '#4168', date: '08/08/2023', product: 'Marketing Consultation Services', clientCompany: 'Apex Financial', amount: 2301.2, }, { id: '#4167', date: '07/08/2023', product: 'Web Development Project Payment', clientCompany: 'Orandis Technology', amount: -1245.35, }, { id: '#4166', date: '06/08/2023', product: 'Software License Renewal', clientCompany: 'Solaris Energy', amount: 254.25, }, { id: '#4165', date: '05/08/2023', product: 'Data Analytics Training Course Fee', clientCompany: 'Horizon Shift Tutoring', amount: -720.53, }, { id: '#4164', date: '04/08/2023', product: 'Employee Checkup Payments', clientCompany: 'Pulse Healthcare', amount: -2123.53, }, { id: '#4163', date: '03/08/2023', product: 'Freelance Writing Services', clientCompany: 'Catalyst Marketing', amount: 154.42, }, { id: '#4162', date: '02/08/2023', product: 'Project Management Consultancy', clientCompany: 'Aurora Solutions', amount: 745.21, }, ]; const getSortingIcon = (state: 'asc' | 'desc' | false) => { if (state === 'asc') return ; if (state === 'desc') return ; return ; }; export default function TransactionTable() { const [sorting, setSorting] = React.useState([]); const [filter, setFilter] = React.useState('all'); const [rowSelection, setRowSelection] = React.useState({}); const filteredData = React.useMemo(() => { if (filter === 'all') return data; return data.filter((item) => filter === 'income' ? item.amount > 0 : item.amount < 0, ); }, [filter]); const columns: ColumnDef[] = [ { id: 'select', header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label='Select all' /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label='Select row' /> ), }, { id: 'id', accessorKey: 'id', header: ({ column }) => (

), cell: ({ row }) => ( {row.original.id} ), }, { id: 'date', accessorKey: 'date', header: ({ column }) => (

Date

), cell: ({ row }) => ( {row.original.date} ), }, { id: 'product', accessorKey: 'product', header: ({ column }) => (

Product

), cell: ({ row }) => ( {row.original.product} ), }, { id: 'clientCompany', accessorKey: 'clientCompany', header: ({ column }) => (

Client / Company

), cell: ({ row }) => ( {row.original.clientCompany} ), }, { id: 'amount', accessorKey: 'amount', header: ({ column }) => (

Amount

), cell: ({ row }) => ( {row.original.amount > 0 ? '+' : ''} {row.original.amount.toLocaleString('tr-TR', { style: 'currency', currency: 'USD', })} ), }, { id: 'actions', enableHiding: false, cell: ({ row }) => (

), }, ]; const table = useReactTable({ data: filteredData, columns, onSortingChange: setSorting, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), onRowSelectionChange: setRowSelection, state: { sorting, rowSelection, }, }); return (

All Income Outgoing

⌘1

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 && } ))}

); }