Control columns visibility (#427)

* disable telemetry in storybook (config file does not seem to work)

* BREAKING remove localStorage for columns visibility

* [refactor] rename ColumnVisibilityStatesContext to ColumnsVisibilityContext

* create tests

* [refactor] reduce the number of props, depend on ColumnParametersContext

* add tests

* refactor test

* add columnsVisibility prop to HighTable

Author: severo

README.md

@@ -105,7 +105,7 @@ interface TableProps {
   numRowsPerPage?: number // number of rows per page for keyboard navigation (default 20)
   selection?: Selection // selection state (if defined, the component selection is controlled by the parent)
   styled?: boolean // use styled component? (default true)
-  onColumnsVisibilityChange?: (columnVisibilityStates: Record<string, MaybeHiddenColumn>) => void // columns visibility change handler
+  onColumnsVisibilityChange?: (columnsVisibility: Record<string, { hidden: true } | undefined>) => void // columns visibility change handler
   onDoubleClickCell?: (event: MouseEvent, col: number, row: number) => void // double-click handler
   onError?: (error: Error) => void // error handler
   onKeyDownCell?: (event: KeyboardEvent, col: number, row: number) => void // key down handler. For accessibility, it should be passed if onDoubleClickCell is passed.

package.json

@@ -43,7 +43,7 @@
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "prepublishOnly": "npm run build",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --disable-telemetry",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"
   },

src/components/ColumnHeader/ColumnHeader.tsx

@@ -3,7 +3,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef } from 'react'
 import { flushSync } from 'react-dom'
 
 import type { ColumnParameters } from '../../contexts/ColumnParametersContext.js'
-import { ColumnVisibilityStatesContext } from '../../contexts/ColumnVisibilityStatesContext.js'
+import { ColumnsVisibilityContext } from '../../contexts/ColumnsVisibilityContext.js'
 import { ColumnWidthsContext } from '../../contexts/ColumnWidthsContext.js'
 import type { Direction } from '../../helpers/sort.js'
 import { getOffsetWidth } from '../../helpers/width.js'
@@ -35,7 +35,7 @@ export default function ColumnHeader({ columnIndex, columnName, columnConfig, ca
   const { tabIndex, navigateToCell, focusIfNeeded } = useCellFocus({ ariaColIndex, ariaRowIndex })
   const { sortable } = columnConfig
   const { isOpen, position, menuId, close, handleMenuClick } = useColumnMenu(ref, navigateToCell)
-  const { getHideColumn, showAllColumns } = useContext(ColumnVisibilityStatesContext)
+  const { getHideColumn, showAllColumns } = useContext(ColumnsVisibilityContext)
 
   // Focus the cell if needed. We use an effect, as it acts on the DOM element after render.
   useEffect(() => {

src/components/HighTable/HighTable.stories.tsx

@@ -10,6 +10,7 @@ import type { Fetch, ResolvedValue } from '../../helpers/dataframe/types.js'
 import type { Selection } from '../../helpers/selection.js'
 import type { OrderBy } from '../../helpers/sort.js'
 import { createEventTarget } from '../../helpers/typedEventTarget.js'
+import type { ColumnsVisibility } from '../../providers/ColumnsVisibilityProvider.js'
 import type { CellPosition } from '../../types.js'
 import type { CellContentProps } from '../Cell/Cell.js'
 import HighTable from './HighTable.js'
@@ -681,3 +682,53 @@ export const JumpToCell: Story = {
     data: createLargeData(1_000_000_000),
   },
 }
+export const ColumnsVisibilityControlled: Story = {
+  render: ({ data }) => {
+    const [columnsVisibility, setColumnsVisibility] = useState<ColumnsVisibility>({
+      Value1: { hidden: true },
+      Value3: { hidden: true },
+    })
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+
+        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', padding: '12px' }}>
+          {
+            data.columnDescriptors.map(({ name }) => {
+              const isHidden = columnsVisibility[name]?.hidden === true
+              return (
+                <button
+                  key={name}
+                  type="button"
+                  onClick={() => {
+                    setColumnsVisibility({
+                      ...columnsVisibility,
+                      [name]: isHidden ? undefined : { hidden: true },
+                    })
+                  }}
+                >
+                  {isHidden ? `Show ${name}` : `Hide ${name}`}
+                </button>
+              )
+            })
+          }
+        </div>
+        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', padding: '12px', alignItems: 'center' }}>
+          <button type="button" onClick={() => { setColumnsVisibility({}) }}>
+            Show all columns
+          </button>
+          <div>
+            {`Hidden columns: ${Object.entries(columnsVisibility).filter(([, visibility]) => visibility?.hidden).map(([name]) => name).join(', ') || 'None'}`}
+          </div>
+        </div>
+        <HighTable
+          data={data}
+          columnsVisibility={columnsVisibility}
+          onColumnsVisibilityChange={setColumnsVisibility}
+        />
+      </div>
+    )
+  },
+  args: {
+    data: createUnsortableData(),
+  },
+}

src/components/HighTable/HighTable.tsx

@@ -2,13 +2,13 @@ import type { CSSProperties } from 'react'
 import { useMemo, useState } from 'react'
 
 import { PortalContainerContext } from '../../contexts/PortalContainerContext.js'
-import { columnVisibilityStatesSuffix, columnWidthsSuffix, rowHeight } from '../../helpers/constants.js'
+import { columnWidthsSuffix, rowHeight } from '../../helpers/constants.js'
 import styles from '../../HighTable.module.css'
 import { useData } from '../../hooks/useData.js'
 import { useHTMLElement } from '../../hooks/useHTMLElement.js'
 import { CellNavigationProvider } from '../../providers/CellNavigationProvider.js'
 import { ColumnParametersProvider } from '../../providers/ColumnParametersProvider.js'
-import { ColumnVisibilityStatesProvider } from '../../providers/ColumnVisibilityStatesProvider.js'
+import { ColumnsVisibilityProvider } from '../../providers/ColumnsVisibilityProvider.js'
 import { ColumnWidthsProvider } from '../../providers/ColumnWidthsProvider.js'
 import { OrderByProvider } from '../../providers/OrderByProvider.js'
 import { ScrollProvider } from '../../providers/ScrollProvider.js'
@@ -22,6 +22,7 @@ export default function HighTable({
   cacheKey,
   cellPosition,
   className = '',
+  columnsVisibility,
   data,
   focus,
   maxRowNumber,
@@ -41,20 +42,6 @@ export default function HighTable({
   const [tableCornerSize, setTableCornerSize] = useState<{ width: number, height: number } | undefined>(undefined)
   const { dataId, numRows, version } = useData({ data })
 
-  const columnNames = useMemo(() => data.columnDescriptors.map(d => d.name), [data.columnDescriptors])
-
-  const initialVisibilityStates = useMemo(() => {
-    if (!columnConfiguration) return undefined
-    const states: Record<string, { hidden: true } | undefined> = {}
-    for (const descriptor of data.columnDescriptors) {
-      const config = columnConfiguration[descriptor.name]
-      if (config?.initiallyHidden) {
-        states[descriptor.name] = { hidden: true as const }
-      }
-    }
-    return states
-  }, [columnConfiguration, data.columnDescriptors])
-
   const headerHeight = useMemo(() => {
     return tableCornerSize?.height ?? rowHeight
   }, [tableCornerSize])
@@ -96,16 +83,12 @@ export default function HighTable({
             viewportWidth={viewportWidth}
             tableCornerWidth={tableCornerSize?.width}
           >
-            <ColumnVisibilityStatesProvider
+            <ColumnsVisibilityProvider
               /**
                * Recreate a context if a new data frame is passed (but not if only the number of rows changed)
-               * The user can also pass a cacheKey to force a new set of visibility states, or keep the current ones.
                */
-              key={cacheKey ?? dataId}
-              // TODO(SL): pass cacheKey, memoize
-              localStorageKey={cacheKey ? `${cacheKey}${columnVisibilityStatesSuffix}` : undefined}
-              columnNames={columnNames}
-              initialVisibilityStates={initialVisibilityStates}
+              key={dataId}
+              columnsVisibility={columnsVisibility}
               onColumnsVisibilityChange={onColumnsVisibilityChange}
             >
               <OrderByProvider
@@ -162,7 +145,7 @@ export default function HighTable({
 
                 </SelectionProvider>
               </OrderByProvider>
-            </ColumnVisibilityStatesProvider>
+            </ColumnsVisibilityProvider>
           </ColumnWidthsProvider>
         </ColumnParametersProvider>
       </PortalContainerContext.Provider>

src/components/HighTable/Slice.tsx

@@ -2,7 +2,7 @@ import type { KeyboardEvent } from 'react'
 import { useCallback, useContext, useMemo } from 'react'
 
 import { CellNavigationContext } from '../../contexts/CellNavigationContext.js'
-import { ColumnVisibilityStatesContext } from '../../contexts/ColumnVisibilityStatesContext.js'
+import { ColumnsVisibilityContext } from '../../contexts/ColumnsVisibilityContext.js'
 import { OrderByContext } from '../../contexts/OrderByContext.js'
 import { ScrollContext } from '../../contexts/ScrollContext.js'
 import { SelectionContext } from '../../contexts/SelectionContext.js'
@@ -41,7 +41,7 @@ export default function Slice({
   const { moveCell } = useContext(CellNavigationContext)
   const { orderBy, setOrderBy } = useContext(OrderByContext)
   const { selectable, toggleAllRows, pendingSelectionGesture, onTableKeyDown: onSelectionTableKeyDown, allRowsSelected, isRowSelected, toggleRowNumber, toggleRangeToRowNumber } = useContext(SelectionContext)
-  const { visibleColumnsParameters: columnsParameters } = useContext(ColumnVisibilityStatesContext)
+  const { visibleColumnsParameters: columnsParameters } = useContext(ColumnsVisibilityContext)
   const { renderedRowsStart, renderedRowsEnd } = useContext(ScrollContext)
 
   // Fetch the required cells if needed (visible + overscan)

…ontexts/ColumnVisibilityStatesContext.ts src/contexts/ColumnsVisibilityContext.tssrc/contexts/ColumnVisibilityStatesContext.ts renamed to src/contexts/ColumnsVisibilityContext.ts src/contexts/ColumnVisibilityStatesContext.ts renamed to src/contexts/ColumnsVisibilityContext.ts

@@ -2,7 +2,7 @@ import { createContext } from 'react'
 
 import type { ColumnParameters } from './ColumnParametersContext'
 
-interface ColumnVisibilityStatesContextType {
+interface ColumnsVisibilityContextType {
   /** Number of visible columns */
   numberOfVisibleColumns: number
   /** Visible columns parameters */
@@ -29,8 +29,8 @@ interface ColumnVisibilityStatesContextType {
   isHiddenColumn?: (columnName: string) => boolean // returns true if the column is hidden
 }
 
-export const defaultColumnVisibilityStatesContext: ColumnVisibilityStatesContextType = {
+export const defaultColumnsVisibilityContext: ColumnsVisibilityContextType = {
   numberOfVisibleColumns: 0,
 }
 
-export const ColumnVisibilityStatesContext = createContext<ColumnVisibilityStatesContextType>(defaultColumnVisibilityStatesContext)
+export const ColumnsVisibilityContext = createContext<ColumnsVisibilityContextType>(defaultColumnsVisibilityContext)

src/helpers/constants.ts

@@ -6,8 +6,6 @@ export const defaultNumRowsPerPage = 20 // number of rows per page for keyboard
 
 const columnWidthsFormatVersion = '2' // increase in case of breaking changes in the column widths format
 export const columnWidthsSuffix = `:${columnWidthsFormatVersion}:column:widths` // suffix used to store the column widths in local storage
-const columnVisibilityStatesFormatVersion = '2' // increase in case of breaking changes in the column visibility format (changed from array by index to record by name)
-export const columnVisibilityStatesSuffix = `:${columnVisibilityStatesFormatVersion}:column:visibility` // suffix used to store the columns visibility in local storage
 
 export const ariaOffset = 2 // 1-based index, +1 for the header
 

src/hooks/useFetchCells.ts

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useEffectEvent, useMemo } from 'react'
 
-import { ColumnVisibilityStatesContext } from '../contexts/ColumnVisibilityStatesContext.js'
+import { ColumnsVisibilityContext } from '../contexts/ColumnsVisibilityContext.js'
 import { OrderByContext } from '../contexts/OrderByContext.js'
 import { ScrollContext } from '../contexts/ScrollContext.js'
 import { defaultOverscan } from '../helpers/constants.js'
@@ -16,7 +16,7 @@ type Props = Pick<HighTableProps, 'data' | 'onError' | 'overscan'> & {
  */
 export function useFetchCells({ data, numRows, overscan = defaultOverscan, onError }: Props) {
   const { visibleRowsStart, visibleRowsEnd } = useContext(ScrollContext)
-  const { visibleColumnsParameters } = useContext(ColumnVisibilityStatesContext)
+  const { visibleColumnsParameters } = useContext(ColumnsVisibilityContext)
   const { orderBy } = useContext(OrderByContext)
 
   const fetchedRowsStart = useMemo(() => {

src/providers/CellNavigationProvider.tsx

@@ -3,7 +3,7 @@ import { useCallback, useContext, useEffect, useMemo, useReducer } from 'react'
 
 import type { FocusAction, FocusState, MoveCellAction } from '../contexts/CellNavigationContext.js'
 import { CellNavigationContext } from '../contexts/CellNavigationContext.js'
-import { ColumnVisibilityStatesContext } from '../contexts/ColumnVisibilityStatesContext.js'
+import { ColumnsVisibilityContext } from '../contexts/ColumnsVisibilityContext.js'
 import { defaultNumRowsPerPage } from '../helpers/constants.js'
 import { useInputState } from '../hooks/useInputState.js'
 import type { HighTableProps } from '../types.js'
@@ -75,7 +75,7 @@ export function CellNavigationProvider({
   const rowCount = useMemo(() => numDataRows + 1, [numDataRows])
 
   // number of columns in the table, including the row header column
-  const { numberOfVisibleColumns: numDataColumns } = useContext(ColumnVisibilityStatesContext)
+  const { numberOfVisibleColumns: numDataColumns } = useContext(ColumnsVisibilityContext)
   const colCount = useMemo(() => numDataColumns + 1, [numDataColumns])
 
   const goToCurrentCell = useCallback(() => {