feat: use table instance

nainglinnkhant · Jul 8, 2024 · d0bcba5 · d0bcba5
1 parent 5f1f5e9
commit d0bcba5
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 39 deletions.
diff --git a/src/app/_components/tasks-table.tsx b/src/app/_components/tasks-table.tsx
@@ -82,11 +82,7 @@ export function TasksTable({ tasksPromise, viewsPromise }: TasksTableProps) {
         table={table}
         floatingBar={<TasksTableFloatingBar table={table} />}
       >
-        <DataTableAdvancedToolbar
-          table={table}
-          filterFields={filterFields}
-          views={views}
-        >
+        <DataTableAdvancedToolbar filterFields={filterFields} views={views}>
           <TasksTableToolbarActions table={table} />
         </DataTableAdvancedToolbar>
       </DataTable>

diff --git a/src/components/data-table/advanced/data-table-advanced-toolbar.tsx b/src/components/data-table/advanced/data-table-advanced-toolbar.tsx
@@ -5,13 +5,13 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import type { View } from "@/db/schema"
 import type { DataTableFilterField, DataTableFilterOption } from "@/types"
 import { CaretSortIcon, PlusIcon } from "@radix-ui/react-icons"
-import type { Table } from "@tanstack/react-table"
 import isEqual from "lodash.isequal"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { DataTableFilterCombobox } from "@/components/data-table/advanced/data-table-filter-combobox"
 import { DataTableColumnsVisibility } from "@/components/data-table/data-table-columns-visibility"
+import { useTableInstanceContext } from "@/app/_components/table-instance-provider"
 import type { SearchParams } from "@/app/_lib/validations"
 
 import { DataTableFilterItem } from "./data-table-filter-item"
@@ -28,13 +28,11 @@ import {
 
 interface DataTableAdvancedToolbarProps<TData>
   extends React.HTMLAttributes<HTMLDivElement> {
-  table: Table<TData>
   filterFields?: DataTableFilterField<TData>[]
   views: Omit<View, "createdAt" | "updatedAt">[]
 }
 
 export function DataTableAdvancedToolbar<TData>({
-  table,
   filterFields = [],
   views,
   children,
@@ -45,6 +43,8 @@ export function DataTableAdvancedToolbar<TData>({
   const pathname = usePathname()
   const searchParams = useSearchParams()
 
+  const { tableInstance: table } = useTableInstanceContext()
+
   const options = React.useMemo<DataTableFilterOption<TData>[]>(() => {
     return filterFields.map((field) => {
       return {
@@ -218,7 +218,7 @@ export function DataTableAdvancedToolbar<TData>({
               onSelect={onFilterComboboxItemSelect}
             />
           )}
-          <DataTableColumnsVisibility table={table} />
+          <DataTableColumnsVisibility />
         </div>
       </div>
       <div
@@ -232,15 +232,13 @@ export function DataTableAdvancedToolbar<TData>({
           .map((selectedOption) => (
             <DataTableFilterItem
               key={String(selectedOption.value)}
-              table={table}
               selectedOption={selectedOption}
               setSelectedOptions={setSelectedOptions}
               defaultOpen={openCombobox}
             />
           ))}
         {selectedOptions.some((option) => option.isMulti) ? (
           <DataTableMultiFilter
-            table={table}
             allOptions={options}
             options={multiFilterOptions}
             setSelectedOptions={setSelectedOptions}

diff --git a/src/components/data-table/advanced/data-table-filter-item.tsx b/src/components/data-table/advanced/data-table-filter-item.tsx
@@ -2,7 +2,6 @@ import * as React from "react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import type { DataTableFilterOption } from "@/types"
 import { TrashIcon } from "@radix-ui/react-icons"
-import type { Table } from "@tanstack/react-table"
 
 import { dataTableConfig } from "@/config/data-table"
 import { cn, createQueryString } from "@/lib/utils"
@@ -22,11 +21,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { useTableInstanceContext } from "@/app/_components/table-instance-provider"
 
 import { DataTableAdvancedFacetedFilter } from "./data-table-advanced-faceted-filter"
 
 interface DataTableFilterItemProps<TData> {
-  table: Table<TData>
   selectedOption: DataTableFilterOption<TData>
   setSelectedOptions: React.Dispatch<
     React.SetStateAction<DataTableFilterOption<TData>[]>
@@ -35,7 +34,6 @@ interface DataTableFilterItemProps<TData> {
 }
 
 export function DataTableFilterItem<TData>({
-  table,
   selectedOption,
   setSelectedOptions,
   defaultOpen,
@@ -44,6 +42,8 @@ export function DataTableFilterItem<TData>({
   const pathname = usePathname()
   const searchParams = useSearchParams()
 
+  const { tableInstance: table } = useTableInstanceContext()
+
   const column = table.getColumn(
     selectedOption.value ? String(selectedOption.value) : ""
   )

diff --git a/src/components/data-table/advanced/data-table-multi-filter.tsx b/src/components/data-table/advanced/data-table-multi-filter.tsx
@@ -7,7 +7,6 @@ import {
   TextAlignCenterIcon,
   TrashIcon,
 } from "@radix-ui/react-icons"
-import type { Table } from "@tanstack/react-table"
 
 import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
 import { createQueryString } from "@/lib/utils"
@@ -34,11 +33,11 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
+import { useTableInstanceContext } from "@/app/_components/table-instance-provider"
 
 import { DataTableFacetedFilter } from "../data-table-faceted-filter"
 
 interface DataTableMultiFilterProps<TData> {
-  table: Table<TData>
   allOptions: DataTableFilterOption<TData>[]
   options: DataTableFilterOption<TData>[]
   setSelectedOptions: React.Dispatch<
@@ -48,7 +47,6 @@ interface DataTableMultiFilterProps<TData> {
 }
 
 export function DataTableMultiFilter<TData>({
-  table,
   allOptions,
   options,
   setSelectedOptions,
@@ -89,7 +87,6 @@ export function DataTableMultiFilter<TData>({
               key={option.id ?? i}
               i={i}
               option={option}
-              table={table}
               allOptions={allOptions}
               setSelectedOptions={setSelectedOptions}
               operator={operator}
@@ -129,7 +126,6 @@ export function DataTableMultiFilter<TData>({
 
 interface MultiFilterRowProps<TData> {
   i: number
-  table: Table<TData>
   allOptions: DataTableFilterOption<TData>[]
   option: DataTableFilterOption<TData>
   setSelectedOptions: React.Dispatch<
@@ -145,7 +141,6 @@ interface MultiFilterRowProps<TData> {
 
 export function MultiFilterRow<TData>({
   i,
-  table,
   option,
   allOptions,
   setSelectedOptions,
@@ -159,6 +154,8 @@ export function MultiFilterRow<TData>({
   const value = option.filterValues?.[0] ?? ""
   const debounceValue = useDebounce(value, 500)
 
+  const { tableInstance: table } = useTableInstanceContext()
+
   const column = table.getColumn(option.value ? String(option.value) : "")
 
   const comparisonOperators =

diff --git a/src/components/data-table/data-table-columns-visibility.tsx b/src/components/data-table/data-table-columns-visibility.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { LayoutIcon } from "@radix-ui/react-icons"
-import type { Table } from "@tanstack/react-table"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -12,14 +11,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { useTableInstanceContext } from "@/app/_components/table-instance-provider"
 
-interface DataTableColumnsVisibility<TData> {
-  table: Table<TData>
-}
+export function DataTableColumnsVisibility() {
+  const { tableInstance: table } = useTableInstanceContext()
 
-export function DataTableColumnsVisibility<TData>({
-  table,
-}: DataTableColumnsVisibility<TData>) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>

diff --git a/src/components/data-table/data-table-pagination.tsx b/src/components/data-table/data-table-pagination.tsx
@@ -6,7 +6,6 @@ import {
   DoubleArrowLeftIcon,
   DoubleArrowRightIcon,
 } from "@radix-ui/react-icons"
-import { type Table } from "@tanstack/react-table"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -16,28 +15,29 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { useTableInstanceContext } from "@/app/_components/table-instance-provider"
 
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>
+interface DataTablePaginationProps {
   pageSizeOptions?: number[]
 }
 
-export function DataTablePagination<TData>({
-  table,
+export function DataTablePagination({
   pageSizeOptions = [10, 20, 30, 40, 50],
-}: DataTablePaginationProps<TData>) {
+}: DataTablePaginationProps) {
   const searchParams = useSearchParams()
 
+  const { tableInstance: table } = useTableInstanceContext()
+
+  const page = searchParams.get("page")
+  const perPage = searchParams.get("per_page")
+
   // Update pagination state when pagination params are changed
   useEffect(() => {
-    const page = searchParams.get("page")
-    const perPage = searchParams.get("per_page")
-
     table.setPageIndex(page ? Number(page) - 1 : 0)
 
     table.setPageSize(perPage ? Number(perPage) : 10)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams])
+  }, [page, perPage])
 
   return (
     <div className="flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8">
@@ -51,6 +51,7 @@ export function DataTablePagination<TData>({
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
+              table.setPageIndex(0)
               table.setPageSize(Number(value))
             }}
           >

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
@@ -23,7 +23,7 @@ interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
    * The floating bar to render at the bottom of the table on row selection.
    * @default null
    * @type React.ReactNode | null
-   * @example floatingBar={<TasksTableFloatingBar table={table} />}
+   * @example floatingBar={<TasksTableFloatingBar />}
    */
   floatingBar?: React.ReactNode | null
 }
@@ -92,7 +92,7 @@ export function DataTable<TData>({
         </Table>
       </div>
       <div className="flex flex-col gap-2.5">
-        <DataTablePagination table={table} />
+        <DataTablePagination />
         {table.getFilteredSelectedRowModel().rows.length > 0 && floatingBar}
       </div>
     </div>