diff --git a/apps/client/src/features/base/components/grid/grid-container.tsx b/apps/client/src/features/base/components/grid/grid-container.tsx index 28754e00..6281ecbd 100644 --- a/apps/client/src/features/base/components/grid/grid-container.tsx +++ b/apps/client/src/features/base/components/grid/grid-container.tsx @@ -242,6 +242,7 @@ export function GridContainer({ table={table} baseId={baseId} columnOrder={table.getState().columnOrder} + columnVisibility={table.getState().columnVisibility} properties={properties} loadedRowIds={rowIds} onPropertyCreated={handlePropertyCreated} @@ -262,6 +263,7 @@ export function GridContainer({ rowIndex={virtualRow.index} onCellUpdate={onCellUpdate} orderedRowIds={rowIds} + columnVisibility={table.getState().columnVisibility} dragHandlers={ onRowReorder ? { diff --git a/apps/client/src/features/base/components/grid/grid-header.tsx b/apps/client/src/features/base/components/grid/grid-header.tsx index d4da333a..bed424cf 100644 --- a/apps/client/src/features/base/components/grid/grid-header.tsx +++ b/apps/client/src/features/base/components/grid/grid-header.tsx @@ -1,5 +1,5 @@ import { memo, useMemo } from "react"; -import { Table, ColumnOrderState } from "@tanstack/react-table"; +import { Table, ColumnOrderState, VisibilityState } from "@tanstack/react-table"; import { IBaseRow, IBaseProperty } from "@/features/base/types/base.types"; import { GridHeaderCell } from "./grid-header-cell"; import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover"; @@ -11,6 +11,7 @@ type GridHeaderProps = { // Passed explicitly to break memo when columns change // (table ref is stable from useReactTable, so memo won't fire without these) columnOrder: ColumnOrderState; + columnVisibility: VisibilityState; properties: IBaseProperty[]; loadedRowIds: string[]; onPropertyCreated?: () => void; @@ -21,6 +22,8 @@ export const GridHeader = memo(function GridHeader({ baseId, // eslint-disable-next-line @typescript-eslint/no-unused-vars columnOrder: _columnOrder, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + columnVisibility: _columnVisibility, properties, loadedRowIds, onPropertyCreated, diff --git a/apps/client/src/features/base/components/grid/grid-row.tsx b/apps/client/src/features/base/components/grid/grid-row.tsx index b24be01f..238e3ea5 100644 --- a/apps/client/src/features/base/components/grid/grid-row.tsx +++ b/apps/client/src/features/base/components/grid/grid-row.tsx @@ -1,5 +1,5 @@ import { memo, useCallback } from "react"; -import { Row } from "@tanstack/react-table"; +import { Row, VisibilityState } from "@tanstack/react-table"; import { IBaseRow } from "@/features/base/types/base.types"; import { useRowSelection } from "@/features/base/hooks/use-row-selection"; import { GridCell } from "./grid-cell"; @@ -21,6 +21,7 @@ type GridRowProps = { onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void; dragHandlers?: RowDragHandlers; orderedRowIds: string[]; + columnVisibility: VisibilityState; }; export const GridRow = memo(function GridRow({ @@ -29,6 +30,8 @@ export const GridRow = memo(function GridRow({ onCellUpdate, dragHandlers, orderedRowIds, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + columnVisibility: _columnVisibility, }: GridRowProps) { const isSelected = useRowSelection().isSelected(row.id); const handleDragStart = useCallback(