[pull] beta from TanStack:beta

examples/angular/basic-external-atoms/src/app/app.ts

@@ -1,8 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  effect,
   Injector,
+  effect,
   inject,
   signal,
 } from '@angular/core'

examples/angular/row-selection-signal/src/app/app.component.ts

@@ -1,8 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  computed,
   Injector,
+  computed,
   inject,
   signal,
   viewChild,

examples/angular/row-selection/src/app/app.ts

@@ -1,8 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  computed,
   Injector,
+  computed,
   inject,
   signal,
 } from '@angular/core'

examples/angular/with-tanstack-form/src/app/app.ts

@@ -1,8 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  effect,
   Injector,
+  effect,
   inject,
   signal,
   untracked,

examples/react/kitchen-sink-chakra-ui/src/components/data-table/shared.tsx

@@ -232,7 +232,7 @@ export function CheckboxField({
       checked={indeterminate ? 'indeterminate' : checked}
       onCheckedChange={(details) => onCheckedChange?.(details.checked === true)}
     >
-      <Checkbox.HiddenInput {...(props as any)} />
+      <Checkbox.HiddenInput {...props} />
       <Checkbox.Control />
       {label ? <Checkbox.Label>{label}</Checkbox.Label> : null}
     </Checkbox.Root>

examples/react/kitchen-sink-hero-ui/src/components/data-table/data-table-filter-list.tsx

@@ -188,7 +188,7 @@ export function DataTableFilterList(): React.ReactNode {
     setColumnFilters(
       columnFilters.map((filter: ExtendedColumnFilter) =>
         filter.filterId === filterId ? { ...filter, ...patch } : filter,
-      ) as any,
+      ),
     )
   }
 
@@ -240,7 +240,7 @@ export function DataTableFilterList(): React.ReactNode {
                         columnFilters.map((item: ExtendedColumnFilter) => ({
                           ...item,
                           joinOperator: joinOperator as 'and' | 'or',
-                        })) as any,
+                        })),
                       )
                     }
                   />
@@ -293,7 +293,7 @@ export function DataTableFilterList(): React.ReactNode {
                       columnFilters.filter(
                         (item: ExtendedColumnFilter) =>
                           item.filterId !== filter.filterId,
-                      ) as any,
+                      ),
                     )
                   }
                 >
@@ -309,7 +309,7 @@ export function DataTableFilterList(): React.ReactNode {
             <Button
               size="sm"
               variant="ghost"
-              onPress={() => setColumnFilters([] as any)}
+              onPress={() => setColumnFilters([])}
             >
               Reset
             </Button>

examples/react/kitchen-sink-hero-ui/src/main.tsx

@@ -6,10 +6,10 @@ import * as ReactDOM from 'react-dom/client'
 import { useDebouncedCallback } from '@tanstack/react-pacer/debouncer'
 import {
   Button,
+  Table as HeroTable,
   Input,
   Surface,
   Switch,
-  Table as HeroTable,
   Tooltip,
   cn,
   useTheme,

examples/react/kitchen-sink-mantine/src/components/data-table/data-table-filter-list.tsx

@@ -18,12 +18,12 @@ import { IconFilter, IconTrash } from '@tabler/icons-react'
 import type { Column, RowData } from '@tanstack/react-table'
 import type { ExtendedColumnFilter } from '@/types'
 import type { features } from '@/hooks/features'
-
-type AppColumn = Column<typeof features, RowData, any>
 import { useTableContext } from '@/hooks/table'
 import { getFilterOperators } from '@/lib/data-table'
 import { toDateInputValue } from '@/components/data-table/shared'
 
+type AppColumn = Column<typeof features, RowData, any>
+
 function FilterValueInput({
   column,
   filter,

examples/react/kitchen-sink-mantine/src/components/data-table/data-table-view-options.tsx

@@ -26,9 +26,9 @@ import type { DragEndEvent } from '@dnd-kit/core'
 import type { Column, RowData } from '@tanstack/react-table'
 import type { features } from '@/hooks/features'
 import { useTableContext } from '@/hooks/table'
+import { SortableFrame } from '@/components/data-table/shared'
 
 type AppColumn = Column<typeof features, RowData, any>
-import { SortableFrame } from '@/components/data-table/shared'
 
 export function DataTableViewOptions(): React.ReactNode {
   const table = useTableContext()

examples/react/kitchen-sink-material-ui/src/main.tsx

@@ -12,9 +12,9 @@ import {
   InputAdornment,
   Menu,
   MenuItem,
+  Table as MuiTable,
   Paper,
   Stack,
-  Table as MuiTable,
   TableBody,
   TableCell,
   TableContainer,

examples/react/kitchen-sink-react-aria/src/components/data-table/data-table-filter-list.tsx

@@ -197,7 +197,7 @@ export function DataTableFilterList(): React.ReactNode {
     setColumnFilters(
       columnFilters.map((filter) =>
         filter.filterId === filterId ? { ...filter, ...patch } : filter,
-      ) as any,
+      ),
     )
   }
 
@@ -212,8 +212,8 @@ export function DataTableFilterList(): React.ReactNode {
         value: '',
         operator: 'includesString',
         joinOperator: columnFilters[0]?.joinOperator ?? 'and',
-      } as ExtendedColumnFilter,
-    ] as any)
+      },
+    ])
   }
 
   return (
@@ -249,7 +249,7 @@ export function DataTableFilterList(): React.ReactNode {
                         columnFilters.map((item) => ({
                           ...item,
                           joinOperator: joinOperator as 'and' | 'or',
-                        })) as any,
+                        })),
                       )
                     }
                   />
@@ -299,7 +299,7 @@ export function DataTableFilterList(): React.ReactNode {
                     setColumnFilters(
                       columnFilters.filter(
                         (item) => item.filterId !== filter.filterId,
-                      ) as any,
+                      ),
                     )
                   }
                 >

examples/react/kitchen-sink-shadcn-base/src/components/data-table/data-table-filter-list.tsx

@@ -9,11 +9,7 @@ import {
   ListFilter,
   Trash2,
 } from 'lucide-react'
-import type {
-  ExtendedColumnFilter,
-  FilterOperator,
-  JoinOperator,
-} from '@/types'
+import type { ExtendedColumnFilter, FilterOperator } from '@/types'
 import type { Column, RowData } from '@tanstack/react-table'
 import type { features } from '@/hooks/features'
 
@@ -670,7 +666,7 @@ export function DataTableFilterList(): React.ReactNode {
                 if (columnFilters.length > 0) {
                   const updatedFilters = columnFilters.map((f) => ({
                     ...f,
-                    joinOperator: value as JoinOperator,
+                    joinOperator: value,
                   }))
                   setColumnFilters(updatedFilters)
                 }

examples/react/material-react-table/src/main.tsx

@@ -16,6 +16,7 @@ import {
 } from './material-react-table'
 import { makeData } from './makeData'
 import type { Person } from './makeData'
+import type { MRT_ColumnDef } from './material-react-table'
 import './index.css'
 
 const columnHelper = createMRTColumnHelper<Person>()
@@ -109,8 +110,8 @@ const theme = createTheme({
 function App() {
   const [data, setData] = React.useState(() => makeData(50))
 
-  const table = useMaterialReactTable({
-    columns,
+  const table = useMaterialReactTable<Person>({
+    columns: columns as Array<MRT_ColumnDef<Person>>,
     data,
     enableColumnFilters: true,
     enableColumnOrdering: true,

examples/react/material-react-table/src/material-react-table/components/MaterialReactTable.tsx

@@ -32,5 +32,15 @@ export const MaterialReactTable = <TData extends MRT_RowData>(
     table = useMaterialReactTable(props)
   }
 
-  return <MRT_TablePaper table={table} />
+  // `AppTable` (attached by `useAppTable`) provides the table via React context
+  // so MRT components can read it with `useTableContext()` instead of a prop.
+  const AppTable = (table as any).AppTable as React.FC<{
+    children: React.ReactNode
+  }>
+
+  return (
+    <AppTable>
+      <MRT_TablePaper />
+    </AppTable>
+  )
 }

examples/react/material-react-table/src/material-react-table/components/body/MRT_TableBody.tsx

@@ -4,28 +4,21 @@ import Typography from '@mui/material/Typography'
 import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer'
 import { useMRT_Rows } from '../../hooks/useMRT_Rows'
 import { parseFromValuesOrFunc } from '../../utils/utils'
+import { useMRTContext } from '../../hooks/mrtTableHook'
 import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow'
-import type {
-  MRT_ColumnVirtualizer,
-  MRT_Row,
-  MRT_RowData,
-  MRT_TableInstance,
-} from '../../types'
+import type { MRT_ColumnVirtualizer, MRT_Row, MRT_RowData } from '../../types'
 import type { TableBodyProps } from '@mui/material/TableBody'
 import type { VirtualItem } from '@tanstack/react-virtual'
 
-export interface MRT_TableBodyProps<
-  TData extends MRT_RowData,
-> extends TableBodyProps {
+export interface MRT_TableBodyProps extends TableBodyProps {
   columnVirtualizer?: MRT_ColumnVirtualizer
-  table: MRT_TableInstance<TData>
 }
 
-export const MRT_TableBody = <TData extends MRT_RowData>({
+export const MRT_TableBody = <TData extends MRT_RowData = MRT_RowData>({
   columnVirtualizer,
-  table,
   ...rest
-}: MRT_TableBodyProps<TData>) => {
+}: MRT_TableBodyProps) => {
+  const table = useMRTContext<TData>()
   const {
     getBottomRows,
     getIsSomeRowsPinned,
@@ -75,7 +68,6 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
   const commonRowProps = {
     columnVirtualizer,
     numRows: rows.length,
-    table,
   }
 
   return (
@@ -219,7 +211,4 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
   )
 }
 
-export const Memo_MRT_TableBody = memo(
-  MRT_TableBody,
-  (prev, next) => prev.table.options.data === next.table.options.data,
-) as typeof MRT_TableBody
+export const Memo_MRT_TableBody = memo(MRT_TableBody) as typeof MRT_TableBody

examples/react/material-react-table/src/material-react-table/components/body/MRT_TableBodyCell.tsx

@@ -11,8 +11,9 @@ import { getCommonMRTCellStyles } from '../../utils/style.utils'
 import { parseFromValuesOrFunc } from '../../utils/utils'
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton'
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField'
+import { useMRTContext } from '../../hooks/mrtTableHook'
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue'
-import type { MRT_Cell, MRT_RowData, MRT_TableInstance } from '../../types'
+import type { MRT_Cell, MRT_RowData } from '../../types'
 import type { TableCellProps } from '@mui/material/TableCell'
 import type { DragEvent, MouseEvent, RefObject } from 'react'
 
@@ -24,7 +25,6 @@ export interface MRT_TableBodyCellProps<
   rowRef: RefObject<HTMLTableRowElement | null>
   staticColumnIndex?: number
   staticRowIndex: number
-  table: MRT_TableInstance<TData>
 }
 
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
@@ -33,9 +33,9 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   rowRef,
   staticColumnIndex,
   staticRowIndex,
-  table,
   ...rest
 }: MRT_TableBodyCellProps<TData>) => {
+  const table = useMRTContext<TData>()
   const theme = useTheme()
   const {
     state,
@@ -185,7 +185,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
   const cellValueProps = {
     cell,
-    table,
     staticColumnIndex,
     staticRowIndex,
   }
@@ -316,9 +315,9 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               table,
             })
           ) : isCreating || isEditing ? (
-            <MRT_EditCellTextField cell={cell} table={table} />
+            <MRT_EditCellTextField cell={cell} />
           ) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (
-            <MRT_CopyButton cell={cell} table={table}>
+            <MRT_CopyButton cell={cell}>
               <MRT_TableBodyCellValue {...cellValueProps} />
             </MRT_CopyButton>
           ) : (

examples/react/material-react-table/src/material-react-table/components/body/MRT_TableBodyCellValue.tsx

@@ -1,7 +1,8 @@
 import Box from '@mui/material/Box'
 import highlightWords from 'highlight-words'
+import { useMRTContext } from '../../hooks/mrtTableHook'
 import type { ReactNode, RefObject } from 'react'
-import type { MRT_Cell, MRT_RowData, MRT_TableInstance } from '../../types'
+import type { MRT_Cell, MRT_RowData } from '../../types'
 
 const allowedTypes = ['string', 'number']
 
@@ -10,16 +11,15 @@ export interface MRT_TableBodyCellValueProps<TData extends MRT_RowData> {
   rowRef?: RefObject<HTMLTableRowElement | null>
   staticColumnIndex?: number
   staticRowIndex?: number
-  table: MRT_TableInstance<TData>
 }
 
 export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   cell,
   rowRef,
   staticColumnIndex,
   staticRowIndex,
-  table,
 }: MRT_TableBodyCellValueProps<TData>) => {
+  const table = useMRTContext<TData>()
   const {
     state,
     options: {