Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit bce6bcb

Browse files
RafaelGBRafaelGB
committed
investigation of rerender table
1 parent edbfd12 commit bce6bcb

File tree

17 files changed

+65
-44
lines changed

17 files changed

+65
-44
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"react-dom": "18.2.0",
6464
"react-csv": "2.2.2",
6565
"react-popper": "2.3.0",
66-
"@tanstack/react-table": "8.5.2",
66+
"@tanstack/react-table": "8.5.5",
6767
"@tanstack/match-sorter-utils": "8.1.1",
6868
"react-select": "5.4.0",
6969
"react-color": "2.19.3",

‎src/cdm/ComponentsModel.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export type PopperProps = {
1313
}
1414

1515
export type TagsProps = {
16-
dispatch: (action: any) => void;
1716
defaultCell: CellContext<RowDataType, Literal>;
1817
}
1918

‎src/cdm/TableStateInterface.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,17 @@ export interface RowTemplateState {
4747
update: (template: string) => void;
4848
}
4949

50+
export interface RenderState {
51+
enableRender: boolean;
52+
alterEnableRender: (enableRender: boolean) => void;
53+
}
54+
5055
export interface TableStateInterface {
5156
initialState: UseBoundStore<StoreApi<InitialState>>;
5257
configState: UseBoundStore<StoreApi<ConfigState>>;
5358
rowTemplate: UseBoundStore<StoreApi<RowTemplateState>>;
5459
data: UseBoundStore<StoreApi<DataState>>;
5560
sorting: UseBoundStore<StoreApi<ColumnSortingState>>;
5661
columns: UseBoundStore<StoreApi<ColumnsState>>;
62+
renderState: UseBoundStore<StoreApi<RenderState>>;
5763
}

‎src/components/Checkbox.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,21 @@
11
import React, { useContext, useState } from "react";
22
import { TableCellContext } from "components/contexts/CellContext";
3-
import { ActionTypes } from "helpers/Constants";
4-
import NoteInfo from "services/NoteInfo";
53
import { CheckboxProps } from "cdm/CheckboxModel";
64
import { TableColumn } from "cdm/FolderModel";
75
import { c } from "helpers/StylesHelper";
86

97
export function CheckboxCell(props: CheckboxProps) {
108
const { defaultCell } = props;
119
const { row, column, table } = defaultCell;
12-
const dataDispatch = table.options.meta.dispatch;
13-
const [rows, updateCell] = table.options.meta.tableState.data((state) => [
14-
state.rows,
15-
state.updateCell,
16-
]);
10+
const updateCell = table.options.meta.tableState.data(
11+
(state) => state.updateCell
12+
);
1713
const columns = table.options.meta.tableState.columns(
1814
(state) => state.columns
1915
);
2016
const ddbbConfig = table.options.meta.tableState.configState(
2117
(state) => state.ddbbConfig
2218
);
23-
/** Note info of current Cell */
24-
const note: NoteInfo = row.original.__note__;
2519
/** state of cell value */
2620
const { contextValue, setContextValue } = useContext(TableCellContext);
2721
const [checked, setChecked] = useState(contextValue.value as boolean);

‎src/components/DefaultCell.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export default function DefaultCell(
2222
defaultCell: CellContext<RowDataType, Literal>
2323
) {
2424
const { cell, column, row, table } = defaultCell;
25-
const dataDispatch = table.options.meta.dispatch;
2625
/** Initial state of cell */
2726
const cellValue = cell.getValue();
2827
/** Columns information */
@@ -36,7 +35,7 @@ export default function DefaultCell(
3635
(state) => state.ddbbConfig
3736
);
3837
/** Type of cell */
39-
const input = columns.find((col) => col.id === column.id).input;
38+
const input = (column.columnDef as TableColumn).input;
4039
/** Ref to cell container */
4140
const containerCellRef = useRef<HTMLDivElement>();
4241
const editableMdRef = useRef<HTMLInputElement>();
@@ -234,11 +233,7 @@ export default function DefaultCell(
234233
return <PopperSelectPortal defaultCell={defaultCell} />;
235234
/** Tags option */
236235
case InputType.TAGS:
237-
return (
238-
<TableCellContext.Provider value={{ contextValue, setContextValue }}>
239-
<TagsPortal dispatch={dataDispatch} defaultCell={defaultCell} />
240-
</TableCellContext.Provider>
241-
);
236+
return <TagsPortal defaultCell={defaultCell} />;
242237

243238
case InputType.TASK:
244239
if ((column.columnDef as TableColumn).config.task_hide_completed) {

‎src/components/DefaultHeader.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,13 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
5353
// TODO : add a tooltip to the header
5454
const created: boolean = false;
5555
/** Properties of header */
56-
const { column, header, table } = headerProps;
56+
const { header, table } = headerProps;
5757
const [columns, addToLeft] = table.options.meta.tableState.columns(
5858
(state) => [state.columns, state.addToLeft]
5959
);
6060
/** Column values */
61-
const { id, input, options, label, config } = columns.find(
62-
(col: TableColumn) => col.id === column.id
63-
);
61+
const { id, input, options, label, config } = header.column
62+
.columnDef as TableColumn;
6463
/** reducer asociated to database */
6564
const [expanded, setExpanded] = useState(created || false);
6665
const [domReady, setDomReady] = useState(false);

‎src/components/HeaderMenu.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
2121
const ddbbConfig = table.options.meta.tableState.configState(
2222
(state) => state.ddbbConfig
2323
);
24+
25+
const alterEnableRender = table.options.meta.tableState.renderState(
26+
(store) => store.alterEnableRender
27+
);
2428
/** Header props */
2529
const {
2630
propertyIcon,
@@ -32,9 +36,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
3236
setLabelState,
3337
} = headerMenuProps;
3438

35-
const { key, isMetadata, input } = columns.find(
36-
(col) => col.id === column.id
37-
);
39+
const { key, isMetadata, input } = column.columnDef as TableColumn;
3840
/** Column values */
3941
const [keyState, setkeyState] = useState(dbTrim(key));
4042
const [popperElement, setPopperElement] = useState(null);
@@ -118,14 +120,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
118120
.map((o: any) => (o.id === column.id ? newKey : o.id));
119121
table.setColumnOrder(updateOrderWithNewKey);
120122

121-
// Update state of sizing
122-
const updateSizeWithNewKey: Record<string, number> = {};
123-
table.getAllColumns().forEach((o: any) => {
124-
const key = o.id === column.id ? newKey : o.id;
125-
updateSizeWithNewKey[key] = o.getSize();
126-
});
127-
table.setColumnSizing(updateSizeWithNewKey);
128-
129123
setkeyState(newKey);
130124
updateDataAfterLabelChange(
131125
column.columnDef as TableColumn,
@@ -135,6 +129,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
135129
);
136130

137131
alterColumnLabel(column.columnDef as TableColumn, labelState);
132+
alterEnableRender(true);
138133
}
139134

140135
function handleKeyDown(e: any) {

‎src/components/Table.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,23 @@ export function Table(tableData: TableDataType) {
6969
store.global,
7070
store.alterConfig,
7171
]);
72-
72+
const [enableRender, alterEnableRender] = tableStore.renderState((store) => [
73+
store.enableRender,
74+
store.alterEnableRender,
75+
]);
7376
/** Plugin services */
7477
const stateManager: StateManager = tableData.stateManager;
7578
const filePath = stateManager.file.path;
7679

7780
/** Reducer */
78-
const dataDispatch = (action: any) =>
79-
console.log(`TODO migrar dataDispatch ${action.type}`);
81+
const rerender = React.useReducer(() => ({}), {})[1];
82+
React.useEffect(() => {
83+
if (enableRender) {
84+
console.log("=> Table. rerender");
85+
alterEnableRender(false);
86+
rerender();
87+
}
88+
});
8089

8190
/** Table services */
8291
// Sorting
@@ -219,7 +228,6 @@ export function Table(tableData: TableDataType) {
219228
globalFilterFn: "includesString",
220229
meta: {
221230
tableState: tableStore,
222-
dispatch: dataDispatch,
223231
view: view,
224232
},
225233
defaultColumn: defaultColumn,
@@ -271,7 +279,7 @@ export function Table(tableData: TableDataType) {
271279
csvButtonProps={{
272280
columns: columns,
273281
rows: table.getRowModel().rows,
274-
name: tableData.view.diskConfig.yaml.name,
282+
name: view.diskConfig.yaml.name,
275283
}}
276284
globalFilterRows={{
277285
globalFilter: globalFilter,

‎src/components/TableHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function TableHeader(headerProps: TableHeaderProps) {
1616
const { table, header, findColumn, headerIndex, setColumnOrder } =
1717
headerProps;
1818
const { id } = header.column.columnDef as TableColumn;
19-
const { dispatch, view, tableState } = table.options.meta;
19+
const { view, tableState } = table.options.meta;
2020
const columns = tableState.columns((state) => state.columns);
2121
const originalIndex = columns.findIndex((col) => col.id === id);
2222
//DnD
@@ -60,7 +60,7 @@ export default function TableHeader(headerProps: TableHeaderProps) {
6060
}
6161
},
6262
}),
63-
[findColumn, dispatch]
63+
[findColumn]
6464
);
6565

6666
const opacity = isDragging ? 0 : 1;

‎src/components/headerActions/handlers/types/NumberTypeHeaderAction.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ function numberTypeComponent(headerActionResponse: HeaderActionResponse) {
3131
const ddbbConfig = table.options.meta.tableState.configState(
3232
(state) => state.ddbbConfig
3333
);
34+
const alterEnableRender = table.options.meta.tableState.renderState(
35+
(store) => store.alterEnableRender
36+
);
37+
3438
const numberOnClick = (e: any) => {
3539
hooks.setShowType(false);
3640
hooks.setExpanded(false);
@@ -40,6 +44,7 @@ function numberTypeComponent(headerActionResponse: HeaderActionResponse) {
4044
ddbbConfig
4145
);
4246
alterColumnType(column.columnDef as TableColumn, InputType.NUMBER);
47+
alterEnableRender(true);
4348
};
4449
return headerTypeComponent({
4550
onClick: numberOnClick,

0 commit comments

Comments
 (0)