feat: hide columns cell override

common/changes/@itwin/imodel-browser-react/leobelanger-hide-columns_2025-11-05-14-20.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "Added hide columns option for iTwinGrid and iModelGrid while in cells view and renamed column ids to use camel case.",
+      "type": "major"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}

packages/apps/storybook/src/imodel-browser/IModelGrid.stories.tsx

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import {
   DataStatus,
+  IModelCellColumn,
   IModelFull,
   IModelGrid as ExternalComponent,
   IModelGridProps,
@@ -76,6 +77,7 @@ OverrideCellData.args = {
         props.value
       ),
     description: (props) => <em>{props.value}</em>,
+    hideColumns: [IModelCellColumn.CreatedDateTime],
   },
 };
 

packages/apps/storybook/src/imodel-browser/ITwinGrid.stories.tsx

@@ -5,6 +5,7 @@
 import {
   DataStatus,
   IndividualITwinStateHook,
+  ITwinCellColumn,
   ITwinFull,
   ITwinGrid as ExternalComponent,
   ITwinGridProps,
@@ -73,6 +74,7 @@ OverrideCellData.args = {
       </strong>
     ),
     ITwinName: (props) => <i style={{ color: "red" }}>{props.value}</i>,
+    hideColumns: [ITwinCellColumn.LastModified],
   },
 };
 

packages/modules/imodel-browser/src/containers/ITwinGrid/useITwinTableConfig.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import { useMemo } from "react";
 import { CellProps } from "react-table";
 
-import { ITwinCellOverrides, ITwinFull } from "../../types";
+import { ITwinCellColumn, ITwinCellOverrides, ITwinFull } from "../../types";
 import {
   _buildManagedContextMenuOptions,
   ContextMenuBuilderItem,
@@ -50,7 +50,7 @@ export const useITwinTableConfig = ({
         Header: "Table",
         columns: [
           {
-            id: "Favorite",
+            id: ITwinCellColumn.Favorite,
             Header: strings.tableColumnFavorites,
             accessor: "id",
             width: 70,
@@ -77,7 +77,7 @@ export const useITwinTableConfig = ({
             },
           },
           {
-            id: "ITwinNumber",
+            id: ITwinCellColumn.Number,
             Header: strings.tableColumnName,
             accessor: "number",
             maxWidth: 350,
@@ -95,7 +95,7 @@ export const useITwinTableConfig = ({
             ),
           },
           {
-            id: "ITwinName",
+            id: ITwinCellColumn.Name,
             Header: strings.tableColumnDescription,
             accessor: "displayName",
             maxWidth: 350,
@@ -113,7 +113,7 @@ export const useITwinTableConfig = ({
             ),
           },
           {
-            id: "LastModified",
+            id: ITwinCellColumn.LastModified,
             Header: strings.tableColumnLastModified,
             accessor: "createdDateTime",
             maxWidth: 350,
@@ -127,7 +127,7 @@ export const useITwinTableConfig = ({
             },
           },
           {
-            id: "options",
+            id: ITwinCellColumn.Options,
             disableSortBy: true,
             maxWidth: 65,
             Cell: (props: CellProps<ITwinFull>) => {
@@ -158,7 +158,7 @@ export const useITwinTableConfig = ({
               ) : null;
             },
           },
-        ],
+        ].filter((column) => !cellOverrides.hideColumns?.includes(column.id)),
       },
     ],
     [

packages/modules/imodel-browser/src/containers/iModelGrid/useIModelTableConfig.tsx

@@ -9,7 +9,7 @@ import { useMemo } from "react";
 import { CellProps } from "react-table";
 
 import { useIModelFavoritesContext } from "../../contexts/IModelFavoritesContext";
-import { IModelCellOverrides, IModelFull } from "../../types";
+import { IModelCellColumn, IModelCellOverrides, IModelFull } from "../../types";
 import {
   _buildManagedContextMenuOptions,
   ContextMenuBuilderItem,
@@ -57,7 +57,7 @@ export const useIModelTableConfig = ({
         Header: "Table",
         columns: [
           {
-            id: "Favorite",
+            id: IModelCellColumn.Favorite,
             Header: strings.tableColumnFavorites,
             accessor: "id",
             width: 70,
@@ -84,7 +84,7 @@ export const useIModelTableConfig = ({
             },
           },
           {
-            id: "name",
+            id: IModelCellColumn.Name,
             Header: strings.tableColumnName,
             accessor: "name",
             maxWidth: 350,
@@ -97,7 +97,7 @@ export const useIModelTableConfig = ({
             ),
           },
           {
-            id: "description",
+            id: IModelCellColumn.Description,
             Header: strings.tableColumnDescription,
             accessor: "description",
             disableSortBy: true,
@@ -112,7 +112,7 @@ export const useIModelTableConfig = ({
             ),
           },
           {
-            id: "createdDateTime",
+            id: IModelCellColumn.CreatedDateTime,
             Header: strings.tableColumnLastModified,
             accessor: "createdDateTime",
             maxWidth: 350,
@@ -126,7 +126,7 @@ export const useIModelTableConfig = ({
             },
           },
           {
-            id: "options",
+            id: IModelCellColumn.Options,
             disableSortBy: true,
             maxWidth: 65,
             Cell: (props: CellProps<IModelFull>) => {
@@ -162,7 +162,7 @@ export const useIModelTableConfig = ({
               ) : null;
             },
           },
-        ],
+        ].filter(({ id }) => !cellOverrides.hideColumns?.includes(id)),
       },
     ],
     [

packages/modules/imodel-browser/src/types.ts

@@ -107,16 +107,34 @@ export type ViewType = "tile" | "cells";
 // Remove this IModelViewType with next major release i.e 2.0
 export type IModelViewType = ViewType;
 
+/* Supported IModel cell columns */
+export enum IModelCellColumn {
+  Favorite = "favorite",
+  Name = "name",
+  Description = "description",
+  CreatedDateTime = "createdDateTime",
+  Options = "options",
+}
 export type IModelCellOverrides = {
   name?: (cellData: CellProps<IModelFull>) => React.ReactNode;
   description?: (cellData: CellProps<IModelFull>) => React.ReactNode;
   createdDateTime?: (cellData: CellProps<IModelFull>) => React.ReactNode;
+  hideColumns?: IModelCellColumn[];
 };
 
+/* Supported ITwin cell columns */
+export enum ITwinCellColumn {
+  Favorite = "favorite",
+  Number = "iTwinNumber",
+  Name = "iTwinName",
+  LastModified = "lastModified",
+  Options = "options",
+}
 export type ITwinCellOverrides = {
   ITwinNumber?: (cellData: CellProps<ITwinFull>) => React.ReactNode;
   ITwinName?: (cellData: CellProps<ITwinFull>) => React.ReactNode;
   LastModified?: (cellData: CellProps<ITwinFull>) => React.ReactNode;
+  hideColumns?: ITwinCellColumn[];
 };
 
 export type AccessTokenProvider = string | (() => Promise<string>);