Skip to content

Commit 59e612e

Browse files
committed
fix pixelWidth calculation on column change
1 parent 0e1b27e commit 59e612e

File tree

3 files changed

+32
-1
lines changed

3 files changed

+32
-1
lines changed

CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# CHANGELOG
22

3+
## 0.5.6
4+
5+
_2024-06-14_
6+
7+
### Bugfix
8+
9+
- Whenever `columns` changes, the `pixelWidths` are re-calculated
10+
311
## 0.5.5
412

513
_2024-06-13_

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-fluid-table",
3-
"version": "0.5.5",
3+
"version": "0.5.6",
44
"description": "A React table inspired by react-window",
55
"author": "Mckervin Ceme <mckervinc@live.com>",
66
"license": "MIT",

src/TableContext.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { createContext, useEffect, useReducer, useRef } from "react";
22
import { ColumnProps, FooterProps, SortDirection } from "../index";
3+
import { arraysMatch, calculateColumnWidths, findTableByUuid } from "./util";
34

45
type InitialState<T> = Omit<TableState<T>, "dispatch">;
56

@@ -138,22 +139,44 @@ function TableContextProvider<T>({ children, initialState }: ProviderProps<T>) {
138139
...findColumnWidthConstants(initialState.columns as ColumnProps<T>[])
139140
});
140141

142+
// effects
143+
// every time the pixelWidths change, keep track of them
144+
useEffect(() => {
145+
_stateOnMount.current.pixelWidths = state.pixelWidths;
146+
}, [state.pixelWidths]);
147+
141148
// if certain props change, update throughout package.
142149
// allows the user to control props such as sortColumn,
143150
// columns, etc.
144151
useEffect(() => {
145152
const changedFields = getChangedFields(_stateOnMount.current, initialState);
146153
if (changedFields.size) {
154+
// find the different state
147155
const refreshed = [...changedFields].reduce(
148156
(pv, c) => ({ ...pv, [c]: initialState[c] }),
149157
{}
150158
) as InitialState<T>;
151159

160+
// if the columns change, we have to update a bunch of width properties
152161
if (refreshed.columns) {
153162
const { fixedWidth, remainingCols } = findColumnWidthConstants(refreshed.columns);
154163
refreshed.fixedWidth = fixedWidth;
155164
refreshed.remainingCols = remainingCols;
165+
166+
// we also might need to update the pixelWidths
167+
const widths = calculateColumnWidths(
168+
findTableByUuid(_stateOnMount.current.uuid || ""),
169+
remainingCols,
170+
fixedWidth,
171+
(refreshed.minColumnWidth || _stateOnMount.current.minColumnWidth) ?? 80,
172+
refreshed.columns
173+
);
174+
if (!arraysMatch(widths, _stateOnMount.current.pixelWidths!)) {
175+
refreshed.pixelWidths = widths;
176+
}
156177
}
178+
179+
// update the state ref & dispatch
157180
_stateOnMount.current = initialState;
158181
dispatch({ type: "refresh", initialState: refreshed });
159182
}

0 commit comments

Comments
 (0)