Skip to content

Commit 09bef75

Browse files
KevinVandyKevinVandy
committed
progress on memo refactors
1 parent 1e79574 commit 09bef75

File tree

35 files changed

+1424
-868
lines changed

35 files changed

+1424
-868
lines changed

‎docs/reference/functions/memo.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title: memo
77

88
```ts
99
function memo<TDeps, TDepArgs, TResult>(
10-
getDeps,
10+
memoDeps,
1111
fn,
1212
opts): (depArgs?) => TResult
1313
```
@@ -22,7 +22,7 @@ function memo<TDeps, TDepArgs, TResult>(
2222

2323
## Parameters
2424

25-
• **getDeps**
25+
• **memoDeps**
2626

2727
• **fn**
2828

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { useEffect } from 'react'
22
import ReactDOM from 'react-dom/client'
33

44
import './index.css'
@@ -30,14 +30,14 @@ import type {
3030
function App() {
3131
const rerender = React.useReducer(() => ({}), {})[1]
3232

33-
//table states
33+
// table states
3434
const [rowPinning, setRowPinning] = React.useState<RowPinningState>({
3535
top: [],
3636
bottom: [],
3737
})
3838
const [expanded, setExpanded] = React.useState<ExpandedState>({})
3939

40-
//demo states
40+
// demo states
4141
const [keepPinnedRows, setKeepPinnedRows] = React.useState(true)
4242
const [includeLeafRows, setIncludeLeafRows] = React.useState(true)
4343
const [includeParentRows, setIncludeParentRows] = React.useState(false)
@@ -168,9 +168,14 @@ function App() {
168168
onRowPinningChange: setRowPinning,
169169
getSubRows: (row) => row.subRows,
170170
keepPinnedRows,
171-
debugRows: true,
171+
debugAll: true,
172172
})
173173

174+
// console.log(table.getBottomRows)
175+
useEffect(() => {
176+
console.log(table.getBottomRows())
177+
}, [table.getBottomRows()])
178+
174179
return (
175180
<div className="app">
176181
<div className="p-2 container">

‎packages/table-core/src/core/cells/Cells.ts‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getMemoOptions, memo } from '../../utils'
1+
import { assignAPIs, getMemoOptions, memo } from '../../utils'
22
import { cell_getContext, cell_getValue, cell_renderValue } from './Cells.utils'
33
import type { CellData, RowData } from '../../types/type-utils'
44
import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
@@ -14,14 +14,17 @@ export const Cells: TableFeature = {
1414
cell: Cell<TFeatures, TData, TValue>,
1515
table: Table<TFeatures, TData>,
1616
) => {
17-
cell.getValue = () => cell_getValue(cell, table) as any
18-
19-
cell.renderValue = () => cell_renderValue(cell, table)
20-
21-
cell.getContext = memo(
22-
() => [cell, table],
23-
(c, t) => cell_getContext(c, t),
24-
getMemoOptions(table.options, 'debugCells', 'cell.getContext'),
25-
)
17+
assignAPIs(cell, table, [
18+
{
19+
fn: () => cell_getValue(cell, table) as any,
20+
},
21+
{
22+
fn: () => cell_renderValue(cell, table),
23+
},
24+
{
25+
fn: () => cell_getContext(cell, table),
26+
memoDeps: () => [cell, table],
27+
},
28+
])
2629
},
2730
}

‎packages/table-core/src/core/columns/Columns.ts‎

Lines changed: 46 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getMemoOptions, memo } from '../../utils'
1+
import { assignAPIs, getMemoOptions, memo } from '../../utils'
22
import { _table_getState } from '../table/Tables.utils'
33
import { _createColumn } from './createColumn'
44
import {
@@ -25,62 +25,55 @@ export const Columns: TableFeature = {
2525
column: Column<TFeatures, TData, TValue>,
2626
table: Table<TFeatures, TData>,
2727
) => {
28-
column.getFlatColumns = memo(
29-
() => [table.options.columns],
30-
() => column_getFlatColumns(column),
31-
getMemoOptions(table.options, 'debugColumns', 'column.getFlatColumns'),
32-
)
33-
34-
column.getLeafColumns = memo(
35-
() => [
36-
_table_getState(table).columnOrder,
37-
_table_getState(table).grouping,
38-
table.options.columns,
39-
table.options.groupedColumnMode,
40-
],
41-
() => column_getLeafColumns(column, table),
42-
getMemoOptions(table.options, 'debugColumns', 'column.getLeafColumns'),
43-
)
28+
assignAPIs(column, table, [
29+
{
30+
fn: () => column_getFlatColumns(column),
31+
memoDeps: () => [table.options.columns],
32+
},
33+
{
34+
fn: () => column_getLeafColumns(column, table),
35+
memoDeps: () => [
36+
_table_getState(table).columnOrder,
37+
_table_getState(table).grouping,
38+
table.options.columns,
39+
table.options.groupedColumnMode,
40+
],
41+
},
42+
])
4443
},
4544

4645
_createTable: <TFeatures extends TableFeatures, TData extends RowData>(
4746
table: Table<TFeatures, TData>,
4847
) => {
49-
table._getDefaultColumnDef = memo(
50-
() => [table.options.defaultColumn],
51-
() => table_getDefaultColumnDef(table),
52-
getMemoOptions(table.options, 'debugColumns', '_getDefaultColumnDef'),
53-
)
54-
55-
table.getAllColumns = memo(
56-
() => [table.options.columns],
57-
() => table_getAllColumns(table),
58-
getMemoOptions(table.options, 'debugColumns', 'getAllColumns'),
59-
)
60-
61-
table.getAllFlatColumns = memo(
62-
() => [table.options.columns],
63-
() => table_getAllFlatColumns(table),
64-
getMemoOptions(table.options, 'debugColumns', 'getAllFlatColumns'),
65-
)
66-
67-
table._getAllFlatColumnsById = memo(
68-
() => [table.options.columns],
69-
() => table_getAllFlatColumnsById(table),
70-
getMemoOptions(table.options, 'debugColumns', 'getAllFlatColumnsById'),
71-
)
72-
73-
table.getAllLeafColumns = memo(
74-
() => [
75-
_table_getState(table).columnOrder,
76-
_table_getState(table).grouping,
77-
table.options.columns,
78-
table.options.groupedColumnMode,
79-
],
80-
() => table_getAllLeafColumns(table),
81-
getMemoOptions(table.options, 'debugColumns', 'getAllLeafColumns'),
82-
)
83-
84-
table.getColumn = (columnId) => table_getColumn(table, columnId)
48+
assignAPIs(table, table, [
49+
{
50+
fn: () => table_getDefaultColumnDef(table),
51+
memoDeps: () => [table.options.defaultColumn],
52+
},
53+
{
54+
fn: () => table_getAllColumns(table),
55+
memoDeps: () => [table.options.columns],
56+
},
57+
{
58+
fn: () => table_getAllFlatColumns(table),
59+
memoDeps: () => [table.options.columns],
60+
},
61+
{
62+
fn: () => table_getAllFlatColumnsById(table),
63+
memoDeps: () => [table.options.columns],
64+
},
65+
{
66+
fn: () => table_getAllLeafColumns(table),
67+
memoDeps: () => [
68+
_table_getState(table).columnOrder,
69+
_table_getState(table).grouping,
70+
table.options.columns,
71+
table.options.groupedColumnMode,
72+
],
73+
},
74+
{
75+
fn: (columnId) => table_getColumn(table, columnId),
76+
},
77+
])
8578
},
8679
}

‎packages/table-core/src/core/columns/Columns.types.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,8 @@ export interface Table_Columns<
9797
TFeatures extends TableFeatures,
9898
TData extends RowData,
9999
> {
100-
_getAllFlatColumnsById: () => Record<
101-
string,
102-
Column<TFeatures, TData, unknown>
103-
>
104-
_getDefaultColumnDef: () => Partial<ColumnDef<TFeatures, TData, unknown>>
100+
getAllFlatColumnsById: () => Record<string, Column<TFeatures, TData, unknown>>
101+
getDefaultColumnDef: () => Partial<ColumnDef<TFeatures, TData, unknown>>
105102
/**
106103
* Returns all columns in the table in their normalized and nested hierarchy.
107104
* @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#getallcolumns)

‎packages/table-core/src/core/columns/Columns.utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export function table_getDefaultColumnDef<
6565
},
6666
cell: (props) => props.renderValue<any>()?.toString?.() ?? null,
6767
...Object.values(table._features).reduce((obj, feature) => {
68-
return Object.assign(obj ?? {}, feature?._getDefaultColumnDef?.())
68+
return Object.assign(obj ?? {}, feature?.getDefaultColumnDef?.())
6969
}, {}),
7070
...table.options.defaultColumn,
7171
} as Partial<ColumnDef<TFeatures, TData, unknown>>
@@ -141,7 +141,7 @@ export function table_getColumn<
141141
table: Table<TFeatures, TData>,
142142
columnId: string,
143143
): Column<TFeatures, TData, unknown> | undefined {
144-
const column = table._getAllFlatColumnsById()[columnId]
144+
const column = table_getAllFlatColumnsById(table)[columnId]
145145

146146
if (process.env.NODE_ENV !== 'production' && !column) {
147147
console.warn(`[Table] Column with id '${columnId}' does not exist.`)

‎packages/table-core/src/core/columns/createColumn.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { table_getDefaultColumnDef } from './Columns.utils'
12
import type { CellData, RowData } from '../../types/type-utils'
23
import type { TableFeatures } from '../../types/TableFeatures'
34
import type { Table } from '../../types/Table'
@@ -19,7 +20,7 @@ export function _createColumn<
1920
depth: number,
2021
parent?: Column<TFeatures, TData, TValue>,
2122
): Column<TFeatures, TData, TValue> {
22-
const defaultColumn = table._getDefaultColumnDef()
23+
const defaultColumn = table_getDefaultColumnDef(table)
2324

2425
const resolvedColumnDef = {
2526
...defaultColumn,

‎packages/table-core/src/core/headers/Headers.ts‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
import { getMemoOptions, memo } from '../../utils'
1+
import { assignAPIs, getMemoOptions, memo } from '../../utils'
22
import { _table_getState } from '../table/Tables.utils'
3+
import {
4+
table_getCenterHeaderGroups,
5+
table_getLeftHeaderGroups,
6+
table_getRightHeaderGroups,
7+
} from '../../features/column-pinning/ColumnPinning.utils'
38
import { _createHeader } from './createHeader'
49
import {
510
header_getContext,
@@ -31,38 +36,33 @@ export const Headers: TableFeature = {
3136
_createTable: <TFeatures extends TableFeatures, TData extends RowData>(
3237
table: Table<TFeatures, TData>,
3338
): void => {
34-
table.getHeaderGroups = memo(
35-
() => [
36-
table.options.columns,
37-
_table_getState(table).columnOrder,
38-
_table_getState(table).grouping,
39-
_table_getState(table).columnPinning,
40-
table.options.groupedColumnMode,
41-
],
42-
() => table_getHeaderGroups(table),
43-
getMemoOptions(table.options, 'debugHeaders', 'getHeaderGroups'),
44-
)
45-
46-
table.getFooterGroups = memo(
47-
() => [table.getHeaderGroups()],
48-
(headerGroups) => table_getFooterGroups(headerGroups),
49-
getMemoOptions(table.options, 'debugHeaders', 'getFooterGroups'),
50-
)
51-
52-
table.getFlatHeaders = memo(
53-
() => [table.getHeaderGroups()],
54-
(headerGroups) => table_getFlatHeaders(headerGroups),
55-
getMemoOptions(table.options, 'debugHeaders', 'getFlatHeaders'),
56-
)
57-
58-
table.getLeafHeaders = memo(
59-
() => [
60-
table.getLeftHeaderGroups(),
61-
table.getCenterHeaderGroups(),
62-
table.getRightHeaderGroups(),
63-
],
64-
(left, center, right) => table_getLeafHeaders(left, center, right),
65-
getMemoOptions(table.options, 'debugHeaders', 'getLeafHeaders'),
66-
)
39+
assignAPIs(table, table, [
40+
{
41+
fn: () => table_getHeaderGroups(table),
42+
memoDeps: () => [
43+
table.options.columns,
44+
_table_getState(table).columnOrder,
45+
_table_getState(table).grouping,
46+
_table_getState(table).columnPinning,
47+
table.options.groupedColumnMode,
48+
],
49+
},
50+
{
51+
fn: () => table_getFooterGroups(table),
52+
memoDeps: () => [table_getHeaderGroups(table)],
53+
},
54+
{
55+
fn: () => table_getFlatHeaders(table),
56+
memoDeps: () => [table_getHeaderGroups(table)],
57+
},
58+
{
59+
fn: () => table_getLeafHeaders(table),
60+
memoDeps: () => [
61+
table_getLeftHeaderGroups(table),
62+
table_getCenterHeaderGroups(table),
63+
table_getRightHeaderGroups(table),
64+
],
65+
},
66+
])
6767
},
6868
}

‎packages/table-core/src/core/headers/Headers.utils.ts‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { table_getAllColumns } from '../columns/Columns.utils'
22
import { table_getVisibleLeafColumns } from '../../features/column-visibility/ColumnVisibility.utils'
33
import { _table_getState } from '../table/Tables.utils'
4-
import { getDefaultColumnPinningState } from '../../features/column-pinning/ColumnPinning.utils'
4+
import {
5+
getDefaultColumnPinningState,
6+
table_getCenterHeaderGroups,
7+
table_getLeftHeaderGroups,
8+
table_getRightHeaderGroups,
9+
} from '../../features/column-pinning/ColumnPinning.utils'
510
import { buildHeaderGroups } from './buildHeaderGroups'
611
import type { Header } from '../../types/Header'
712
import type { RowData } from '../../types/type-utils'
@@ -74,14 +79,16 @@ export function table_getHeaderGroups<
7479
export function table_getFooterGroups<
7580
TFeatures extends TableFeatures,
7681
TData extends RowData,
77-
>(headerGroups: Array<HeaderGroup<TFeatures, TData>>) {
82+
>(table: Table<TFeatures, TData>) {
83+
const headerGroups = table_getHeaderGroups(table)
7884
return [...headerGroups].reverse()
7985
}
8086

8187
export function table_getFlatHeaders<
8288
TFeatures extends TableFeatures,
8389
TData extends RowData,
84-
>(headerGroups: Array<HeaderGroup<TFeatures, TData>>) {
90+
>(table: Table<TFeatures, TData>) {
91+
const headerGroups = table_getHeaderGroups(table)
8592
return headerGroups
8693
.map((headerGroup) => {
8794
return headerGroup.headers
@@ -92,11 +99,11 @@ export function table_getFlatHeaders<
9299
export function table_getLeafHeaders<
93100
TFeatures extends TableFeatures,
94101
TData extends RowData,
95-
>(
96-
left: Array<HeaderGroup<TFeatures, TData>>,
97-
center: Array<HeaderGroup<TFeatures, TData>>,
98-
right: Array<HeaderGroup<TFeatures, TData>>,
99-
) {
102+
>(table: Table<TFeatures, TData>) {
103+
const left = table_getLeftHeaderGroups(table)
104+
const center = table_getCenterHeaderGroups(table)
105+
const right = table_getRightHeaderGroups(table)
106+
100107
return [
101108
...(left[0]?.headers ?? []),
102109
...(center[0]?.headers ?? []),

0 commit comments

Comments
 (0)