@tanstack/table-core 8.0.0-alpha.57 → 8.0.0-alpha.60

package/src/features/Grouping.ts

@@ -3,24 +3,14 @@ import { BuiltInAggregationFn, aggregationFns } from '../aggregationFns'
 import {
   Cell,
   Column,
-  Getter,
   OnChangeFn,
-  PropGetterValue,
   TableInstance,
   Row,
   Updater,
   Renderable,
-  UseRenderer,
   TableGenerics,
 } from '../types'
-import {
-  functionalUpdate,
-  isFunction,
-  makeStateUpdater,
-  memo,
-  Overwrite,
-  propGetter,
-} from '../utils'
+import { isFunction, makeStateUpdater, Overwrite } from '../utils'
 
 export type GroupingState = string[]
 
@@ -67,9 +57,7 @@ export type GroupingColumn<TGenerics extends TableGenerics> = {
   getIsGrouped: () => boolean
   getGroupedIndex: () => number
   toggleGrouping: () => void
-  getToggleGroupingProps: <TGetter extends Getter<ToggleGroupingProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleGroupingProps, TGetter>
+  getToggleGroupingHandler: () => () => void
 }
 
 export type GroupingRow = {
@@ -82,7 +70,7 @@ export type GroupingCell<TGenerics extends TableGenerics> = {
   getIsGrouped: () => boolean
   getIsPlaceholder: () => boolean
   getIsAggregated: () => boolean
-  renderAggregatedCell: () => string | null | ReturnType<UseRenderer<TGenerics>>
+  renderAggregatedCell: () => string | null | TGenerics['Rendered']
 }
 
 export type ColumnDefaultOptions = {
@@ -93,6 +81,7 @@ export type ColumnDefaultOptions = {
 }
 
 export type GroupingOptions<TGenerics extends TableGenerics> = {
+  manualGrouping?: boolean
   aggregationFns?: TGenerics['AggregationFns']
   onGroupingChange?: OnChangeFn<GroupingState>
   autoResetGrouping?: boolean
@@ -107,11 +96,6 @@ export type GroupingOptions<TGenerics extends TableGenerics> = {
 
 export type GroupingColumnMode = false | 'reorder' | 'remove'
 
-export type ToggleGroupingProps = {
-  title?: string
-  onClick?: (event: unknown) => void
-}
-
 export type GroupingInstance<TGenerics extends TableGenerics> = {
   queueResetGrouping: () => void
   getColumnAutoAggregationFn: (
@@ -126,10 +110,7 @@ export type GroupingInstance<TGenerics extends TableGenerics> = {
   getColumnCanGroup: (columnId: string) => boolean
   getColumnIsGrouped: (columnId: string) => boolean
   getColumnGroupedIndex: (columnId: string) => number
-  getToggleGroupingProps: <TGetter extends Getter<ToggleGroupingProps>>(
-    columnId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleGroupingProps, TGetter>
+  getToggleGroupingHandler: (columnId: string) => undefined | (() => void)
   getRowIsGrouped: (rowId: string) => boolean
   getPreGroupedRowModel: () => RowModel<TGenerics>
   getGroupedRowModel: () => RowModel<TGenerics>
@@ -173,8 +154,8 @@ export const Grouping = {
       getGroupedIndex: () => instance.getColumnGroupedIndex(column.id),
       getIsGrouped: () => instance.getColumnIsGrouped(column.id),
       toggleGrouping: () => instance.toggleColumnGrouping(column.id),
-      getToggleGroupingProps: userProps =>
-        instance.getToggleGroupingProps(column.id, userProps),
+      getToggleGroupingHandler: () =>
+        instance.getToggleGroupingHandler(column.id)!,
     }
   },
 
@@ -277,21 +258,14 @@ export const Grouping = {
         instance.setGrouping(instance.initialState?.grouping ?? [])
       },
 
-      getToggleGroupingProps: (columnId, userProps) => {
+      getToggleGroupingHandler: columnId => {
         const column = instance.getColumn(columnId)
-
         const canGroup = column.getCanGroup()
 
-        const initialProps: ToggleGroupingProps = {
-          title: canGroup ? 'Toggle Grouping' : undefined,
-          onClick: canGroup
-            ? (e: unknown) => {
-                column.toggleGrouping?.()
-              }
-            : undefined,
+        return () => {
+          if (!canGroup) return
+          column.toggleGrouping?.()
         }
-
-        return propGetter(initialProps, userProps)
       },
 
       getRowIsGrouped: rowId => !!instance.getRow(rowId)?.groupingColumnId,
@@ -306,7 +280,7 @@ export const Grouping = {
             instance.options.getGroupedRowModel(instance)
         }
 
-        if (!instance._getGroupedRowModel) {
+        if (instance.options.manualGrouping || !instance._getGroupedRowModel) {
           return instance.getPreGroupedRowModel()
         }
 

package/src/features/Headers.ts

@@ -1,20 +1,12 @@
 import {
-  Cell,
   Column,
   CoreHeader,
-  FooterGroupProps,
-  FooterProps,
-  Getter,
   Header,
   HeaderGroup,
-  HeaderGroupProps,
-  HeaderProps,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
-  Row,
 } from '../types'
-import { propGetter, memo } from '../utils'
+import { memo } from '../utils'
 
 export type HeadersInstance<TGenerics extends TableGenerics> = {
   createHeader: (
@@ -48,23 +40,6 @@ export type HeadersInstance<TGenerics extends TableGenerics> = {
   getRightLeafHeaders: () => Header<TGenerics>[]
 
   getHeader: (id: string) => Header<TGenerics>
-
-  getHeaderGroupProps: <TGetter extends Getter<HeaderGroupProps>>(
-    id: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<HeaderGroupProps, TGetter>
-  getFooterGroupProps: <TGetter extends Getter<FooterGroupProps>>(
-    id: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<FooterGroupProps, TGetter>
-  getHeaderProps: <TGetter extends Getter<HeaderProps>>(
-    headerId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<HeaderProps, TGetter>
-  getFooterProps: <TGetter extends Getter<FooterProps>>(
-    headerId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<FooterProps, TGetter>
 }
 
 //
@@ -135,10 +110,6 @@ export const Headers = {
 
             return leafHeaders as Header<TGenerics>[]
           },
-          getHeaderProps: userProps =>
-            instance.getHeaderProps(header.id, userProps)!,
-          getFooterProps: userProps =>
-            instance.getFooterProps(header.id, userProps)!,
           renderHeader: () =>
             column.header
               ? instance.render(column.header, {
@@ -447,67 +418,6 @@ export const Headers = {
 
         return header
       },
-
-      getHeaderGroupProps: (id, userProps) => {
-        const headerGroup = instance.getHeaderGroups().find(d => d.id === id)
-
-        if (!headerGroup) {
-          return
-        }
-
-        return propGetter(
-          {
-            key: headerGroup.id,
-            role: 'row',
-          },
-          userProps
-        )
-      },
-
-      getFooterGroupProps: (id, userProps) => {
-        const headerGroup = instance.getFooterGroups().find(d => d.id === id)
-
-        if (!headerGroup) {
-          return
-        }
-
-        const initialProps = {
-          key: headerGroup.id,
-          role: 'row',
-        }
-
-        return propGetter(initialProps, userProps)
-      },
-
-      getHeaderProps: (id, userProps) => {
-        const header = instance.getHeader(id)
-
-        if (!header) {
-          throw new Error()
-        }
-
-        const initialProps: HeaderProps = {
-          key: header.id,
-          role: 'columnheader',
-          colSpan: header.colSpan,
-          rowSpan: header.rowSpan,
-        }
-
-        return propGetter(initialProps, userProps)
-      },
-
-      getFooterProps: (id, userProps) => {
-        const header = instance.getHeader(id)
-
-        const initialProps: FooterProps = {
-          key: header.id,
-          role: 'columnfooter',
-          colSpan: header.colSpan,
-          rowSpan: header.rowSpan,
-        }
-
-        return propGetter(initialProps, userProps)
-      },
     }
   },
 }
@@ -551,10 +461,6 @@ export function buildHeaderGroups<TGenerics extends TableGenerics>(
       depth,
       id: [headerFamily, `${depth}`].filter(Boolean).join('_'),
       headers: [],
-      getHeaderGroupProps: getterValue =>
-        instance.getHeaderGroupProps(`${depth}`, getterValue)!,
-      getFooterGroupProps: getterValue =>
-        instance.getFooterGroupProps(`${depth}`, getterValue)!,
     }
 
     // The parent columns we're going to scan next

package/src/features/Pagination.ts

@@ -4,6 +4,7 @@ import {
   TableInstance,
   RowModel,
   Updater,
+  TableFeature,
 } from '../types'
 import { functionalUpdate, makeStateUpdater, memo } from '../utils'
 
@@ -17,7 +18,12 @@ export type PaginationTableState = {
   pagination: PaginationState
 }
 
+export type PaginationInitialTableState = {
+  pagination?: Partial<PaginationState>
+}
+
 export type PaginationOptions<TGenerics extends TableGenerics> = {
+  manualPagination?: boolean
   onPaginationChange?: OnChangeFn<PaginationState>
   autoResetPageIndex?: boolean
   getPaginationRowModel?: (
@@ -52,13 +58,14 @@ export type PaginationInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const Pagination = {
-  getInitialState: (): PaginationTableState => {
+export const Pagination: TableFeature = {
+  getInitialState: (initialState): PaginationTableState => {
     return {
       pagination: {
         pageCount: -1,
         pageIndex: 0,
         pageSize: 10,
+        ...initialState?.pagination,
       },
     }
   },
@@ -218,7 +225,10 @@ export const Pagination = {
             instance.options.getPaginationRowModel(instance)
         }
 
-        if (!instance._getPaginationRowModel) {
+        if (
+          instance.options.manualPagination ||
+          !instance._getPaginationRowModel
+        ) {
           return instance.getPrePaginationRowModel()
         }
 

package/src/features/Pinning.ts

@@ -7,7 +7,7 @@ import {
   Row,
   Cell,
 } from '../types'
-import { functionalUpdate, makeStateUpdater, memo } from '../utils'
+import { makeStateUpdater, memo } from '../utils'
 
 export type ColumnPinningPosition = false | 'left' | 'right'
 

package/src/features/RowSelection.ts

@@ -1,14 +1,12 @@
 import {
-  Getter,
   OnChangeFn,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
   Row,
   RowModel,
   Updater,
 } from '../types'
-import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
+import { makeStateUpdater, memo } from '../utils'
 
 export type RowSelectionState = Record<string, boolean>
 
@@ -41,40 +39,22 @@ export type RowSelectionOptions<TGenerics extends TableGenerics> = {
   // ) => RowModel<TGenerics>
 }
 
-type ToggleRowSelectedProps = {
-  onChange?: (e: unknown) => void
-  checked?: boolean
-  title?: string
-  indeterminate?: boolean
-}
-
 export type RowSelectionRow = {
   getIsSelected: () => boolean
   getIsSomeSelected: () => boolean
   getCanSelect: () => boolean
   getCanMultiSelect: () => boolean
   toggleSelected: (value?: boolean) => void
-  getToggleSelectedProps: <TGetter extends Getter<ToggleRowSelectedProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleRowSelectedProps, TGetter>
+  getToggleSelectedHandler: () => (event: unknown) => void
 }
 
 export type RowSelectionInstance<TGenerics extends TableGenerics> = {
   queueResetRowSelection: () => void
-  getToggleRowSelectedProps: <TGetter extends Getter<ToggleRowSelectedProps>>(
-    rowId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleRowSelectedProps, TGetter>
-  getToggleAllRowsSelectedProps: <
-    TGetter extends Getter<ToggleRowSelectedProps>
-  >(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleRowSelectedProps, TGetter>
-  getToggleAllPageRowsSelectedProps: <
-    TGetter extends Getter<ToggleRowSelectedProps>
-  >(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleRowSelectedProps, TGetter>
+  getToggleRowSelectedHandler: (
+    rowId: string
+  ) => undefined | ((e: unknown) => void)
+  getToggleAllRowsSelectedHandler: () => (event: unknown) => void
+  getToggleAllPageRowsSelectedHandler: () => (event: unknown) => void
   setRowSelection: (updater: Updater<RowSelectionState>) => void
   resetRowSelection: () => void
   toggleRowSelected: (rowId: string, value?: boolean) => void
@@ -460,77 +440,35 @@ export const RowSelection = {
           : !!paginationFlatRows?.length
       },
 
-      getToggleRowSelectedProps: (rowId, userProps) => {
+      getToggleRowSelectedHandler: rowId => {
         const row = instance.getRow(rowId)
 
         const isSelected = row.getIsSelected()
         const isSomeSelected = row.getIsSomeSelected()
         const canSelect = row.getCanSelect()
 
-        const initialProps: ToggleRowSelectedProps = {
-          onChange: canSelect
-            ? (e: unknown) => {
-                row.toggleSelected(
-                  ((e as MouseEvent).target as HTMLInputElement).checked
-                )
-              }
-            : undefined,
-          checked: isSelected,
-          title: 'Toggle Row Selected',
-          indeterminate: isSomeSelected,
-          // onChange: forInput
-          //   ? (e: Event) => e.stopPropagation()
-          //   : (e: Event) => {
-          //       if (instance.options.isAdditiveSelectEvent(e)) {
-          //         row.toggleSelected()
-          //       } else if (instance.options.isInclusiveSelectEvent(e)) {
-          //         instance.addRowSelectionRange(row.id)
-          //       } else {
-          //         instance.setRowSelection({})
-          //         row.toggleSelected()
-          //       }
-
-          //       if (props.onClick) props.onClick(e)
-          //     },
+        return (e: unknown) => {
+          if (!canSelect) return
+          row.toggleSelected(
+            ((e as MouseEvent).target as HTMLInputElement)?.checked
+          )
         }
-
-        return propGetter(initialProps, userProps)
       },
 
-      getToggleAllRowsSelectedProps: userProps => {
-        const isSomeRowsSelected = instance.getIsSomeRowsSelected()
-        const isAllRowsSelected = instance.getIsAllRowsSelected()
-
-        const initialProps: ToggleRowSelectedProps = {
-          onChange: (e: unknown) => {
-            instance.toggleAllRowsSelected(
-              ((e as MouseEvent).target as HTMLInputElement).checked
-            )
-          },
-          checked: isAllRowsSelected,
-          title: 'Toggle All Rows Selected',
-          indeterminate: isSomeRowsSelected,
+      getToggleAllRowsSelectedHandler: () => {
+        return (e: unknown) => {
+          instance.toggleAllRowsSelected(
+            ((e as MouseEvent).target as HTMLInputElement).checked
+          )
         }
-
-        return propGetter(initialProps, userProps)
       },
 
-      getToggleAllPageRowsSelectedProps: userProps => {
-        const isSomePageRowsSelected = instance.getIsSomePageRowsSelected()
-        const isAllPageRowsSelected = instance.getIsAllPageRowsSelected()
-
-        const initialProps: ToggleRowSelectedProps = {
-          onChange: (e: unknown) => {
-            instance.toggleAllPageRowsSelected(
-              ((e as MouseEvent).target as HTMLInputElement).checked
-            )
-          },
-          checked: isAllPageRowsSelected,
-          title: 'Toggle All Current Page Rows Selected',
-          indeterminate: isSomePageRowsSelected,
+      getToggleAllPageRowsSelectedHandler: () => {
+        return (e: unknown) => {
+          instance.toggleAllPageRowsSelected(
+            ((e as MouseEvent).target as HTMLInputElement).checked
+          )
         }
-
-        return propGetter(initialProps, userProps)
       },
     }
   },
@@ -543,8 +481,8 @@ export const RowSelection = {
       getIsSelected: () => instance.getRowIsSelected(row.id),
       getIsSomeSelected: () => instance.getRowIsSomeSelected(row.id),
       toggleSelected: value => instance.toggleRowSelected(row.id, value),
-      getToggleSelectedProps: userProps =>
-        instance.getToggleRowSelectedProps(row.id, userProps),
+      getToggleSelectedHandler: () =>
+        instance.getToggleRowSelectedHandler(row.id)!,
       getCanMultiSelect: () => instance.getRowCanMultiSelect(row.id),
       getCanSelect: () => instance.getRowCanSelect(row.id),
     }

package/src/features/Rows.ts

@@ -1,19 +1,11 @@
 import {
-  Cell,
   TableGenerics,
   TableInstance,
   Row,
-  Column,
-  CoreCell,
-  Getter,
-  CellProps,
-  PropGetterValue,
-  RowProps,
   RowModel,
   RowValues,
-  PropGetter,
 } from '../types'
-import { flattenBy, memo, propGetter } from '../utils'
+import { flattenBy } from '../utils'
 
 export type CoreRow<TGenerics extends TableGenerics> = {
   id: string
@@ -23,7 +15,6 @@ export type CoreRow<TGenerics extends TableGenerics> = {
   values: RowValues
   subRows: Row<TGenerics>[]
   getLeafRows: () => Row<TGenerics>[]
-  getRowProps: PropGetter<RowProps>
   originalSubRows?: TGenerics['Row'][]
 }
 
@@ -34,7 +25,7 @@ export type RowsOptions<TGenerics extends TableGenerics> = {
   getSubRows?: (
     originalRow: TGenerics['Row'],
     index: number
-  ) => TGenerics['Row'][]
+  ) => undefined | TGenerics['Row'][]
   getRowId?: (
     originalRow: TGenerics['Row'],
     index: number,
@@ -59,10 +50,6 @@ export type RowsInstance<TGenerics extends TableGenerics> = {
   _getCoreRowModel?: () => RowModel<TGenerics>
   getRowModel: () => RowModel<TGenerics>
   getRow: (id: string) => Row<TGenerics>
-  getRowProps: <TGetter extends Getter<RowProps>>(
-    rowId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<RowProps, TGetter>
 }
 
 //
@@ -95,7 +82,6 @@ export const Rows = {
           values,
           subRows: [],
           getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
-          getRowProps: userProps => instance.getRowProps(row.id, userProps)!,
         }
 
         for (let i = 0; i < instance._features.length; i++) {
@@ -132,20 +118,6 @@ export const Rows = {
 
         return row
       },
-      getRowProps: (rowId, userProps) => {
-        const row = instance.getRow(rowId)
-        if (!row) {
-          return
-        }
-
-        return propGetter(
-          {
-            key: row.id,
-            role: 'row',
-          },
-          userProps
-        )
-      },
     }
   },
 }

package/src/features/Sorting.ts

@@ -7,24 +7,14 @@ import {
 
 import {
   Column,
-  Getter,
-  Header,
   OnChangeFn,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
   Row,
   Updater,
 } from '../types'
 
-import {
-  functionalUpdate,
-  isFunction,
-  makeStateUpdater,
-  memo,
-  Overwrite,
-  propGetter,
-} from '../utils'
+import { isFunction, makeStateUpdater, Overwrite } from '../utils'
 
 export type SortDirection = 'asc' | 'desc'
 
@@ -72,12 +62,11 @@ export type SortingColumn<TGenerics extends TableGenerics> = {
   getIsSorted: () => false | SortDirection
   resetSorting: () => void
   toggleSorting: (desc?: boolean, isMulti?: boolean) => void
-  getToggleSortingProps: <TGetter extends Getter<ToggleSortingProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleSortingProps, TGetter>
+  getToggleSortingHandler: () => undefined | ((event: unknown) => void)
 }
 
 export type SortingOptions<TGenerics extends TableGenerics> = {
+  manualSorting?: boolean
   sortingFns?: TGenerics['SortingFns']
   onSortingChange?: OnChangeFn<SortingState>
   autoResetSorting?: boolean
@@ -93,11 +82,6 @@ export type SortingOptions<TGenerics extends TableGenerics> = {
   isMultiSortEvent?: (e: unknown) => boolean
 }
 
-export type ToggleSortingProps = {
-  title?: string
-  onClick?: (event: unknown) => void
-}
-
 export type SortingInstance<TGenerics extends TableGenerics> = {
   queueResetSorting: () => void
   getColumnAutoSortingFn: (columnId: string) => SortingFn<TGenerics> | undefined
@@ -116,10 +100,9 @@ export type SortingInstance<TGenerics extends TableGenerics> = {
   getColumnCanMultiSort: (columnId: string) => boolean
   getColumnIsSorted: (columnId: string) => false | 'asc' | 'desc'
   getColumnSortIndex: (columnId: string) => number
-  getToggleSortingProps: <TGetter extends Getter<ToggleSortingProps>>(
-    columnId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleSortingProps, TGetter>
+  getToggleSortingHandler: (
+    columnId: string
+  ) => undefined | ((event: unknown) => void)
   getPreSortedRowModel: () => RowModel<TGenerics>
   getSortedRowModel: () => RowModel<TGenerics>
   _getSortedRowModel?: () => RowModel<TGenerics>
@@ -167,8 +150,8 @@ export const Sorting = {
       resetSorting: () => instance.resetSorting(column.id),
       toggleSorting: (desc, isMulti) =>
         instance.toggleColumnSorting(column.id, desc, isMulti),
-      getToggleSortingProps: userProps =>
-        instance.getToggleSortingProps(column.id, userProps),
+      getToggleSortingHandler: () =>
+        instance.getToggleSortingHandler(column.id)!,
     }
   },
 
@@ -415,7 +398,7 @@ export const Sorting = {
         }
       },
 
-      getToggleSortingProps: (columnId, userProps) => {
+      getToggleSortingHandler: columnId => {
         const column = instance.getColumn(columnId)
 
         if (!column) {
@@ -424,22 +407,16 @@ export const Sorting = {
 
         const canSort = column.getCanSort()
 
-        const initialProps: ToggleSortingProps = {
-          title: canSort ? 'Toggle Sorting' : undefined,
-          onClick: canSort
-            ? (e: unknown) => {
-                ;(e as any).persist?.()
-                column.toggleSorting?.(
-                  undefined,
-                  column.getCanMultiSort()
-                    ? instance.options.isMultiSortEvent?.(e)
-                    : false
-                )
-              }
-            : undefined,
+        return (e: unknown) => {
+          if (!canSort) return
+          ;(e as any).persist?.()
+          column.toggleSorting?.(
+            undefined,
+            column.getCanMultiSort()
+              ? instance.options.isMultiSortEvent?.(e)
+              : false
+          )
         }
-
-        return propGetter(initialProps, userProps)
       },
 
       getPreSortedRowModel: () => instance.getGlobalFilteredRowModel(),
@@ -452,7 +429,7 @@ export const Sorting = {
             instance.options.getSortedRowModel(instance)
         }
 
-        if (!instance._getSortedRowModel) {
+        if (instance.options.manualSorting || !instance._getSortedRowModel) {
           return instance.getPreSortedRowModel()
         }