sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-07 06:23:06 +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}
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
? {
apps/client/src/features/base/components/grid/grid-header.tsx
+4 -1
View File
@@ -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,
apps/client/src/features/base/components/grid/grid-row.tsx
+4 -1
View File
@@ -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(