Add sorting to iTwin Grid columns

common/changes/@itwin/imodel-browser-react/omar-add-sorting-itwin-grid_2026-01-03-02-11.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "Fix sorting in iTwinGrid/iModelGrid table",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}

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

@@ -68,7 +68,11 @@ OverrideCellData.args = {
     name: (props) =>
       props.value.includes("a") ? (
         <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-          <IconButton size="small" styleType="borderless">
+          <IconButton
+            aria-label="apple-icon"
+            size="small"
+            styleType="borderless"
+          >
             <SvgApple />
           </IconButton>
           {props.value}

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

@@ -78,9 +78,7 @@ export interface ITwinGridProps {
   filterOptions?: ITwinFilterOptions;
   /**
    * Set the `$orderby` parameter when fetching iTwins from the iTwin API, e.g. `displayName ASC`.
-   *
    * This only has an effect when the `requestType` is empty - it does not apply to "favorites" or "recents".
-   *
    * See https://developer.bentley.com/apis/itwins/operations/get-my-itwins/#odata-queries for details.
    */
   orderbyOptions?: string;
@@ -266,6 +264,7 @@ export const ITwinGrid = ({
             : strings.noITwins
         }
         isLoading={fetchStatus === DataStatus.Fetching}
+        isSortable
         onBottomReached={fetchMore}
         autoResetFilters={false}
         autoResetSortBy={false}

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

@@ -53,6 +53,7 @@ export const useITwinTableConfig = ({
             id: ITwinCellColumn.Favorite,
             Header: strings.tableColumnFavorites,
             accessor: "id",
+            disableSortBy: true,
             width: 70,
             Cell: (props: CellProps<ITwinFull>) => {
               const isFavorite = iTwinFavorites.has(props.value);
@@ -115,10 +116,9 @@ export const useITwinTableConfig = ({
           {
             id: ITwinCellColumn.LastModified,
             Header: strings.tableColumnLastModified,
-            accessor: "createdDateTime",
-            maxWidth: 350,
+            accessor: "lastModifiedDateTime",
             Cell: (props: CellProps<ITwinFull>) => {
-              const date = props.data[props.row.index].createdDateTime;
+              const date = props.data[props.row.index].lastModifiedDateTime;
               return cellOverrides.LastModified
                 ? cellOverrides.LastModified(props)
                 : date

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

@@ -142,11 +142,11 @@ export const IModelGrid = (props: IModelGridProps) => {
       serverEnvironmentPrefix={props.apiOverrides?.serverEnvironmentPrefix}
       disabled={props.tileOverrides?.hideFavoriteIcon}
     >
-      <ITwinGridInternal {...props} />
+      <IModelGridInternal {...props} />
     </IModelFavoritesProvider>
   );
 };
-const ITwinGridInternal = ({
+const IModelGridInternal = ({
   accessToken,
   apiOverrides,
   iModelActions,
@@ -172,31 +172,27 @@ const ITwinGridInternal = ({
   disableAddToRecents = false,
 }: IModelGridProps) => {
   const [sort, setSort] = React.useState<IModelSortOptions>(sortOptions);
-  const [isSortOnTable, setIsSortOnTable] = React.useState(false);
 
   React.useEffect(() => {
-    if (!isSortOnTable) {
-      const defaultTableSort: IModelSortOptions = {
-        sortType: "name",
-        descending: false,
-      };
-      setSort(
-        viewMode === "cells"
-          ? defaultTableSort
-          : {
-              sortType: sortOptions.sortType,
-              descending: sortOptions.descending,
-            }
-      );
-    }
-  }, [isSortOnTable, sortOptions.descending, sortOptions.sortType, viewMode]);
+    setSort(
+      viewMode === "cells"
+        ? {
+            sortType: "name",
+            descending: false,
+          }
+        : {
+            sortType: sortOptions.sortType,
+            descending: sortOptions.descending,
+          }
+    );
+  }, [sortOptions.descending, sortOptions.sortType, viewMode]);
 
   const strings = _mergeStrings(
     {
       tableColumnFavorites: "",
       tableColumnName: "Name",
       tableColumnDescription: "Description",
-      tableColumnLastModified: "Last Modified",
+      tableColumnLastModified: "Created Date",
       tableLoadingData: "Loading...",
       noIModelSearch: "No results found",
       noIModelSearchSubtext:
@@ -349,7 +345,6 @@ const ITwinGridInternal = ({
                 apiOverrides={tileApiOverrides}
                 useTileState={useIndividualState}
                 refetchIModels={refetchIModels}
-                {...cellOverrides}
                 {...tileOverrides}
                 tileProps={
                   tileOverrides
@@ -402,23 +397,6 @@ const ITwinGridInternal = ({
               }
               isLoading={fetchStatus === DataStatus.Fetching}
               isSortable
-              onSort={(state) => {
-                const sortBy =
-                  state.sortBy.length > 0 ? state.sortBy[0] : undefined;
-                setIsSortOnTable(sortBy?.id !== undefined);
-                if (
-                  !sortBy ||
-                  sortBy.desc === undefined ||
-                  (sortBy.id !== "name" && sortBy.id !== "createdDateTime")
-                ) {
-                  return;
-                }
-                setSort({
-                  sortType: sortBy.id,
-                  descending: sortBy.desc,
-                });
-              }}
-              manualSortBy
               onBottomReached={fetchMore}
               autoResetFilters={false}
               autoResetSortBy={false}

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

@@ -60,6 +60,7 @@ export const useIModelTableConfig = ({
             id: IModelCellColumn.Favorite,
             Header: strings.tableColumnFavorites,
             accessor: "id",
+            disableSortBy: true,
             width: 70,
             Cell: (props: CellProps<IModelFull>) => {
               const isFavorite = favoritesContext?.favorites.has(props.value);
@@ -90,9 +91,11 @@ export const useIModelTableConfig = ({
             maxWidth: 350,
             Cell: (props: CellProps<IModelFull>) => (
               <div data-tip={props.row.original.name}>
-                <span>
-                  {cellOverrides.name ? cellOverrides.name(props) : props.value}
-                </span>
+                {cellOverrides.name ? (
+                  cellOverrides.name(props)
+                ) : (
+                  <span>{props.value}</span>
+                )}
               </div>
             ),
           },
@@ -103,11 +106,11 @@ export const useIModelTableConfig = ({
             disableSortBy: true,
             Cell: (props: CellProps<IModelFull>) => (
               <div data-tip={props.row.original.description}>
-                <span>
-                  {cellOverrides.description
-                    ? cellOverrides.description(props)
-                    : props.value}
-                </span>
+                {cellOverrides.description ? (
+                  cellOverrides.description(props)
+                ) : (
+                  <span>{props.value}</span>
+                )}
               </div>
             ),
           },