Control sorting through props for iTwin and iModel tables

.vscode/settings.json

@@ -13,5 +13,27 @@
   "search.exclude": {
     "**/CHANGELOG.md": true
   },
-  "js/ts.preferences.autoImportSpecifierExcludeRegexes": ["^@mui/[^/]+$"]
+  "js/ts.preferences.autoImportSpecifierExcludeRegexes": ["^@mui/[^/]+$"],
+  "jest.virtualFolders": [
+    {
+      "name": "create-imodel",
+      "rootPath": "packages/modules/create-imodel"
+    },
+    {
+      "name": "delete-imodel",
+      "rootPath": "packages/modules/delete-imodel"
+    },
+    {
+      "name": "delete-itwin",
+      "rootPath": "packages/modules/delete-itwin"
+    },
+    {
+      "name": "imodel-browser",
+      "rootPath": "packages/modules/imodel-browser"
+    },
+    {
+      "name": "manage-versions",
+      "rootPath": "packages/modules/manage-versions"
+    }
+  ]
 }

common/changes/@itwin/imodel-browser-react/omar-save-sort-imodel-table_2026-07-10-18-00.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "Controlled table sorting for iTwin/iModel grids",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}

packages/apps/storybook/.storybook/itwinTheme.js

@@ -8,13 +8,13 @@ export const lightTheme = create({
   base: "light",
   brandTitle: "iTwin Admin Components",
 
-  colorPrimary: '#0071B8', // --iui-color-background-accent
-  colorSecondary: '#0071B8', // --iui-color-background-accent
+  colorPrimary: "#0071B8", // --iui-color-background-accent
+  colorSecondary: "#0071B8", // --iui-color-background-accent
 
   // UI
-  appBg: '#FFFFFF', // --iui-color-background
-  appContentBg: '#FFFFFF', // --iui-color-background
-  appBorderColor: '#b3bcc1', // --iui-color-border
+  appBg: "#FFFFFF", // --iui-color-background
+  appContentBg: "#FFFFFF", // --iui-color-background
+  appBorderColor: "#b3bcc1", // --iui-color-border
   appBorderRadius: 9,
 
   // Typography
@@ -24,31 +24,31 @@ export const lightTheme = create({
     '"Noto Sans Mono", ui-monospace, "SF Mono", SFMono-Regular, "DejaVu Sans Mono", Menlo, Consolas, monospace',
 
   // Text colors
-  textColor: '#242424', //--iui-color-text
+  textColor: "#242424", //--iui-color-text
 
   // Toolbar default and active colors
-  barTextColor: '#242424', //--iui-color-text
-  barSelectedColor: '#0071B8', // --iui-color-background-accent
-  barBg: '#FFFFFF', // --iui-color-background
+  barTextColor: "#242424", //--iui-color-text
+  barSelectedColor: "#0071B8", // --iui-color-background-accent
+  barBg: "#FFFFFF", // --iui-color-background
 
   // Form colors
-  inputBg: '#FFFFFF', // --iui-color-background
-  inputBorder: '#b3bcc1', // --iui-color-border
-  inputTextColor: '#242424', //--iui-color-text
+  inputBg: "#FFFFFF", // --iui-color-background
+  inputBorder: "#b3bcc1", // --iui-color-border
+  inputTextColor: "#242424", //--iui-color-text
   inputBorderRadius: 3,
 });
 
 export const darkTheme = create({
   base: "dark",
   brandTitle: "iTwin Admin Components",
 
-  colorPrimary: '#0071B8', // --iui-color-background-accent
-  colorSecondary: '#94befa', // --iui-color-text-accent
+  colorPrimary: "#0071B8", // --iui-color-background-accent
+  colorSecondary: "#94befa", // --iui-color-text-accent
 
   // UI
-  appBg: '#333c41', // --iui-color-background
-  appContentBg: '#333c41', // --iui-color-background
-  appBorderColor: '#49555d', // --iui-color-border
+  appBg: "#333c41", // --iui-color-background
+  appContentBg: "#333c41", // --iui-color-background
+  appBorderColor: "#49555d", // --iui-color-border
   appBorderRadius: 9,
 
   // Typography
@@ -58,16 +58,16 @@ export const darkTheme = create({
     '"Noto Sans Mono", ui-monospace, "SF Mono", SFMono-Regular, "DejaVu Sans Mono", Menlo, Consolas, monospace',
 
   // Text colors
-  textColor: '#dbdbdb', //--iui-color-text
+  textColor: "#dbdbdb", //--iui-color-text
 
   // Toolbar default and active colors
-  barTextColor: '#dbdbdb', //--iui-color-text
-  barSelectedColor: '#94befa', // --iui-color-text-accent
-  barBg: '#333c41', // --iui-color-background
+  barTextColor: "#dbdbdb", //--iui-color-text
+  barSelectedColor: "#94befa", // --iui-color-text-accent
+  barBg: "#333c41", // --iui-color-background
 
   // Form colors
-  inputBg: '#333c41', // --iui-color-background
-  inputBorder: '#49555d', // --iui-color-border
-  inputTextColor: '#dbdbdb', //--iui-color-text
-  inputBorderRadius: 3
+  inputBg: "#333c41", // --iui-color-background
+  inputBorder: "#49555d", // --iui-color-border
+  inputTextColor: "#dbdbdb", //--iui-color-text
+  inputBorderRadius: 3,
 });

packages/apps/storybook/src/addon/preset.js

@@ -1,3 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 module.exports = {
   managerEntries: [require.resolve("./manager.jsx")],
 };

packages/apps/storybook/src/create-imodel/CreateIModel.stories.tsx

@@ -14,6 +14,7 @@ import {
 import { LabeledInput, LabeledSelect } from "@itwin/itwinui-react";
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import React from "react";
+
 import { iTwinAndAccessTokenArgTypes } from "../utils/storyHelp";
 
 export default {

packages/apps/storybook/src/create-imodel/UpdateIModel.stories.tsx

@@ -5,6 +5,7 @@
 import { UpdateIModel } from "@itwin/create-imodel-react";
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import React from "react";
+
 import { accessTokenArgTypes } from "../utils/storyHelp";
 
 function base64ToArrayBuffer(base64: string) {

packages/apps/storybook/src/delete-imodel/DeleteIModel.stories.tsx

@@ -6,6 +6,7 @@ import { DeleteIModel, DeleteIModelProps } from "@itwin/delete-imodel-react";
 import { Button } from "@itwin/itwinui-react";
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import React, { useState } from "react";
+
 import { accessTokenArgTypes } from "../utils/storyHelp";
 
 export default {

packages/apps/storybook/src/delete-itwin/DeleteITwin.stories.tsx

@@ -6,6 +6,7 @@ import { DeleteITwin, DeleteITwinProps } from "@itwin/delete-itwin-react";
 import { Button } from "@itwin/itwinui-react";
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import React, { useState } from "react";
+
 import { accessTokenArgTypes } from "../utils/storyHelp";
 
 export default {

packages/apps/storybook/src/examples/Authenticated.stories.tsx

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
+
 import { accessTokenArgTypes } from "../utils/storyHelp";
 import { Authentiated } from "./Authenticated";
 

packages/apps/storybook/src/examples/ITwinAwareComponent.stories.tsx

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
+
 import { ITwinAwareComponent } from "./ITwinAwareComponent";
 
 export default {

packages/apps/storybook/src/imodel-browser/mui/BaseCard.stories.tsx

@@ -7,7 +7,6 @@ import Avatar from "@mui/material/Avatar";
 import AvatarGroup from "@mui/material/AvatarGroup";
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
-import { action } from "storybook/actions";
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import svgGeo from "@stratakit/icons/geospatial-features.svg";
 import svgPin from "@stratakit/icons/pin.svg";
@@ -16,6 +15,7 @@ import svgStatusError from "@stratakit/icons/status-error.svg";
 import svgStatusSuccess from "@stratakit/icons/status-success.svg";
 import svgStatusWarning from "@stratakit/icons/status-warning.svg";
 import React from "react";
+import { action } from "storybook/actions";
 
 import {
   BaseCard,
@@ -255,7 +255,11 @@ export const OpenSitePlus: StoryObj<typeof BaseCardStory> = {
         icon: svgGeo,
       },
       { key: "share", label: "Share", onClick: action("menu: share clicked") },
-      { key: "delete", label: "Delete", onClick: action("menu: delete clicked") },
+      {
+        key: "delete",
+        label: "Delete",
+        onClick: action("menu: delete clicked"),
+      },
     ],
     actions: [
       {

packages/apps/storybook/src/imodel-browser/mui/IModelGridMUI.stories.tsx

@@ -8,6 +8,7 @@ import {
   DataStatus,
   IModelCellColumn,
   IModelGrid as ExternalComponent,
+  IModelSortOptions,
 } from "@itwin/imodel-browser-react/mui";
 import Avatar from "@mui/material/Avatar";
 import AvatarGroup from "@mui/material/AvatarGroup";
@@ -153,6 +154,99 @@ export const TableViewWithOverrides: StoryObj<typeof IModelGridMUI> = {
   },
 };
 
+const TableWithControlledSortRender = (args: IModelGridMUIProps) => {
+  const [sortOptions, setSortOptions] = React.useState<IModelSortOptions>({
+    sortType: "name",
+    descending: true,
+  });
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          gap: 8,
+          marginBottom: 8,
+          alignItems: "center",
+        }}
+      >
+        <Typography variant="body2">Sort by:</Typography>
+        <Chip
+          label="Name"
+          clickable
+          variant={sortOptions.sortType === "name" ? "filled" : "outlined"}
+          onClick={() =>
+            setSortOptions((prev) => ({ ...prev, sortType: "name" }))
+          }
+        />
+        <Chip
+          label="Last Modified"
+          clickable
+          variant={
+            sortOptions.sortType === "lastChangesetPushDateTime"
+              ? "filled"
+              : "outlined"
+          }
+          onClick={() =>
+            setSortOptions((prev) => ({
+              ...prev,
+              sortType: "lastChangesetPushDateTime",
+            }))
+          }
+        />
+        <Chip
+          label="Created Date"
+          clickable
+          variant={
+            sortOptions.sortType === "createdDateTime" ? "filled" : "outlined"
+          }
+          onClick={() =>
+            setSortOptions((prev) => ({
+              ...prev,
+              sortType: "createdDateTime",
+            }))
+          }
+        />
+        <Chip
+          label={sortOptions.descending ? "↓ Descending" : "↑ Ascending"}
+          clickable
+          variant="outlined"
+          onClick={() =>
+            setSortOptions((prev) => ({
+              ...prev,
+              descending: !prev.descending,
+            }))
+          }
+        />
+      </div>
+      <ExternalComponent
+        {...args}
+        sortOptions={sortOptions}
+        onSortOptionsChange={(newSortOptions) => {
+          action("sort options changed")(newSortOptions);
+          setSortOptions(newSortOptions);
+        }}
+      />
+    </div>
+  );
+};
+
+export const TableWithControlledSort: StoryObj<typeof IModelGridMUI> = {
+  render: (args) => <TableWithControlledSortRender {...args} />,
+  args: {
+    ...baseArgs,
+    viewMode: "cells",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The sort state is fully controlled by the parent via `sortOptions` and `onSortOptionsChange`, so it can be saved anywhere the consumer wants.",
+      },
+    },
+  },
+};
+
 const OverrideApiDataWithLoadMoreRender = (args: IModelGridMUIProps) => {
   const [data, setData] = React.useState<IModelFull[]>(initialData);
   const [isLoading, setIsLoading] = React.useState(false);

packages/apps/storybook/src/imodel-browser/mui/IModelTileMUI.stories.tsx

@@ -11,12 +11,12 @@ import Avatar from "@mui/material/Avatar";
 import AvatarGroup from "@mui/material/AvatarGroup";
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
-import { action } from "storybook/actions";
 import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import SvgDelete from "@stratakit/icons/delete.svg";
 import svgRoad from "@stratakit/icons/road.svg";
 import SvgShare from "@stratakit/icons/share.svg";
 import React from "react";
+import { action } from "storybook/actions";
 
 import bridgeThumbnail from "../../utils/bridge.jpg";
 import overpassThumbnail from "../../utils/overpass.jpg";