Merge branch 'main' of https://github.com/sadmann7/shadcn-table

src/app/_components/tasks-table-shell.tsx

@@ -2,7 +2,8 @@
 
 import * as React from "react"
 import { type Task } from "@/db/schema"
-import { type ColumnDef } from "@tanstack/react-table"
+import { type SearchParams } from "@/types"
+import { type ColumnDef, type ColumnFiltersState } from "@tanstack/react-table"
 
 import { useDataTable } from "@/hooks/use-data-table"
 import { DataTable } from "@/components/data-table/data-table"
@@ -20,9 +21,13 @@ import {
 
 interface TasksTableShellProps {
   tasksPromise: TasksPromise
+  searchParams: SearchParams
 }
 
-export function TasksTableShell({ tasksPromise }: TasksTableShellProps) {
+export function TasksTableShell({
+  tasksPromise,
+  searchParams,
+}: TasksTableShellProps) {
   // Learn more about React.use here: https://react.dev/reference/react/use
   const { data, pageCount } = React.use(tasksPromise)
 
@@ -34,12 +39,25 @@ export function TasksTableShell({ tasksPromise }: TasksTableShellProps) {
     [isPending]
   )
 
+  const initialColumnFilters = Object.entries(searchParams)
+    .map(([columnName, columnValue]) => {
+      if (!["page", "perPage", "sort"].includes(columnName) && columnValue) {
+        const parsedValue =
+          typeof columnValue === "string" && columnValue.includes(".")
+            ? columnValue.split(".")
+            : columnValue
+        return { id: columnName, value: parsedValue }
+      }
+    })
+    .filter((ele) => !!ele) as ColumnFiltersState
+
   const { dataTable } = useDataTable({
     data,
     columns,
     pageCount,
     searchableColumns,
     filterableColumns,
+    initialColumnFilters,
   })
 
   return (

src/app/page.tsx

@@ -26,7 +26,10 @@ export default function IndexPage({ searchParams }: IndexPageProps) {
          * This is done because the table columns need to be memoized, and the `useDataTable` hook needs to be called in a client component.
          * By encapsulating the `DataTable` component within the `tasktableshell` component, we can ensure that the necessary logic and state management is handled correctly.
          */}
-        <TasksTableShell tasksPromise={tasksPromise} />
+        <TasksTableShell
+          tasksPromise={tasksPromise}
+          searchParams={searchParams}
+        />
       </React.Suspense>
     </Shell>
   )

src/hooks/use-data-table.tsx

@@ -59,6 +59,7 @@ interface UseDataTableProps<TData, TValue> {
    * @example filterableColumns={[{ id: "status", title: "Status", options: ["todo", "in-progress", "done", "canceled"]}]}
    */
   filterableColumns?: DataTableFilterableColumn<TData>[]
+  initialColumnFilters?: ColumnFiltersState
 }
 
 export function useDataTable<TData, TValue>({
@@ -67,6 +68,7 @@ export function useDataTable<TData, TValue>({
   pageCount,
   searchableColumns = [],
   filterableColumns = [],
+  initialColumnFilters = [],
 }: UseDataTableProps<TData, TValue>) {
   const router = useRouter()
   const pathname = usePathname()
@@ -105,9 +107,8 @@ export function useDataTable<TData, TValue>({
   const [rowSelection, setRowSelection] = React.useState({})
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({})
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
+  const [columnFilters, setColumnFilters] =
+    React.useState<ColumnFiltersState>(initialColumnFilters)
 
   // Handle server-side pagination
   const [{ pageIndex, pageSize }, setPagination] =