feat: update deprecated type change (#5725)

* chore: pulling

* feat: update deprecated type changes

* feat: update deprecated type changes

* fix _getInitialState bugs

---------

Co-authored-by: Kevin Van Cott <kevinvandy656@gmail.com>

Author: tobySolutions

examples/lit/column-sizing/src/main.ts

@@ -132,7 +132,7 @@ class LitTableExample extends LitElement {
 ${JSON.stringify(
           {
             columnSizing: table.getState().columnSizing,
-            columnSizingInfo: table.getState().columnSizingInfo,
+            columnResizing: table.getState().columnResizing,
           },
           null,
           2,

examples/react/column-resizing-performant/src/main.tsx

@@ -106,7 +106,7 @@ function App() {
       colSizes[`--col-${header.column.id}-size`] = header.column.getSize()
     }
     return colSizes
-  }, [table.getState().columnSizingInfo, table.getState().columnSizing])
+  }, [table.getState().columnResizing, table.getState().columnSizing])
 
   //demo purposes
   const [enableMemo, setEnableMemo] = React.useState(true)
@@ -191,7 +191,7 @@ function App() {
             ))}
           </div>
           {/* When resizing any column we will render this special memoized version of our table body */}
-          {table.getState().columnSizingInfo.isResizingColumn && enableMemo ? (
+          {table.getState().columnResizing.isResizingColumn && enableMemo ? (
             <MemoizedTableBody table={table} />
           ) : (
             <TableBody table={table} />

examples/react/column-sizing/src/main.tsx

@@ -201,7 +201,7 @@ function App() {
                                     'rtl'
                                       ? -1
                                       : 1) *
-                                    (table.getState().columnSizingInfo
+                                    (table.getState().columnResizing
                                       .deltaOffset ?? 0)
                                   }px)`
                                 : '',
@@ -290,7 +290,7 @@ function App() {
                                     'rtl'
                                       ? -1
                                       : 1) *
-                                    (table.getState().columnSizingInfo
+                                    (table.getState().columnResizing
                                       .deltaOffset ?? 0)
                                   }px)`
                                 : '',
@@ -394,7 +394,7 @@ function App() {
                                     'rtl'
                                       ? -1
                                       : 1) *
-                                    (table.getState().columnSizingInfo
+                                    (table.getState().columnResizing
                                       .deltaOffset ?? 0)
                                   }px)`
                                 : '',
@@ -453,7 +453,7 @@ function App() {
         {JSON.stringify(
           {
             columnSizing: table.getState().columnSizing,
-            columnSizingInfo: table.getState().columnSizingInfo,
+            columnResizing: table.getState().columnResizing,
           },
           null,
           2,

examples/react/row-pinning/src/main.tsx

@@ -1,8 +1,5 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom/client'
-
-import './index.css'
-
 import {
   ColumnFiltering,
   RowExpanding,
@@ -13,11 +10,11 @@ import {
   createFilteredRowModel,
   createPaginatedRowModel,
   flexRender,
+  tableFeatures,
   useTable,
 } from '@tanstack/react-table'
 import { makeData } from './makeData'
 import type { Person } from './makeData'
-
 import type {
   Column,
   ColumnDef,
@@ -26,6 +23,14 @@ import type {
   RowPinningState,
   Table,
 } from '@tanstack/react-table'
+import './index.css'
+
+const _features = tableFeatures({
+  RowPinning,
+  RowExpanding,
+  ColumnFiltering,
+  RowPagination,
+})
 
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
@@ -43,7 +48,7 @@ function App() {
   const [includeParentRows, setIncludeParentRows] = React.useState(false)
   const [copyPinnedRows, setCopyPinnedRows] = React.useState(false)
 
-  const columns = React.useMemo<Array<ColumnDef<any, Person>>>(
+  const columns = React.useMemo<Array<ColumnDef<typeof _features, Person>>>(
     () => [
       {
         id: 'pin',
@@ -150,7 +155,7 @@ function App() {
   const refreshData = () => setData(() => makeData(1000, 2, 2))
 
   const table = useTable({
-    _features: { RowPinning, RowExpanding, ColumnFiltering, RowPagination },
+    _features,
     _rowModels: {
       Core: createCoreRowModel(),
       Filtered: createFilteredRowModel(),
@@ -172,9 +177,9 @@ function App() {
   })
 
   // console.log(table.getBottomRows)
-  useEffect(() => {
-    console.log(table.getBottomRows())
-  }, [table.getBottomRows()])
+  // React.useEffect(() => {
+  //   console.log(table.getBottomRows())
+  // }, [table.getBottomRows()])
 
   return (
     <div className="app">
@@ -216,7 +221,7 @@ function App() {
             ).map((row) => {
               return (
                 <tr key={row.id}>
-                  {row.getVisibleCells().map((cell) => {
+                  {row.getAllCells().map((cell) => {
                     return (
                       <td key={cell.id}>
                         {flexRender(
@@ -363,8 +368,8 @@ function PinnedRow({
   row,
   table,
 }: {
-  row: Row<any, any>
-  table: Table<any, any>
+  row: Row<typeof _features, Person>
+  table: Table<typeof _features, Person>
 }) {
   return (
     <tr
@@ -383,7 +388,7 @@ function PinnedRow({
             : undefined,
       }}
     >
-      {row.getVisibleCells().map((cell) => {
+      {row.getAllCells().map((cell) => {
         return (
           <td key={cell.id}>
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -398,8 +403,8 @@ function Filter({
   column,
   table,
 }: {
-  column: Column<any, any>
-  table: Table<any>
+  column: Column<typeof _features, Person>
+  table: Table<typeof _features, Person>
 }) {
   const firstValue = table
     .getPreFilteredRowModel()

packages/table-core/src/core/table/Tables.types.ts

@@ -106,7 +106,7 @@ export interface Table_CoreProperties<
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#initialstate)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables)
    */
-  initialState: Partial<TableState<TFeatures>>
+  initialState: TableState<TFeatures>
   /**
    * A read-only reference to the table's current options.
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#options)

packages/table-core/src/features/column-filtering/ColumnFiltering.ts

@@ -12,6 +12,7 @@ import {
   table_resetColumnFilters,
   table_setColumnFilters,
 } from './ColumnFiltering.utils'
+import type { TableState } from '../../types/TableState'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
 import type { Table } from '../../types/Table'
@@ -35,7 +36,9 @@ import type {
  * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
  */
 export const ColumnFiltering: TableFeature = {
-  _getInitialState: (state): TableState_ColumnFiltering => {
+  _getInitialState: <TFeatures extends TableFeatures>(
+    state: TableState<TFeatures>,
+  ): TableState<TFeatures> & TableState_ColumnFiltering => {
     return {
       columnFilters: [],
       ...state,
@@ -72,8 +75,6 @@ export const ColumnFiltering: TableFeature = {
     table: Table<TFeatures, TData> &
       Partial<Table_ColumnFiltering<TFeatures, TData>>,
   ): void => {
-
-
     assignAPIs(column, table, [
       {
         fn: () => column_getAutoFilterFn(column, table),
@@ -110,8 +111,6 @@ export const ColumnFiltering: TableFeature = {
     table: Table<TFeatures, TData> &
       Partial<Table_ColumnFiltering<TFeatures, TData>>,
   ): void => {
-
-
     assignAPIs(table, table, [
       {
         fn: (updater: Updater<ColumnFiltersState>) =>

packages/table-core/src/features/column-filtering/ColumnFiltering.types.ts

@@ -191,7 +191,7 @@ interface ColumnFiltersOptionsBase<
   manualFiltering?: boolean
   /**
      * By default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting this option to `0` will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to `1` will cause filtering to only be applied to child leaf rows 1 level deep, and so on.
-  
+
      * This is useful for situations where you want a row's entire child hierarchy to be visible regardless of the applied filter.
       * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#maxleafrowfilterdepth)
       * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)

packages/table-core/src/features/column-grouping/ColumnGrouping.ts

@@ -17,6 +17,7 @@ import {
   table_resetGrouping,
   table_setGrouping,
 } from './ColumnGrouping.utils'
+import type { TableState } from '../../types/TableState'
 import type { CellData, RowData } from '../../types/type-utils'
 import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
 import type { Table } from '../../types/Table'
@@ -39,7 +40,9 @@ import type {
  * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-grouping)
  */
 export const ColumnGrouping: TableFeature = {
-  _getInitialState: (state): TableState_ColumnGrouping => {
+  _getInitialState: <TFeatures extends TableFeatures>(
+    state: TableState<TFeatures>,
+  ): TableState<TFeatures> & TableState_ColumnGrouping => {
     return {
       grouping: [],
       ...state,

packages/table-core/src/features/column-grouping/ColumnGrouping.types.ts

@@ -17,6 +17,13 @@ export interface TableState_ColumnGrouping {
   grouping: GroupingState
 }
 
+export interface TableState_ColumnGrouping_Unavailable {
+  /**
+   * @deprecated Import the `ColumnGrouping` feature to use the column grouping APIs.
+   */
+  grouping: GroupingState
+}
+
 export interface AggregationFns {}
 
 export type AggregationFn<

packages/table-core/src/features/column-ordering/ColumnOrdering.ts

@@ -7,6 +7,7 @@ import {
   table_resetColumnOrder,
   table_setColumnOrder,
 } from './ColumnOrdering.utils'
+import type { TableState } from '../../types/TableState'
 import type {
   ColumnOrderDefaultOptions,
   Column_ColumnOrdering,
@@ -24,7 +25,9 @@ import type { Column } from '../../types/Column'
  * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-ordering)
  */
 export const ColumnOrdering: TableFeature = {
-  _getInitialState: (state): TableState_ColumnOrdering => {
+  _getInitialState: <TFeatures extends TableFeatures>(
+    state: TableState<TFeatures>,
+  ): TableState<TFeatures> & TableState_ColumnOrdering => {
     return {
       columnOrder: [],
       ...state,
@@ -49,22 +52,7 @@ export const ColumnOrdering: TableFeature = {
     table: Table<TFeatures, TData> &
       Partial<Table_ColumnOrdering<TFeatures, TData>>,
   ): void => {
-    // column.getIndex = memo(
-    //   (position) => [
-    //     position,
-    //     _table_getState(table).columnOrder,
-    //     _table_getState(table).columnPinning,
-    //     _table_getState(table).grouping,
-    //   ],
-    //   (position) => column_getIndex(column, table, position),
-    //   getMemoOptions(table.options, 'debugColumns', 'getIndex'),
-    // )
 
-    // column.getIsFirstColumn = (position) =>
-    //   column_getIsFirstColumn(column, table, position)
-
-    // column.getIsLastColumn = (position) =>
-    //   column_getIsLastColumn(column, table, position)
 
     assignAPIs(column, table, [
       {
@@ -89,10 +77,7 @@ export const ColumnOrdering: TableFeature = {
     table: Table<TFeatures, TData> &
       Partial<Table_ColumnOrdering<TFeatures, TData>>,
   ): void => {
-    // table.setColumnOrder = (updater) => table_setColumnOrder(table, updater)
 
-    // table.resetColumnOrder = (defaultState) =>
-    //   table_resetColumnOrder(table, defaultState)
 
     assignAPIs(table, table, [
       {