import { ColumnDef, useReactTable, getCoreRowModel, flexRender, getSortedRowModel, SortingState, VisibilityState, getPaginationRowModel, } from '@tanstack/react-table'; import { forwardRef, useMemo, useState } from 'react'; import { TextField } from '@/colidy-ui/TextField'; import { Dropdown, DropdownItems, DropdownTrigger, DropdownCheckbox, DropdownSub, DropdownSubItems, DropdownSubTrigger, DropdownRadioGroup, DropdownRadioItem, } from '@/colidy-ui/Dropdown'; import { Button } from './Button'; type DataTableProps = { columns: ColumnDef[]; data: TData[] | undefined; isLoading?: boolean; }; export const DataTable = forwardRef>( ({ columns, data, isLoading }, ref) => { const [sorting, setSorting] = useState([]); const [search, setSearch] = useState(''); const [columnVisibility, setColumnVisibility] = useState< VisibilityState | undefined >( columns.reduce((acc, column: (typeof columns)[number]) => { if (!column) return acc; if (!column.id) return acc; acc[column.id] = true; return acc; }, {} as VisibilityState) ); const filteredData = useMemo( () => data?.filter(d => { return Object.values(d).some(v => { return String(v) .toLowerCase() .includes(search.toLowerCase()); }); }) ?? [], [data, search] ); const table = useReactTable({ data: filteredData, columns, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), state: { sorting, columnVisibility, }, onSortingChange: newSorting => setSorting(newSorting), onColumnVisibilityChange: newColumnVisibility => setColumnVisibility(newColumnVisibility as VisibilityState), getPaginationRowModel: getPaginationRowModel(), }); return (

setSearch(e.target.value)} className="w-72" left={ } /> Columns {table.getAllColumns().map(column => ( column.toggleVisibility(checked) } disabled={!column.getCanHide()} > {column.columnDef.header as any} ))} Page Size table.setPageSize(+val) } > {[10, 20, 30, 40, 50].map(pageSize => ( {pageSize} ))}

{table.getHeaderGroups().map(headerGroup => ( {headerGroup.headers.map(header => ( ))} ))} {isLoading && Array.from({ length: 10 }).map((_, i) => ( {columns.map((column, j) => ( ))} ))} {table.getRowModel().rows.length === 0 && ( )} {table.getRowModel().rows.map(row => ( {row.getVisibleCells().map(cell => ( ))} ))}

{flexRender( header.column.columnDef .header, header.getContext() )} {header.column.getIsSorted() ? ( header.column.getIsSorted() === 'asc' ? ( ) : ( ) ) : ( )}

Nothing to see here
{cell?.getValue() as any}

); } ); DataTable.displayName = 'ColidyDataTable'; function ChevronDown({ size }: { size?: number }) { return ( ); } function ChevronUp({ size }: { size?: number }) { return ( ); } function ChevronUpDown({ size }: { size?: number }) { return ( ); }

First Name	Last Name	Email
Andrew	Frami	[email protected]
Eve	Little	[email protected]
Brady	Schoen	[email protected]
Hunter	Stracke	[email protected]
Coy	Harris	[email protected]
Cale	Krajcik	[email protected]
Thurman	Pfeffer	[email protected]
Jerome	O'Conner	[email protected]
Orin	Dickinson	[email protected]
Jayden	Koch	[email protected]

Installation