mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Joshen Lim
f8257f2146
## Context
No visual changes - just refactoring to decouple DataTableInfinite from
unified logs so that we can reuse the DataTableInfinite component in
other places. Note that we're only decoupling the table - not the side
menu stuffs
- Removes depedency on `QuerySearchParamsType` from unified logs in
`DataTableProvider.tsx`
- Remove unnecessary `searchParamsParser`
- Was feeding a dead `useQueryState('live')` in `DataTableRow` that
never used its return value
Am planning to revisit the audit logs UI subsequently as i realised its
current state makes it hard to find things for debugging
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved error messaging in data tables, including a clearer “Failed
to retrieve logs” message when log retrieval fails.
- Standardized default error messaging for other data-loading failures.
- **Improvements**
- Enhanced compatibility for asynchronous table filters and search
parameters without changing existing user workflows.
- Preserved existing filtering and live data behavior while improving
table reliability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import type {
|
|
ColumnDef,
|
|
ColumnFiltersState,
|
|
PaginationState,
|
|
RowSelectionState,
|
|
SortingState,
|
|
Table,
|
|
VisibilityState,
|
|
} from '@tanstack/react-table'
|
|
import { createContext, ReactNode, useContext, useMemo } from 'react'
|
|
|
|
import { DataTableFilterField } from '../DataTable.types'
|
|
import { ResponseError } from '@/types'
|
|
|
|
// REMINDER: read about how to move controlled state out of the useReactTable hook
|
|
// https://github.com/TanStack/table/discussions/4005#discussioncomment-7303569
|
|
|
|
interface DataTableStateContextType<TSearchParams = unknown> {
|
|
columnFilters: ColumnFiltersState
|
|
sorting: SortingState
|
|
rowSelection: RowSelectionState
|
|
columnOrder: string[]
|
|
columnVisibility: VisibilityState
|
|
pagination: PaginationState
|
|
enableColumnOrdering: boolean
|
|
searchParameters: TSearchParams
|
|
openRowId: string | undefined
|
|
setOpenRowId: (id: string | undefined) => void
|
|
}
|
|
|
|
interface DataTableBaseContextType<TData = unknown, TValue = unknown> {
|
|
table: Table<TData>
|
|
error: ResponseError | null
|
|
filterFields: DataTableFilterField<TData>[]
|
|
columns: ColumnDef<TData, TValue>[]
|
|
isFetching: boolean
|
|
isError: boolean
|
|
isLoading: boolean
|
|
isLoadingCounts: boolean
|
|
getFacetedUniqueValues?: (table: Table<TData>, columnId: string) => Map<string, number>
|
|
getFacetedMinMaxValues?: (table: Table<TData>, columnId: string) => undefined | [number, number]
|
|
}
|
|
|
|
interface DataTableContextType<TData = unknown, TValue = unknown, TSearchParams = unknown>
|
|
extends DataTableStateContextType<TSearchParams>, DataTableBaseContextType<TData, TValue> {}
|
|
|
|
export const DataTableContext = createContext<DataTableContextType<any, any, any> | null>(null)
|
|
|
|
export function DataTableProvider<TData, TValue, TSearchParams = unknown>({
|
|
children,
|
|
...props
|
|
}: Partial<DataTableStateContextType<TSearchParams>> &
|
|
DataTableBaseContextType<TData, TValue> & {
|
|
children: ReactNode
|
|
}) {
|
|
const value = useMemo(
|
|
() => ({
|
|
...props,
|
|
columnFilters: props.columnFilters ?? [],
|
|
sorting: props.sorting ?? [],
|
|
rowSelection: props.rowSelection ?? {},
|
|
columnOrder: props.columnOrder ?? [],
|
|
columnVisibility: props.columnVisibility ?? {},
|
|
pagination: props.pagination ?? { pageIndex: 0, pageSize: 10 },
|
|
enableColumnOrdering: props.enableColumnOrdering ?? false,
|
|
searchParameters: props.searchParameters ?? ({} as any),
|
|
openRowId: props.openRowId,
|
|
setOpenRowId: props.setOpenRowId ?? (() => {}),
|
|
}),
|
|
[props]
|
|
)
|
|
|
|
return <DataTableContext.Provider value={value}>{children}</DataTableContext.Provider>
|
|
}
|
|
|
|
export function useDataTable<TData, TValue, TSearchParams = unknown>() {
|
|
const context = useContext(DataTableContext)
|
|
|
|
if (!context) {
|
|
throw new Error('useDataTable must be used within a DataTableProvider')
|
|
}
|
|
|
|
return context as DataTableContextType<TData, TValue, TSearchParams>
|
|
}
|