diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts index 0189179de..6c63ab446 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts @@ -18,7 +18,7 @@ export enum SubComponentName { export type ColumnSizesMap = { [columnId: string]: WidthDefinition }; export type FilterHistory = string[]; -export type WidthDefinition = { idealWidth?: number; minWidth?: number }; +export type WidthDefinition = { widthPx: number }; export type TabDivider = { leftPaneWidthPercent: number }; export type ColumnsSelection = { selectedColumnIds: string[]; columnDefinitions: ColumnDefinition[] }; export type ColumnSort = { columnId: string; direction: "ascending" | "descending" }; diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx index 154abfef8..cce45252f 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx @@ -45,7 +45,6 @@ import { readSubComponentState, saveSubComponentState, SubComponentName, - WidthDefinition, } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil"; import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2"; import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper"; @@ -93,6 +92,10 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps { const COLUMNS_MENU_NAME = "columnsMenu"; +const defaultSize = { + idealWidth: 200, + minWidth: 50, +}; export const DocumentsTableComponent: React.FC = ({ onRefreshTable, items, @@ -109,20 +112,23 @@ export const DocumentsTableComponent: React.FC = }: IDocumentsTableComponentProps) => { const styles = useDocumentsTabStyles(); - const defaultSize: WidthDefinition = { - idealWidth: 200, - minWidth: 50, - }; - const [columnSizingOptions, setColumnSizingOptions] = React.useState(() => { - const columnSizesMap: ColumnSizesMap = readSubComponentState( - SubComponentName.ColumnSizes, - collection, - {}, - ); - const columnSizesPx: ColumnSizesMap = {}; + const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {}); + const columnSizesPx: TableColumnSizingOptions = {}; selectedColumnIds.forEach((columnId) => { - columnSizesPx[columnId] = (columnSizesMap && columnSizesMap[columnId]) || defaultSize; + if ( + !columnSizesMap || + !columnSizesMap[columnId] || + columnSizesMap[columnId].widthPx === undefined || + isNaN(columnSizesMap[columnId].widthPx) + ) { + columnSizesPx[columnId] = defaultSize; + } else { + columnSizesPx[columnId] = { + idealWidth: columnSizesMap[columnId].widthPx, + minWidth: 50, + }; + } }); return columnSizesPx; }); @@ -146,7 +152,7 @@ export const DocumentsTableComponent: React.FC = }; }); - const onColumnResize = React.useCallback((_, { columnId, width }) => { + const onColumnResize = React.useCallback((_, { columnId, width }: { columnId: string; width: number }) => { setColumnSizingOptions((state) => { const newSizingOptions = { ...state, @@ -156,7 +162,14 @@ export const DocumentsTableComponent: React.FC = }, }; - saveSubComponentState(SubComponentName.ColumnSizes, collection, newSizingOptions, true); + const persistentSizes = Object.keys(newSizingOptions).reduce((acc, key) => { + acc[key] = { + widthPx: newSizingOptions[key].idealWidth, + }; + return acc; + }, {} as ColumnSizesMap); + + saveSubComponentState(SubComponentName.ColumnSizes, collection, persistentSizes, true); return newSizingOptions; });