sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-25 03:42:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(base): re-render grid header and rows when column visibility changes

Browse Source
This commit is contained in:
Philipinho
2026-04-18 21:41:32 +01:00
parent ab9b00f91c
commit d4fe0e0a69
3 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/components/grid/grid-container.tsx
+2
View File
@@ -242,6 +242,7 @@ export function GridContainer({
table={table} table={table}
baseId={baseId} baseId={baseId}
columnOrder={table.getState().columnOrder} columnOrder={table.getState().columnOrder}
columnVisibility={table.getState().columnVisibility}
properties={properties} properties={properties}
loadedRowIds={rowIds} loadedRowIds={rowIds}
onPropertyCreated={handlePropertyCreated} onPropertyCreated={handlePropertyCreated}
@@ -262,6 +263,7 @@ export function GridContainer({
rowIndex={virtualRow.index} rowIndex={virtualRow.index}
onCellUpdate={onCellUpdate} onCellUpdate={onCellUpdate}
orderedRowIds={rowIds} orderedRowIds={rowIds}
columnVisibility={table.getState().columnVisibility}
dragHandlers={ dragHandlers={
onRowReorder onRowReorder
? { ? {
apps/client/src/features/base/components/grid/grid-header.tsx
+4 -1
View File
@@ -1,5 +1,5 @@
import { memo, useMemo } from "react"; 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 { IBaseRow, IBaseProperty } from "@/features/base/types/base.types";
import { GridHeaderCell } from "./grid-header-cell"; import { GridHeaderCell } from "./grid-header-cell";
import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover"; import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover";
@@ -11,6 +11,7 @@ type GridHeaderProps = {
// Passed explicitly to break memo when columns change // Passed explicitly to break memo when columns change
// (table ref is stable from useReactTable, so memo won't fire without these) // (table ref is stable from useReactTable, so memo won't fire without these)
columnOrder: ColumnOrderState; columnOrder: ColumnOrderState;
columnVisibility: VisibilityState;
properties: IBaseProperty[]; properties: IBaseProperty[];
loadedRowIds: string[]; loadedRowIds: string[];
onPropertyCreated?: () => void; onPropertyCreated?: () => void;
@@ -21,6 +22,8 @@ export const GridHeader = memo(function GridHeader({
baseId, baseId,
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
columnOrder: _columnOrder, columnOrder: _columnOrder,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
columnVisibility: _columnVisibility,
properties, properties,
loadedRowIds, loadedRowIds,
onPropertyCreated, onPropertyCreated,
apps/client/src/features/base/components/grid/grid-row.tsx
+4 -1
View File
@@ -1,5 +1,5 @@
import { memo, useCallback } from "react"; 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 { IBaseRow } from "@/features/base/types/base.types";
import { useRowSelection } from "@/features/base/hooks/use-row-selection"; import { useRowSelection } from "@/features/base/hooks/use-row-selection";
import { GridCell } from "./grid-cell"; import { GridCell } from "./grid-cell";
@@ -21,6 +21,7 @@ type GridRowProps = {
onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void; onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
dragHandlers?: RowDragHandlers; dragHandlers?: RowDragHandlers;
orderedRowIds: string[]; orderedRowIds: string[];
columnVisibility: VisibilityState;
}; };
export const GridRow = memo(function GridRow({ export const GridRow = memo(function GridRow({
@@ -29,6 +30,8 @@ export const GridRow = memo(function GridRow({
onCellUpdate, onCellUpdate,
dragHandlers, dragHandlers,
orderedRowIds, orderedRowIds,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
columnVisibility: _columnVisibility,
}: GridRowProps) { }: GridRowProps) {
const isSelected = useRowSelection().isSelected(row.id); const isSelected = useRowSelection().isSelected(row.id);
const handleDragStart = useCallback( const handleDragStart = useCallback(