feat: fuzzy searching ✨ (#105)

apps/core/package.json

@@ -29,6 +29,7 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tablex/lib": "workspace:^",
     "@tablex/tailwind": "workspace:^",
+    "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-router": "^1.50.0",
     "@tanstack/react-table": "^8.20.1",

apps/core/src/hooks/row.ts

@@ -41,7 +41,11 @@ export const useGetPaginatedRows = (
         pageSize
       )
 
-      return unwrapResult(result)
+      const res = unwrapResult(result)
+      if (!res) {
+        throw new Error()
+      }
+      return res
     }
   })
 }

apps/core/src/hooks/table.ts

@@ -2,12 +2,15 @@ import { getZodSchemaFromCols } from "@/commands/columns"
 import { generateColumnsDefs } from "@/routes/dashboard/_layout/$tableName/-components/columns"
 import { useSettings } from "@/settings/manager"
 import { useTableState } from "@/state/tableState"
+import { rankItem, type RankingInfo } from "@tanstack/match-sorter-utils"
 import { useQuery } from "@tanstack/react-query"
 import {
   getCoreRowModel,
+  getFilteredRowModel,
   getSortedRowModel,
   useReactTable,
   type ColumnDef,
+  type FilterFn,
   type PaginationState,
   type Row,
   type SortingState
@@ -34,6 +37,26 @@ export const useGetZodSchema = (tableName: string) => {
   })
 }
 
+declare module "@tanstack/react-table" {
+  //add fuzzy filter to the filterFns
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  addMeta({
+    itemRank
+  })
+
+  return itemRank.passed
+}
+
 type SetupReactTableOptions<TData, TValue> = {
   columns: ColumnDef<TData, TValue>[]
   tableName: string
@@ -49,6 +72,7 @@ export const useSetupReactTable = <TData, TValue>({
 }: SetupReactTableOptions<TData, TValue>) => {
   const { defaultData, pagination, setPagination, pageIndex, pageSize } =
     useSetupPagination()
+  const { globalFilter, setGlobalFilter } = useTableState()
 
   const { data: rows, isLoading: isRowsLoading } = useGetPaginatedRows(
     tableName,
@@ -66,12 +90,19 @@ export const useSetupReactTable = <TData, TValue>({
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
     onRowSelectionChange: setRowSelection,
     onPaginationChange: setPagination,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: "fuzzy",
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
     state: {
       sorting,
       rowSelection,
-      pagination
+      pagination,
+      globalFilter
     },
     manualPagination: true,
     debugTable: import.meta.env.DEV

apps/core/src/routes/dashboard/_layout/$tableName/-components/data-table.tsx

@@ -90,7 +90,7 @@ const DataTable = ({ columns }: DataTableProps) => {
 
   return (
     <Sheet open={isOpen} onOpenChange={toggleSheet}>
-      <TableActions table={table} tableName={tableName} />
+      <TableActions table={table} />
       {isRowsLoading ? (
         <LoadingSpinner />
       ) : (

apps/core/src/routes/dashboard/_layout/$tableName/-components/table-actions.tsx

@@ -19,21 +19,30 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator
 } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { useTableState } from "@/state/tableState"
 
 type TableActionsProps = {
-  tableName: string
   table: Table<any>
 }
 
-const TableActions = ({ tableName, table }: TableActionsProps) => {
+const TableActions = ({ table }: TableActionsProps) => {
   const { toggleDialog: toggleSqlEditor } = useSqlEditorState()
+  const { tableName, setGlobalFilter } = useTableState()
   return (
     <>
       <div className="flex items-center justify-between p-4">
-        <div className="flex h-full items-start">
+        <div className="flex h-full flex-col items-start gap-y-3">
           <h1 className="h-full w-full text-xl font-bold lg:text-3xl">
             {tableName}
           </h1>
+          <Input
+            className="hidden min-w-[500px] placeholder:text-white/50 lg:block"
+            placeholder="Type something to filter..."
+            onChange={(value) =>
+              setGlobalFilter(String(value.currentTarget.value))
+            }
+          />
         </div>
         <div className="flex flex-col items-end gap-y-3">
           <DataTablePagination table={table} />

apps/core/src/routes/dashboard/_layout/$tableName/route.tsx

@@ -25,13 +25,14 @@ function TableData() {
 
   const {
     data: columns,
-    isLoading: isColumnsLoading,
+    isPending: isColumnsPending,
+    isError,
     error
   } = useGetTableColumns(tableName)
 
-  if (isColumnsLoading) return <LoadingSpinner />
+  if (isColumnsPending) return <LoadingSpinner />
 
-  if (error) return toast.error(error.message, { id: "get_table_columns" })
+  if (isError) return toast.error(error.message, { id: "get_table_columns" })
 
   return (
     <section className="flex w-full flex-col overflow-auto will-change-scroll">

apps/core/src/state/tableState.ts

@@ -3,13 +3,17 @@ import { create } from "zustand"
 export type TableState = {
   tableName: string
   pkColumn?: string
+  globalFilter: string
+  setGlobalFilter: (globalFilter: string) => void
   updateTableName: (tableName: TableState["tableName"]) => void
   updatePkColumn: (pkColumn: TableState["pkColumn"]) => void
 }
 
 export const useTableState = create<TableState>((set) => ({
   tableName: "",
   pkColumn: undefined,
+  globalFilter: "",
+  setGlobalFilter: (globalFilter) => set(() => ({ globalFilter })),
   updateTableName: (tableName) => set(() => ({ tableName })),
   updatePkColumn: (pkColumn) => set(() => ({ pkColumn }))
 }))