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

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>
@@ -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,
       },
     }
   },

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,9 +62,7 @@ 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> = {
@@ -94,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
@@ -117,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>
@@ -168,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)!,
     }
   },
 
@@ -416,7 +398,7 @@ export const Sorting = {
         }
       },
 
-      getToggleSortingProps: (columnId, userProps) => {
+      getToggleSortingHandler: columnId => {
         const column = instance.getColumn(columnId)
 
         if (!column) {
@@ -425,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(),

package/src/features/Visibility.ts

@@ -1,15 +1,13 @@
 import {
   Cell,
   Column,
-  Getter,
   OnChangeFn,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
   Updater,
   Row,
 } from '../types'
-import { makeStateUpdater, memo, propGetter } from '../utils'
+import { makeStateUpdater, memo } from '../utils'
 
 export type VisibilityOptions = {
   onColumnVisibilityChange?: OnChangeFn<VisibilityState>
@@ -39,16 +37,11 @@ export type VisibilityInstance<TGenerics extends TableGenerics> = {
   getColumnCanHide: (columnId: string) => boolean
   getIsAllColumnsVisible: () => boolean
   getIsSomeColumnsVisible: () => boolean
-  getToggleAllColumnsVisibilityProps: <
-    TGetter extends Getter<ToggleAllColumnsVisibilityProps>
-  >(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleAllColumnsVisibilityProps, TGetter>
+  getToggleAllColumnsVisibilityHandler: () =>
+    | undefined
+    | ((event: unknown) => void)
 }
 
-type ToggleVisibilityProps = {}
-type ToggleAllColumnsVisibilityProps = {}
-
 export type VisibilityColumnDef = {
   enableHiding?: boolean
   defaultCanHide?: boolean
@@ -64,9 +57,7 @@ export type VisibilityColumn = {
   getCanHide: () => boolean
   getIsVisible: () => boolean
   toggleVisibility: (value?: boolean) => void
-  getToggleVisibilityProps: <TGetter extends Getter<ToggleVisibilityProps>>(
-    userProps?: TGetter
-  ) => PropGetterValue<ToggleVisibilityProps, TGetter>
+  getToggleVisibilityHandler: () => (event: unknown) => void
 }
 
 //
@@ -101,19 +92,12 @@ export const Visibility = {
       getIsVisible: () => instance.getColumnIsVisible(column.id),
       toggleVisibility: value =>
         instance.toggleColumnVisibility(column.id, value),
-      getToggleVisibilityProps: userProps => {
-        const props: ToggleVisibilityProps = {
-          type: 'checkbox',
-          checked: column.getIsVisible?.(),
-          title: 'Toggle Column Visibility',
-          onChange: (e: unknown) => {
-            column.toggleVisibility?.(
-              ((e as MouseEvent).target as HTMLInputElement).checked
-            )
-          },
+      getToggleVisibilityHandler: () => {
+        return (e: unknown) => {
+          column.toggleVisibility?.(
+            ((e as MouseEvent).target as HTMLInputElement).checked
+          )
         }
-
-        return propGetter(props, userProps)
       },
     }
   },
@@ -265,24 +249,12 @@ export const Visibility = {
       getIsSomeColumnsVisible: () =>
         instance.getAllLeafColumns().some(column => column.getIsVisible?.()),
 
-      getToggleAllColumnsVisibilityProps: userProps => {
-        const props: ToggleAllColumnsVisibilityProps = {
-          onChange: (e: MouseEvent) => {
-            instance.toggleAllColumnsVisible(
-              (e.target as HTMLInputElement)?.checked
-            )
-          },
-          type: 'checkbox',
-          title: 'Toggle visibility for all columns',
-          checked: instance.getIsAllColumnsVisible(),
-          indeterminate:
-            !instance.getIsAllColumnsVisible() &&
-            instance.getIsSomeColumnsVisible()
-              ? 'indeterminate'
-              : undefined,
+      getToggleAllColumnsVisibilityHandler: () => {
+        return (e: unknown) => {
+          instance.toggleAllColumnsVisible(
+            ((e as MouseEvent).target as HTMLInputElement)?.checked
+          )
         }
-
-        return propGetter(props, userProps)
       },
     }
   },

package/src/filterFns.ts

@@ -7,6 +7,7 @@ export const filterFns = {
   equalsStringSensitive,
   arrIncludes,
   arrIncludesAll,
+  arrIncludesSome,
   equals,
   weakEquals,
   betweenNumberRange,
@@ -117,6 +118,25 @@ function arrIncludesAll<TGenerics extends TableGenerics>(
 
 arrIncludesAll.autoRemove = (val: any) => testFalsey(val) || !val?.length
 
+function arrIncludesSome<TGenerics extends TableGenerics>(
+  rows: Row<TGenerics>[],
+  columnIds: string[],
+  filterValue: unknown[]
+) {
+  return rows.filter(row => {
+    return columnIds.some(id => {
+      const rowValue = row.values[id]
+      return (
+        rowValue &&
+        rowValue.length &&
+        filterValue.some(val => rowValue.includes(val))
+      )
+    })
+  })
+}
+
+arrIncludesSome.autoRemove = (val: any) => testFalsey(val) || !val?.length
+
 function equals<TGenerics extends TableGenerics>(
   rows: Row<TGenerics>[],
   columnIds: string[],