@tanstack/table-core 8.0.0-beta.3 → 8.0.0-beta.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.0.0-beta.3",
+  "version": "8.0.0-beta.6",
   "description": "Headless UI for building powerful tables & datagrids for TS/JS.",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/table#readme",

package/src/core/cell.ts

@@ -14,6 +14,9 @@ export function createCell<TGenerics extends TableGenerics>(
   column: Column<TGenerics>,
   columnId: string
 ) {
+  const getRenderValue = () =>
+    cell.getValue() ?? instance.options.renderFallbackValue
+
   const cell: CoreCell<TGenerics> = {
     id: `${row.id}_${column.id}`,
     row,
@@ -26,7 +29,7 @@ export function createCell<TGenerics extends TableGenerics>(
             column,
             row,
             cell: cell as Cell<TGenerics>,
-            getValue: cell.getValue,
+            getValue: getRenderValue,
           })
         : null
     },

package/src/core/instance.ts

@@ -85,6 +85,7 @@ export type CoreOptions<TGenerics extends TableGenerics> = {
   ) => string
   columns: ColumnDef<TGenerics>[]
   defaultColumn?: Partial<ColumnDef<TGenerics>>
+  renderFallbackValue: any
 }
 
 export type CoreInstance<TGenerics extends TableGenerics> = {

package/src/features/Expanding.ts

@@ -63,7 +63,6 @@ export const Expanding: TableFeature = {
   ): ExpandedOptions<TGenerics> => {
     return {
       onExpandedChange: makeStateUpdater('expanded', instance),
-      autoResetExpanded: true,
       paginateExpandedRows: true,
     }
   },
@@ -83,13 +82,10 @@ export const Expanding: TableFeature = {
           return
         }
 
-        if (instance.options.autoResetAll === false) {
-          return
-        }
-
         if (
-          instance.options.autoResetAll === true ||
-          instance.options.autoResetExpanded
+          instance.options.autoResetAll ??
+          instance.options.autoResetExpanded ??
+          !instance.options.manualExpanding
         ) {
           if (queued) return
           queued = true
@@ -160,7 +156,7 @@ export const Expanding: TableFeature = {
 
         return maxDepth
       },
-      getPreExpandedRowModel: () => instance.getGroupedRowModel(),
+      getPreExpandedRowModel: () => instance.getSortedRowModel(),
       getExpandedRowModel: () => {
         if (
           !instance._getExpandedRowModel &&

package/src/features/Grouping.ts

@@ -214,7 +214,7 @@ export const Grouping: TableFeature = {
         )
       },
 
-      getPreGroupedRowModel: () => instance.getSortedRowModel(),
+      getPreGroupedRowModel: () => instance.getFilteredRowModel(),
       getGroupedRowModel: () => {
         if (
           !instance._getGroupedRowModel &&
@@ -248,6 +248,9 @@ export const Grouping: TableFeature = {
     row: Row<TGenerics>,
     instance: TableInstance<TGenerics>
   ): GroupingCell<TGenerics> => {
+    const getRenderValue = () =>
+      cell.getValue() ?? instance.options.renderFallbackValue
+
     return {
       getIsGrouped: () =>
         column.getIsGrouped() && column.id === row.groupingColumnId,
@@ -257,8 +260,16 @@ export const Grouping: TableFeature = {
         !cell.getIsPlaceholder() &&
         row.subRows?.length > 1,
       renderAggregatedCell: () => {
+        if (process.env.NODE_ENV === 'development') {
+          if (!column.columnDef.aggregatedCell) {
+            console.warn(
+              'A columnDef.aggregatedCell template is recommended for displaying aggregated values.'
+            )
+          }
+        }
+
         const template =
-          column.columnDef.aggregatedCell ?? column.columnDef.cell
+          column.columnDef.aggregatedCell || column.columnDef.cell
 
         return template
           ? instance._render(template, {
@@ -266,7 +277,7 @@ export const Grouping: TableFeature = {
               column,
               row,
               cell,
-              getValue: cell.getValue,
+              getValue: getRenderValue,
             })
           : null
       },

package/src/features/RowSelection.ts

@@ -58,8 +58,8 @@ export type RowSelectionInstance<TGenerics extends TableGenerics> = {
   getIsAllPageRowsSelected: () => boolean
   getIsSomeRowsSelected: () => boolean
   getIsSomePageRowsSelected: () => boolean
-  toggleAllRowsSelected: (value: boolean) => void
-  toggleAllPageRowsSelected: (value: boolean) => void
+  toggleAllRowsSelected: (value?: boolean) => void
+  toggleAllPageRowsSelected: (value?: boolean) => void
   getPreSelectedRowModel: () => RowModel<TGenerics>
   getSelectedRowModel: () => RowModel<TGenerics>
   getFilteredSelectedRowModel: () => RowModel<TGenerics>
@@ -128,7 +128,7 @@ export const RowSelection: TableFeature = {
       },
       toggleAllPageRowsSelected: value =>
         instance.setRowSelection(old => {
-          const selectAll =
+          const resolvedValue =
             typeof value !== 'undefined'
               ? value
               : !instance.getIsAllPageRowsSelected()
@@ -136,7 +136,7 @@ export const RowSelection: TableFeature = {
           const rowSelection: RowSelectionState = { ...old }
 
           instance.getRowModel().rows.forEach(row => {
-            mutateRowIsSelected(rowSelection, row.id, value, instance)
+            mutateRowIsSelected(rowSelection, row.id, resolvedValue, instance)
           })
 
           return rowSelection
@@ -245,7 +245,7 @@ export const RowSelection: TableFeature = {
       ),
 
       getGroupedSelectedRowModel: memo(
-        () => [instance.getState().rowSelection, instance.getGroupedRowModel()],
+        () => [instance.getState().rowSelection, instance.getSortedRowModel()],
         (rowSelection, rowModel) => {
           if (!Object.keys(rowSelection).length) {
             return {
@@ -325,7 +325,9 @@ export const RowSelection: TableFeature = {
         const paginationFlatRows = instance.getPaginationRowModel().flatRows
         return instance.getIsAllPageRowsSelected()
           ? false
-          : !!paginationFlatRows?.length
+          : paginationFlatRows.some(
+              d => d.getIsSelected() || d.getIsSomeSelected()
+            )
       },
 
       getToggleAllRowsSelectedHandler: () => {

package/src/features/Sorting.ts

@@ -58,6 +58,7 @@ export type SortingColumn<TGenerics extends TableGenerics> = {
   getAutoSortingFn: () => SortingFn<TGenerics>
   getAutoSortDir: () => SortDirection
   getSortingFn: () => SortingFn<TGenerics>
+  getNextSortingOrder: () => SortDirection | false
   getCanSort: () => boolean
   getCanMultiSort: () => boolean
   getSortIndex: () => number
@@ -189,6 +190,9 @@ export const Sorting: TableFeature = {
         //   return
         // }
 
+        // this needs to be outside of instance.setSorting to be in sync with rerender
+        const nextSortingOrder = column.getNextSortingOrder()
+
         instance.setSorting(old => {
           // Find any existing sorting for this column
           const existingSorting = old?.find(d => d.id === column.id)
@@ -198,7 +202,7 @@ export const Sorting: TableFeature = {
           let newSorting: SortingState = []
 
           // What should we do with this sort action?
-          let sortAction
+          let sortAction: 'add' | 'remove' | 'toggle' | 'replace'
 
           if (column.getCanMultiSort() && multi) {
             if (existingSorting) {
@@ -217,20 +221,13 @@ export const Sorting: TableFeature = {
             }
           }
 
-          const sortDescFirst =
-            column.columnDef.sortDescFirst ??
-            instance.options.sortDescFirst ??
-            column.getAutoSortDir() === 'desc'
-
           // Handle toggle states that will remove the sorting
           if (
             sortAction === 'toggle' && // Must be toggling
             (instance.options.enableSortingRemoval ?? true) && // If enableSortRemove, enable in general
             !hasDescDefined && // Must not be setting desc
             (multi ? instance.options.enableMultiRemove ?? true : true) && // If multi, don't allow if enableMultiRemove
-            (existingSorting?.desc // Finally, detect if it should indeed be removed
-              ? !sortDescFirst
-              : sortDescFirst)
+            !nextSortingOrder // Finally, detect if it should indeed be removed
           ) {
             sortAction = 'remove'
           }
@@ -239,7 +236,7 @@ export const Sorting: TableFeature = {
             newSorting = [
               {
                 id: column.id,
-                desc: hasDescDefined ? desc! : !!sortDescFirst,
+                desc: hasDescDefined ? desc! : nextSortingOrder! === 'desc',
               },
             ]
           } else if (sortAction === 'add' && old?.length) {
@@ -247,7 +244,7 @@ export const Sorting: TableFeature = {
               ...old,
               {
                 id: column.id,
-                desc: hasDescDefined ? desc! : !!sortDescFirst,
+                desc: hasDescDefined ? desc! : nextSortingOrder! === 'desc',
               },
             ]
             // Take latest n columns
@@ -263,7 +260,7 @@ export const Sorting: TableFeature = {
               if (d.id === column.id) {
                 return {
                   ...d,
-                  desc: hasDescDefined ? desc! : !existingSorting?.desc,
+                  desc: hasDescDefined ? desc! : nextSortingOrder! === 'desc',
                 }
               }
               return d
@@ -276,6 +273,24 @@ export const Sorting: TableFeature = {
         })
       },
 
+      getNextSortingOrder: () => {
+        const sortDescFirst =
+          column.columnDef.sortDescFirst ??
+          instance.options.sortDescFirst ??
+          column.getAutoSortDir() === 'desc'
+        const firstSortDirection = sortDescFirst ? 'desc' : 'asc'
+
+        const isSorted = column.getIsSorted()
+        if (!isSorted) {
+          return firstSortDirection
+        }
+        if (isSorted === firstSortDirection) {
+          return isSorted === 'desc' ? 'asc' : 'desc'
+        } else {
+          return false
+        }
+      },
+
       getCanSort: () => {
         return (
           (column.columnDef.enableSorting ?? true) &&
@@ -330,8 +345,6 @@ export const Sorting: TableFeature = {
   createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): SortingInstance<TGenerics> => {
-    let registered = false
-
     return {
       setSorting: updater => instance.options.onSortingChange?.(updater),
       resetSorting: defaultState => {
@@ -339,7 +352,7 @@ export const Sorting: TableFeature = {
           defaultState ? [] : instance.initialState?.sorting ?? []
         )
       },
-      getPreSortedRowModel: () => instance.getFilteredRowModel(),
+      getPreSortedRowModel: () => instance.getGroupedRowModel(),
       getSortedRowModel: () => {
         if (
           !instance._getSortedRowModel &&

package/src/types.ts

@@ -123,7 +123,7 @@ export type TableOptionsResolved<TGenerics extends TableGenerics> =
 
 export type TableOptions<TGenerics extends TableGenerics> = Omit<
   PartialKeys<TableOptionsResolved<TGenerics>, 'state' | 'onStateChange'>,
-  'render'
+  'render' | 'renderFallbackValue'
 >
 
 export type TableState = CoreTableState &

package/src/utils/getPaginationRowModel.ts

@@ -1,4 +1,4 @@
-import { TableInstance, RowModel, TableGenerics } from '../types'
+import { TableInstance, RowModel, TableGenerics, Row } from '../types'
 import { memo } from '../utils'
 import { expandRows } from './getExpandedRowModel'
 
@@ -23,8 +23,10 @@ export function getPaginationRowModel<TGenerics extends TableGenerics>(opts?: {
 
         rows = rows.slice(pageStart, pageEnd)
 
+        let paginatedRowModel: RowModel<TGenerics>
+
         if (!instance.options.paginateExpandedRows) {
-          return expandRows(
+          paginatedRowModel = expandRows(
             {
               rows,
               flatRows,
@@ -32,13 +34,26 @@ export function getPaginationRowModel<TGenerics extends TableGenerics>(opts?: {
             },
             instance
           )
+        } else {
+          paginatedRowModel = {
+            rows,
+            flatRows,
+            rowsById,
+          }
         }
 
-        return {
-          rows,
-          flatRows,
-          rowsById,
+        paginatedRowModel.flatRows = []
+
+        const handleRow = (row: Row<TGenerics>) => {
+          paginatedRowModel.flatRows.push(row)
+          if (row.subRows.length) {
+            row.subRows.forEach(handleRow)
+          }
         }
+
+        paginatedRowModel.rows.forEach(handleRow)
+
+        return paginatedRowModel
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getPaginationRowModel',