fix _getInitialState bugs

TanStack · Aug 24, 2024 · d7fc3ec · d7fc3ec
1 parent 6bca1bb
commit d7fc3ec
Show file tree

Hide file tree

Showing 35 changed files with 150 additions and 365 deletions.
diff --git a/examples/lit/column-sizing/src/main.ts b/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,

diff --git a/examples/react/column-resizing-performant/src/main.tsx b/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} />

diff --git a/examples/react/column-sizing/src/main.tsx b/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,

diff --git a/examples/react/row-pinning/src/main.tsx b/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()

diff --git a/packages/table-core/src/core/table/Tables.types.ts b/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)

diff --git a/packages/table-core/src/features/column-filtering/ColumnFiltering.ts b/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>) =>

diff --git a/packages/table-core/src/features/column-filtering/ColumnFiltering.types.ts b/packages/table-core/src/features/column-filtering/ColumnFiltering.types.ts
@@ -213,7 +213,7 @@ type ResolvedFilterFns<
       filterFns?: Record<string, FilterFn<TFeatures, TData>>
     }
   : {
-    filterFns: Record<keyof FilterFns, FilterFn<TFeatures, TData>>
+      filterFns: Record<keyof FilterFns, FilterFn<TFeatures, TData>>
     }
 
 export interface TableOptions_ColumnFiltering<
@@ -222,16 +222,6 @@ export interface TableOptions_ColumnFiltering<
 > extends ColumnFiltersOptionsBase<TFeatures, TData>,
     ResolvedFilterFns<TFeatures, TData> {}
 
-export interface TableOptions_ColumnFiltering_Unavailable<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> extends ColumnFiltersOptionsBase<TFeatures, TData>,
-    ResolvedFilterFns<TFeatures, TData> {
-  /**
-   * @description Allows `any`.
-   */
-}
-
 export interface Table_ColumnFiltering<
   TFeatures extends TableFeatures,
   TData extends RowData,

diff --git a/packages/table-core/src/features/column-grouping/ColumnGrouping.ts b/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,

diff --git a/packages/table-core/src/features/column-grouping/ColumnGrouping.types.ts b/packages/table-core/src/features/column-grouping/ColumnGrouping.types.ts
@@ -19,7 +19,7 @@ export interface TableState_ColumnGrouping {
 
 export interface TableState_ColumnGrouping_Unavailable {
   /**
-   * @deprecated Import the `GroupingState` feature to use the column grouping APIs.
+   * @deprecated Import the `ColumnGrouping` feature to use the column grouping APIs.
    */
   grouping: GroupingState
 }
@@ -231,16 +231,6 @@ export interface TableOptions_ColumnGrouping<
 > extends GroupingOptionsBase,
     ResolvedAggregationFns<TFeatures, TData> {}
 
-export interface TableOptions_ColumnGrouping_Unavailable<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> extends GroupingOptionsBase,
-    ResolvedAggregationFns<TFeatures, TData> {
-  /**
-   * @description Allows `any`.
-   */
-}
-
 export type GroupingColumnMode = false | 'reorder' | 'remove'
 
 export interface Table_ColumnGrouping<

diff --git a/packages/table-core/src/features/column-ordering/ColumnOrdering.ts b/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, [
       {

diff --git a/packages/table-core/src/features/column-ordering/ColumnOrdering.types.ts b/packages/table-core/src/features/column-ordering/ColumnOrdering.types.ts
@@ -1,6 +1,5 @@
 import type { OnChangeFn, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
-import type { Column } from '../../types/Column'
 import type { ColumnPinningPosition } from '../column-pinning/ColumnPinning.types'
 
 export type ColumnOrderState = Array<string>
@@ -11,7 +10,7 @@ export interface TableState_ColumnOrdering {
 
 export interface TableState_ColumnOrdering_Unavailable {
   /**
-   * @deprecated Import the `ColumnOrderState` feature to use the column ordering APIs.
+   * @deprecated Import the `ColumnOrdering` feature to use the column ordering APIs.
    */
   columnOrder: ColumnOrderState
 }
@@ -25,13 +24,6 @@ export interface TableOptions_ColumnOrdering {
   onColumnOrderChange?: OnChangeFn<ColumnOrderState>
 }
 
-export interface TableOptions_ColumnOrdering_Unavailable {
-  /**
-   * @deprecated Import the `OnChangeFn<ColumnOrderState>` feature to use the table options column ordering APIs.
-   */
-  onColumnOrderChange?: OnChangeFn<ColumnOrderState>
-}
-
 export interface Column_ColumnOrdering {
   /**
    * Returns the index of the column in the order of the visible columns. Optionally pass a `position` parameter to get the index of the column in a sub-section of the table