diff --git a/src/components/HighTable/HighTable.stories.tsx b/src/components/HighTable/HighTable.stories.tsx index 33e84945..9d88f69e 100644 --- a/src/components/HighTable/HighTable.stories.tsx +++ b/src/components/HighTable/HighTable.stories.tsx @@ -468,5 +468,20 @@ export const FilteredData: Story = { args: { data: sortableDataFrame(createFilteredData()), maxRowNumber: 10_000 * 1_000, + + }, +} +export const HiddenColumns: Story = { + args: { + data: sortableDataFrame(createUnsortableData()), + columnConfiguration: { + Value1: { + initiallyHidden: true, + }, + Value3: { + initiallyHidden: true, + }, + }, + cacheKey: 'hidden-columns-demo', }, } diff --git a/src/components/HighTable/HighTable.tsx b/src/components/HighTable/HighTable.tsx index 3a604c52..0786b911 100644 --- a/src/components/HighTable/HighTable.tsx +++ b/src/components/HighTable/HighTable.tsx @@ -81,13 +81,21 @@ function HighTableData(props: PropsData) { // TODO(SL): onError could be in a context, as we might want to use it everywhere const { cacheKey, orderBy, onOrderByChange, selection, onSelectionChange, onError, onColumnsVisibilityChange } = props + const initialVisibilityStates = useMemo(() => { + if (!props.columnConfiguration) return undefined + return data.columnDescriptors.map(descriptor => { + const config = props.columnConfiguration?.[descriptor.name] + return config?.initiallyHidden ? { hidden: true as const } : undefined + }) + }, [props.columnConfiguration, data.columnDescriptors]) + return ( /* Provide the column configuration to the table */ {/* Create a new set of widths if the data has changed, but keep it if only the number of rows changed */} {/* Create a new set of hidden columns if the data has changed, but keep it if only the number of rows changed */} - + {/* Create a new context if the dataframe changes, to flush the cache (ranks and indexes) */} {/* Create a new selection context if the dataframe has changed */} diff --git a/src/helpers/columnConfiguration.ts b/src/helpers/columnConfiguration.ts index 8233f26f..7ced649e 100644 --- a/src/helpers/columnConfiguration.ts +++ b/src/helpers/columnConfiguration.ts @@ -4,6 +4,7 @@ import React from 'react' export interface ColumnConfig { headerComponent?: React.ReactNode; minWidth?: number; + initiallyHidden?: boolean; // hideable?: boolean; // filters: Some filter structure // cellRenderer?: (value: unknown, row: Row) => React.ReactNode; diff --git a/src/hooks/useColumnVisibilityStates.tsx b/src/hooks/useColumnVisibilityStates.tsx index 36b42f1d..f3c7d264 100644 --- a/src/hooks/useColumnVisibilityStates.tsx +++ b/src/hooks/useColumnVisibilityStates.tsx @@ -12,6 +12,7 @@ export const ColumnVisibilityStatesContext = createContext void // callback which is called whenever the set of hidden columns changes. children: ReactNode } @@ -21,7 +22,7 @@ export interface HiddenColumn { } export type MaybeHiddenColumn = HiddenColumn | undefined -export function ColumnVisibilityStatesProvider({ children, localStorageKey, numColumns, onColumnsVisibilityChange }: ColumnVisibilityStatesProviderProps) { +export function ColumnVisibilityStatesProvider({ children, localStorageKey, numColumns, initialVisibilityStates, onColumnsVisibilityChange }: ColumnVisibilityStatesProviderProps) { if (!Number.isInteger(numColumns) || numColumns < 0) { throw new Error(`Invalid numColumns: ${numColumns}. It must be a positive integer.`) } @@ -50,13 +51,16 @@ export function ColumnVisibilityStatesProvider({ children, localStorageKey, numC }) } + // Apply initial visibility states if no persisted state exists + const effectiveColumnVisibilityStates = columnVisibilityStates ?? initialVisibilityStates + const isValidIndex = useCallback((index: number) => { return Number.isInteger(index) && index >= 0 && index < numColumns }, [numColumns]) const isHiddenColumn = useCallback((columnIndex: number) => { - return columnVisibilityStates?.[columnIndex]?.hidden === true - }, [columnVisibilityStates]) + return effectiveColumnVisibilityStates?.[columnIndex]?.hidden === true + }, [effectiveColumnVisibilityStates]) const { numberOfHiddenColumns, numberOfVisibleColumns } = useMemo(() => { let numberOfHiddenColumns = 0 @@ -77,22 +81,23 @@ export function ColumnVisibilityStatesProvider({ children, localStorageKey, numC return undefined } return () => { - setColumnVisibilityStates(columnVisibilityStates => { - const nextColumnVisibilityStates = [...columnVisibilityStates ?? []] + setColumnVisibilityStates(currentStates => { + const nextColumnVisibilityStates = [...currentStates ?? initialVisibilityStates ?? []] nextColumnVisibilityStates[columnIndex] = { hidden: true } onColumnsVisibilityChange?.(nextColumnVisibilityStates) return nextColumnVisibilityStates }) } - }, [canBeHidden, isValidIndex, setColumnVisibilityStates, onColumnsVisibilityChange]) + }, [canBeHidden, isValidIndex, setColumnVisibilityStates, onColumnsVisibilityChange, initialVisibilityStates]) const showAllColumns = useMemo(() => { if (numberOfHiddenColumns === 0) { return undefined } return () => { - setColumnVisibilityStates(undefined) - onColumnsVisibilityChange?.([]) + const allVisible: MaybeHiddenColumn[] = [] + setColumnVisibilityStates(allVisible) + onColumnsVisibilityChange?.(allVisible) } }, [numberOfHiddenColumns, setColumnVisibilityStates, onColumnsVisibilityChange])