diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx index 364e78e..365efee 100644 --- a/compass/components/Table/Index.tsx +++ b/compass/components/Table/Index.tsx @@ -3,14 +3,11 @@ import usersImport from "./users.json"; import { ColumnDef, - ColumnFiltersState, - GlobalFilterTableState, Row, createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, - getSortedRowModel, sortingFns, useReactTable, } from "@tanstack/react-table"; @@ -19,7 +16,7 @@ import { RowOptionMenu } from "./RowOptionMenu"; import { RowOpenAction } from "./RowOpenAction"; import { TableAction } from "./TableAction"; import { Bars2Icon, AtSymbolIcon, HashtagIcon, ArrowDownCircleIcon } from "@heroicons/react/24/solid"; -import { compareItems, rankItem } from "@tanstack/match-sorter-utils"; +import { rankItem } from "@tanstack/match-sorter-utils"; const usersExample = usersImport as unknown as User[]; @@ -34,6 +31,7 @@ type User = { group?: string; }; +// For search const fuzzyFilter = (row: Row, columnId: string, value: any, addMeta: (meta: any) => void) => { // Rank the item const itemRank = rankItem(row.getValue(columnId), value) @@ -45,21 +43,6 @@ const fuzzyFilter = (row: Row, columnId: string, value: any, addMeta: (meta return itemRank.passed } -const fuzzySort = (rowA, rowB, columnId) => { - let dir = 0 - - // Only sort by rank if the column has ranking information - if (rowA.columnFiltersMeta[columnId]) { - dir = compareItems( - rowA.columnFiltersMeta[columnId]!, - rowB.columnFiltersMeta[columnId]! - ) - } - // Provide an alphanumeric fallback for when the item ranks are equal - return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir -} - - export const Table = () => { const columnHelper = createColumnHelper(); @@ -71,7 +54,6 @@ export const Table = () => { columnHelper.accessor("username", { header: () => <> Username, cell: (info) => , - sortingFn: fuzzySort, }), columnHelper.accessor("role", { header: () => <> Role, @@ -88,21 +70,12 @@ export const Table = () => { ]; const [data, setData] = useState([...usersExample]); - // const [globalFilter, setGlobalFilter] = useState(); // Searching const [query, setQuery] = useState(""); const handleSearchChange = (e: ChangeEvent) => { const target = e.target as HTMLInputElement; setQuery(String(target.value)); - console.log(query); - - // setColumnFilters([ - // { - // id: "username", - // value: query - // } - // ]) } // TODO: Filtering @@ -121,8 +94,6 @@ export const Table = () => { globalFilterFn: fuzzyFilter, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), - getSortedRowModel: getSortedRowModel(), - // onColumnFiltersChange: setColumnFilters, }); return ( diff --git a/compass/components/Table/TableAction.tsx b/compass/components/Table/TableAction.tsx index 47b3680..e58e110 100644 --- a/compass/components/Table/TableAction.tsx +++ b/compass/components/Table/TableAction.tsx @@ -38,7 +38,7 @@ export const TableAction: FunctionComponent = ({query, handleC type="text" name="search" placeholder="Type to search..." - value={query} + value={query ?? ""} onChange={handleChange} />