@tanstack/table-core 8.0.0-alpha.58 → 8.0.0-alpha.61

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,13 +70,12 @@ 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 = {
   // Column
   onGroupingChange: OnChangeFn<GroupingState>
-  autoResetGrouping: boolean
   enableGrouping: boolean
 }
 
@@ -96,7 +83,6 @@ export type GroupingOptions<TGenerics extends TableGenerics> = {
   manualGrouping?: boolean
   aggregationFns?: TGenerics['AggregationFns']
   onGroupingChange?: OnChangeFn<GroupingState>
-  autoResetGrouping?: boolean
   enableGrouping?: boolean
   enableGroupingRemoval?: boolean
   getGroupedRowModel?: (
@@ -108,13 +94,7 @@ 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: (
     columnId: string
   ) => AggregationFn<TGenerics> | undefined
@@ -127,10 +107,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>
@@ -159,7 +136,6 @@ export const Grouping = {
   ): GroupingOptions<TGenerics> => {
     return {
       onGroupingChange: makeStateUpdater('grouping', instance),
-      autoResetGrouping: true,
       groupedColumnMode: 'reorder',
     }
   },
@@ -174,36 +150,15 @@ 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)!,
     }
   },
 
   createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): GroupingInstance<TGenerics> => {
-    let registered = false
-
     return {
-      queueResetGrouping: () => {
-        instance.queueResetExpanded()
-
-        if (!registered) {
-          registered = true
-          return
-        }
-
-        if (instance.options.autoResetAll === false) {
-          return
-        }
-
-        if (
-          instance.options.autoResetAll === true ||
-          instance.options.autoResetGrouping
-        ) {
-          instance.resetGrouping()
-        }
-      },
       getColumnAutoAggregationFn: columnId => {
         const firstRow = instance.getCoreRowModel().flatRows[0]
 
@@ -278,21 +233,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,

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,6 +18,10 @@ export type PaginationTableState = {
   pagination: PaginationState
 }
 
+export type PaginationInitialTableState = {
+  pagination?: Partial<PaginationState>
+}
+
 export type PaginationOptions<TGenerics extends TableGenerics> = {
   manualPagination?: boolean
   onPaginationChange?: OnChangeFn<PaginationState>
@@ -32,7 +37,7 @@ export type PaginationDefaultOptions = {
 }
 
 export type PaginationInstance<TGenerics extends TableGenerics> = {
-  queueResetPageIndex: () => void
+  _autoResetPageIndex: () => void
   setPagination: (updater: Updater<PaginationState>) => void
   resetPagination: () => void
   setPageIndex: (updater: Updater<number>) => void
@@ -53,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,
       },
     }
   },
@@ -77,8 +83,9 @@ export const Pagination = {
     instance: TableInstance<TGenerics>
   ): PaginationInstance<TGenerics> => {
     let registered = false
+
     return {
-      queueResetPageIndex: () => {
+      _autoResetPageIndex: () => {
         if (!registered) {
           registered = true
           return

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>
 
@@ -18,7 +16,6 @@ export type RowSelectionTableState = {
 
 export type RowSelectionOptions<TGenerics extends TableGenerics> = {
   onRowSelectionChange?: OnChangeFn<RowSelectionState>
-  autoResetRowSelection?: boolean
   enableRowSelection?: boolean | ((row: Row<TGenerics>) => boolean)
   enableMultiRowSelection?: boolean | ((row: Row<TGenerics>) => boolean)
   enableSubRowSelection?: boolean | ((row: Row<TGenerics>) => boolean)
@@ -41,40 +38,21 @@ 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
@@ -110,7 +88,6 @@ export const RowSelection = {
   ): RowSelectionOptions<TGenerics> => {
     return {
       onRowSelectionChange: makeStateUpdater('rowSelection', instance),
-      autoResetRowSelection: true,
       enableRowSelection: true,
       enableMultiRowSelection: true,
       enableSubRowSelection: true,
@@ -123,28 +100,7 @@ export const RowSelection = {
   createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): RowSelectionInstance<TGenerics> => {
-    let registered = false
-
-    // const pageRows = instance.getPageRows()
-
     return {
-      queueResetRowSelection: () => {
-        if (!registered) {
-          registered = true
-          return
-        }
-
-        if (instance.options.autoResetAll === false) {
-          return
-        }
-
-        if (
-          instance.options.autoResetAll === true ||
-          instance.options.autoResetRowSelection
-        ) {
-          instance.resetRowSelection()
-        }
-      },
       setRowSelection: updater =>
         instance.options.onRowSelectionChange?.(updater),
       resetRowSelection: () =>
@@ -283,9 +239,6 @@ export const RowSelection = {
         {
           key: 'getSelectedRowModel',
           debug: () => instance.options.debugAll ?? instance.options.debugTable,
-          onChange: () => {
-            instance.queue(() => instance.queueResetExpanded())
-          },
         }
       ),
 
@@ -308,7 +261,6 @@ export const RowSelection = {
         {
           key: 'getFilteredSelectedRowModel',
           debug: () => instance.options.debugAll ?? instance.options.debugTable,
-          onChange: () => instance.queue(() => instance.queueResetExpanded()),
         }
       ),
 
@@ -328,7 +280,6 @@ export const RowSelection = {
         {
           key: 'getGroupedSelectedRowModel',
           debug: () => instance.options.debugAll ?? instance.options.debugTable,
-          onChange: () => instance.queue(() => instance.queueResetExpanded()),
         }
       ),
 
@@ -460,77 +411,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 +452,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
-        )
-      },
     }
   },
 }