@tanstack/table-core 8.0.0-alpha.86 → 8.0.0-alpha.89

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.86",
-  "description": "Hooks for building lightweight, fast and extendable datagrids for React",
+  "version": "8.0.0-alpha.89",
+  "description": "Headless UI for building powerful tables & datagrids for TS/JS.",
   "license": "MIT",
-  "homepage": "https://github.com/tanstack/react-table#readme",
+  "homepage": "https://github.com/tanstack/table#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tanstack/react-table.git"
+    "url": "git+https://github.com/tanstack/table.git"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/core/cell.ts

@@ -19,8 +19,8 @@ export function createCell<TGenerics extends TableGenerics>(
     row,
     column,
     getValue: () => row.getValue(columnId),
-    renderCell: () =>
-      column.columnDef.cell
+    renderCell: () => {
+      return column.columnDef.cell
         ? instance._render(column.columnDef.cell, {
             instance,
             column,
@@ -28,7 +28,8 @@ export function createCell<TGenerics extends TableGenerics>(
             cell: cell as Cell<TGenerics>,
             getValue: cell.getValue,
           })
-        : null,
+        : null
+    },
   }
 
   instance._features.forEach(feature => {

package/src/core/column.ts

@@ -98,7 +98,6 @@ export function createColumn<TGenerics extends TableGenerics>(
   }
 
   let column: CoreColumn<TGenerics> = {
-    ...columnDef,
     id: `${id}`,
     accessorFn,
     parent: parent as any,

package/src/features/Expanding.ts

@@ -131,8 +131,12 @@ export const Expanding: TableFeature = {
         const expanded = instance.getState().expanded
 
         // If expanded is true, save some cycles and return true
-        if (expanded === true) {
-          return true
+        if (typeof expanded === 'boolean') {
+          return expanded === true
+        }
+
+        if (!Object.keys(expanded).length) {
+          return false
         }
 
         // If any row is not expanded, return false

package/src/features/Sorting.ts

@@ -26,6 +26,10 @@ export type ColumnSort = {
 
 export type SortingState = ColumnSort[]
 
+export type SortingTableState = {
+  sorting: SortingState
+}
+
 export type SortingFn<TGenerics extends TableGenerics> = {
   (rowA: Row<TGenerics>, rowB: Row<TGenerics>, columnId: string): number
 }
@@ -35,10 +39,6 @@ export type CustomSortingFns<TGenerics extends TableGenerics> = Record<
   SortingFn<TGenerics>
 >
 
-export type SortingTableState = {
-  sorting: SortingState
-}
-
 export type SortingFnOption<TGenerics extends TableGenerics> =
   | 'auto'
   | BuiltInSortingFn
@@ -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
@@ -191,6 +192,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)
@@ -200,7 +204,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) {
@@ -219,20 +223,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'
           }
@@ -241,7 +238,7 @@ export const Sorting: TableFeature = {
             newSorting = [
               {
                 id: column.id,
-                desc: hasDescDefined ? desc! : !!sortDescFirst,
+                desc: hasDescDefined ? desc! : nextSortingOrder! === 'desc',
               },
             ]
           } else if (sortAction === 'add' && old?.length) {
@@ -249,7 +246,7 @@ export const Sorting: TableFeature = {
               ...old,
               {
                 id: column.id,
-                desc: hasDescDefined ? desc! : !!sortDescFirst,
+                desc: hasDescDefined ? desc! : nextSortingOrder! === 'desc',
               },
             ]
             // Take latest n columns
@@ -265,7 +262,7 @@ export const Sorting: TableFeature = {
               if (d.id === column.id) {
                 return {
                   ...d,
-                  desc: hasDescDefined ? desc! : !existingSorting?.desc,
+                  desc: hasDescDefined ? desc! : nextSortingOrder! === 'desc',
                 }
               }
               return d
@@ -278,6 +275,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) &&

package/src/features/Visibility.ts

@@ -112,15 +112,9 @@ export const Visibility: TableFeature = {
   ): VisibilityRow<TGenerics> => {
     return {
       _getAllVisibleCells: memo(
-        () => [
-          row
-            .getAllCells()
-            .filter(cell => cell.column.getIsVisible())
-            .map(d => d.id)
-            .join('_'),
-        ],
-        _ => {
-          return row.getAllCells().filter(cell => cell.column.getIsVisible())
+        () => [row.getAllCells(), instance.getState().columnVisibility],
+        cells => {
+          return cells.filter(cell => cell.column.getIsVisible())
         },
         {
           key:

package/src/index.ts

@@ -5,7 +5,6 @@ export * from './core/column'
 export * from './core/headers'
 export * from './core/row'
 export * from './features/ColumnSizing'
-export * from './features/ColumnSizing'
 export * from './features/Expanding'
 export * from './features/Filters'
 export * from './features/Grouping'
@@ -15,7 +14,6 @@ export * from './features/Pinning'
 export * from './features/RowSelection'
 export * from './features/Sorting'
 export * from './features/Visibility'
-export * from './features/Expanding'
 export * from './filterFns'
 export * from './sortingFns'
 export * from './aggregationFns'

package/src/sortingFns.ts

@@ -1,40 +1,69 @@
-import { TableGenerics, Row } from './types'
+import { SortingFn } from './features/Sorting'
 
 export const reSplitAlphaNumeric = /([0-9]+)/gm
 
-export const sortingFns = {
-  alphanumeric,
-  alphanumericCaseSensitive,
-  text,
-  textCaseSensitive,
-  datetime,
-  basic,
+const alphanumeric: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareAlphanumeric(
+    toString(rowA.getValue(columnId)).toLowerCase(),
+    toString(rowB.getValue(columnId)).toLowerCase()
+  )
 }
 
-export type BuiltInSortingFn = keyof typeof sortingFns
-
-function alphanumeric<TGenerics extends TableGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
+const alphanumericCaseSensitive: SortingFn<any> = (rowA, rowB, columnId) => {
   return compareAlphanumeric(
+    toString(rowA.getValue(columnId)),
+    toString(rowB.getValue(columnId))
+  )
+}
+
+// The text filter is more basic (less numeric support)
+// but is much faster
+const text: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareBasic(
     toString(rowA.getValue(columnId)).toLowerCase(),
     toString(rowB.getValue(columnId)).toLowerCase()
   )
 }
 
-function alphanumericCaseSensitive<TGenerics extends TableGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareAlphanumeric(
+// The text filter is more basic (less numeric support)
+// but is much faster
+const textCaseSensitive: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareBasic(
     toString(rowA.getValue(columnId)),
     toString(rowB.getValue(columnId))
   )
 }
 
+const datetime: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareBasic(
+    (rowA.getValue(columnId) as Date).getTime(),
+    (rowB.getValue(columnId) as Date).getTime()
+  )
+}
+
+const basic: SortingFn<any> = (rowA, rowB, columnId) => {
+  return compareBasic(rowA.getValue(columnId), rowB.getValue(columnId))
+}
+
+// Utils
+
+function compareBasic(a: any, b: any) {
+  return a === b ? 0 : a > b ? 1 : -1
+}
+
+function toString(a: any) {
+  if (typeof a === 'number') {
+    if (isNaN(a) || a === Infinity || a === -Infinity) {
+      return ''
+    }
+    return String(a)
+  }
+  if (typeof a === 'string') {
+    return a
+  }
+  return ''
+}
+
 // Mixed sorting is slow, but very inclusive of many edge cases.
 // It handles numbers, mixed alphanumeric combinations, and even
 // null, undefined, and Infinity
@@ -82,66 +111,15 @@ function compareAlphanumeric(aStr: string, bStr: string) {
   return a.length - b.length
 }
 
-// The text filter is more basic (less numeric support)
-// but is much faster
-function text<TGenerics extends TableGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareBasic(
-    toString(rowA.getValue(columnId)).toLowerCase(),
-    toString(rowB.getValue(columnId)).toLowerCase()
-  )
-}
-
-// The text filter is more basic (less numeric support)
-// but is much faster
-function textCaseSensitive<TGenerics extends TableGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareBasic(
-    toString(rowA.getValue(columnId)),
-    toString(rowB.getValue(columnId))
-  )
-}
-
-function datetime<TGenerics extends TableGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareBasic(
-    (rowA.getValue(columnId) as Date).getTime(),
-    (rowB.getValue(columnId) as Date).getTime()
-  )
-}
-
-function basic<TGenerics extends TableGenerics>(
-  rowA: Row<TGenerics>,
-  rowB: Row<TGenerics>,
-  columnId: string
-) {
-  return compareBasic(rowA.getValue(columnId), rowB.getValue(columnId))
-}
-
-// Utils
+// Exports
 
-function compareBasic(a: any, b: any) {
-  return a === b ? 0 : a > b ? 1 : -1
+export const sortingFns = {
+  alphanumeric,
+  alphanumericCaseSensitive,
+  text,
+  textCaseSensitive,
+  datetime,
+  basic,
 }
 
-function toString(a: any) {
-  if (typeof a === 'number') {
-    if (isNaN(a) || a === Infinity || a === -Infinity) {
-      return ''
-    }
-    return String(a)
-  }
-  if (typeof a === 'string') {
-    return a
-  }
-  return ''
-}
+export type BuiltInSortingFn = keyof typeof sortingFns

package/src/utils/getCoreRowModel.ts

@@ -21,20 +21,14 @@ export function getCoreRowModel<TGenerics extends TableGenerics>(): (
           rowsById: {},
         }
 
-        let rows
-        let row
-        let originalRow
-
         const accessRows = (
           originalRows: TGenerics['Row'][],
           depth = 0,
           parent?: Row<TGenerics>
         ): Row<TGenerics>[] => {
-          rows = []
+          const rows = [] as Row<TGenerics>[]
 
           for (let i = 0; i < originalRows.length; i++) {
-            originalRow = originalRows[i]
-
             // This could be an expensive check at scale, so we should move it somewhere else, but where?
             // if (!id) {
             //   if (process.env.NODE_ENV !== 'production') {
@@ -43,10 +37,10 @@ export function getCoreRowModel<TGenerics extends TableGenerics>(): (
             // }
 
             // Make the row
-            row = createRow(
+            const row = createRow(
               instance,
-              instance._getRowId(originalRow, i, parent),
-              originalRow,
+              instance._getRowId(originalRows[i], i, parent),
+              originalRows[i],
               i,
               depth
             )
@@ -60,7 +54,10 @@ export function getCoreRowModel<TGenerics extends TableGenerics>(): (
 
             // Get the original subrows
             if (instance.options.getSubRows) {
-              row.originalSubRows = instance.options.getSubRows(originalRow, i)
+              row.originalSubRows = instance.options.getSubRows(
+                originalRows[i],
+                i
+              )
 
               // Then recursively access them
               if (row.originalSubRows?.length) {