Skip to content

Control sorting through props for iTwin and iModel tables #223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arome wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Control sorting through props for iTwin and iModel tables #223

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
8cc3097
feat(iModelGrid): add sort state persistence to IModelTable and IMode…
arome Jul 10, 2026
137e2f6
feat(iTwinTable): add sort state persistence to ITwinTable and ITwinG…
arome Jul 10, 2026
5eb72db
feat: implement controlled sort model for IModelGrid and ITwinGrid co…
arome Jul 10, 2026
553f764
feat(iModelBrowser): add controlled table sorting for iTwin/iModel ta…
arome Jul 10, 2026
e279c84
feat: enhance sorting functionality in IModelGrid components
arome Jul 30, 2026
9342a06
feat: enhance sorting capabilities for IModel and ITwin tables with n…
arome Jul 30, 2026
7896e66
Merge remote-tracking branch 'origin/main' into omar/save-sort-imodel…
arome Jul 31, 2026
13484ef
fix: update TypedGridSortItem to use GridSortModel for improved type …
arome Jul 31, 2026
69f0806
feat: add Jest virtual folders and update TypeScript configurations f…
arome Jul 31, 2026
72a569d
Update omar-save-sort-imodel-table_2026-07-10-18-00.json
arome Jul 31, 2026
367c765
feat: enhance sorting functionality in ITwinGrid and IModelGrid compo…
arome Aug 3, 2026
bb84e3c
feat: add sorting by created date to IModelGrid components and update…
arome Aug 3, 2026
8742b39
revert changes
arome Aug 3, 2026
98a338f
feat: add support for sorting by createdDateTime in useIModelSort hoo…
arome Aug 3, 2026
d4f134e
feat: update sorting functionality in IModelGrid and ITwinGrid compon…
arome Aug 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions common/changes/@itwin/imodel-browser-react/omar-save-sort-imodel-table_2026-07-10-18-00.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@itwin/imodel-browser-react",
"comment": "Controlled table sorting for iTwin/iModel tables",
Comment thread
arome marked this conversation as resolved.
Outdated
"type": "minor"
}
],
"packageName": "@itwin/imodel-browser-react"
}
38 changes: 38 additions & 0 deletions packages/apps/storybook/src/imodel-browser/mui/IModelGridMUI.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Avatar from "@mui/material/Avatar";
import AvatarGroup from "@mui/material/AvatarGroup";
import Chip from "@mui/material/Chip";
import Typography from "@mui/material/Typography";
import { GridSortModel } from "@mui/x-data-grid";
import { action } from "@storybook/addon-actions";
import { Meta, Story } from "@storybook/react/types-6-0";
import SvgDelete from "@stratakit/icons/delete.svg";
Expand Down Expand Up @@ -158,6 +159,43 @@ TableViewWithOverrides.args = {
},
};

export const TableWithControlledSort: Story<IModelGridMUIProps> =
withITwinIdOverride(
withAccessTokenOverride((args) => {
const [sortModel, setSortModel] = React.useState<GridSortModel>([
{ field: "name", sort: "desc" },
]);

return (
<div>
<Typography variant="body2" style={{ marginBottom: 8 }}>
Controlled sort model: {JSON.stringify(sortModel)}
</Typography>
<ExternalComponent
{...args}
viewMode="cells"
sortModel={sortModel}
onSortModelChange={(newSortModel) => {
action("sort model changed")(newSortModel);
setSortModel(newSortModel);
}}
/>
</div>
);
})
);
TableWithControlledSort.args = {
...baseArgs,
};
TableWithControlledSort.parameters = {
docs: {
description: {
story:
"The sort state is fully controlled by the parent via `sortModel` and `onSortModelChange`, so it can be saved anywhere the consumer wants.",
},
},
};

export const OverrideApiDataWithLoadMore: Story<IModelGridMUIProps> =
withITwinIdOverride(
withAccessTokenOverride((args) => {
Expand Down
36 changes: 36 additions & 0 deletions packages/apps/storybook/src/imodel-browser/mui/ITwinGridMUI.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import AvatarGroup from "@mui/material/AvatarGroup";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import Typography from "@mui/material/Typography";
import { GridSortModel } from "@mui/x-data-grid";
import { action } from "@storybook/addon-actions";
import { Meta, Story } from "@storybook/react/types-6-0";
import React from "react";
Expand Down Expand Up @@ -79,6 +80,41 @@ TableView.args = {
],
};

export const TableWithControlledSort: Story<ITwinGridProps> =
withAccessTokenOverride((args) => {
const [sortModel, setSortModel] = React.useState<GridSortModel>([
{ field: "number", sort: "desc" },
]);

return (
<div>
<Typography variant="body2" style={{ marginBottom: 8 }}>
Controlled sort model: {JSON.stringify(sortModel)}
</Typography>
<ExternalComponent
{...args}
viewMode="cells"
sortModel={sortModel}
onSortModelChange={(newSortModel) => {
action("sort model changed")(newSortModel);
setSortModel(newSortModel);
}}
/>
</div>
);
});
TableWithControlledSort.args = {
...baseArgs,
};
TableWithControlledSort.parameters = {
docs: {
description: {
story:
"The sort state is fully controlled by the parent via `sortModel` and `onSortModelChange`, so it can be saved anywhere the consumer wants.",
},
},
};

export const TableViewWithOverrides = Template.bind({});
TableViewWithOverrides.args = {
...baseArgs,
Expand Down
13 changes: 13 additions & 0 deletions packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import Box from "@mui/material/Box";
import { GridSortModel } from "@mui/x-data-grid";
import React from "react";
import { InView } from "react-intersection-observer";

Expand Down Expand Up @@ -77,6 +78,14 @@ export interface ITwinGridPropsMUI
tableOverrides?: ITwinTableOverridesMUI;
/** Localized string overrides - falls back to default English strings if not provided */
stringsOverrides?: Partial<ITwinGridStringsMUI>;
/**
* Controlled sort model for the table view. When provided, the table's sort
* state is fully controlled by the parent and must be kept in sync via
* `onSortModelChange`.
*/
sortModel?: GridSortModel;
/** Called whenever the table sort model changes. */
onSortModelChange?: (sortModel: GridSortModel) => void;
}

/**
Expand All @@ -99,6 +108,8 @@ export const ITwinGridMUI = ({
viewMode,
tableOverrides,
className,
sortModel,
onSortModelChange,
}: ITwinGridPropsMUI) => {
const {
iTwinFavorites,
Expand Down Expand Up @@ -287,6 +298,8 @@ export const ITwinGridMUI = ({
tableOverrides={tableOverrides}
isLoading={fetchStatus === DataStatus.Fetching}
fetchMore={fetchMore}
sortModel={sortModel}
onSortModelChange={onSortModelChange}
/>
);
};
Expand Down
12 changes: 12 additions & 0 deletions packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
DataGrid,
GRID_DEFAULT_LOCALE_TEXT,
GridColDef,
GridSortModel,
} from "@mui/x-data-grid";
import svgMore from "@stratakit/icons/more-vertical.svg";
import { Icon } from "@stratakit/mui";
Expand Down Expand Up @@ -65,6 +66,13 @@ export interface ITwinTableMUIProps {
isLoading?: boolean;
/** Called when more data should be loaded. */
fetchMore?: (() => void) | false;
/**
* Controlled sort model. When provided, the table's sort state is fully
* controlled by the parent and must be kept in sync via `onSortModelChange`.
*/
sortModel?: GridSortModel;
/** Called whenever the sort model changes. */
onSortModelChange?: (sortModel: GridSortModel) => void;
}

/**
Expand All @@ -85,6 +93,8 @@ export const ITwinTableMUI = ({
} = {},
isLoading,
fetchMore,
sortModel,
onSortModelChange,
}: ITwinTableMUIProps) => {
// Eagerly load all available data so the table has the full dataset
// for client-side pagination and sorting.
Expand Down Expand Up @@ -188,6 +198,8 @@ export const ITwinTableMUI = ({
rows={iTwins}
columns={columns}
loading={isLoading}
sortModel={sortModel}
onSortModelChange={onSortModelChange}
onRowClick={
actions
? (params) => {
Expand Down
13 changes: 13 additions & 0 deletions packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx
View file
Open in desktop

@alexdunae alexdunae Jul 31, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we can unify/simplify the naming a bit.

setSortModel({sortType: newSort.field, descending: newSort.sort === "desc"});
setOrderbyOptions(`${newSort.field} ${newSort.sort ?? "asc"}`);
sortOptions={{"sortType": "name", "descending": false}}
onSortModelChange

I find the name "model" a bit confusing, although I see it comes from MUI Datagrid (I think?)

As it stands, it seems we supply sort in the orderByOptions="name asc" style, but the callback receives an array of {field, sort} objects?

This seems like a chance to tidy up our naming and make things consistent, if possible.

@arome arome Aug 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated the name to onOrderbyOptionsChange to match current orderbyOptions prop in iTwinGrid and it also receives the same format (string "column asc/desc")

@alexdunae alexdunae Aug 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rename definitely helps. WDYT about moving to a proper tuple like {field, direction} for these MUI components? While we're the only consumers of MUI it feels like a rare opportunity to make API changes. The existing behaviour of passing these $odata strings feels brittle to me.

I might even be tempted to do [{field, direction}] (array) since the API allows sorting like displayName asc, createdDateTime asc

@arome arome Aug 4, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ya passing string as props is definitely not ideal, its lacking typing/structure. I do think going the array route as you suggested is the way to go. Its also compatible with the dataGrid sorting in MUI

Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import Box from "@mui/material/Box";
import { GridSortModel } from "@mui/x-data-grid";
import React from "react";
import { InView } from "react-intersection-observer";

Expand Down Expand Up @@ -103,6 +104,14 @@ export interface IModelGridMUIProps
tileOverrides?: Partial<IModelTileMUIProps>;
tableOverrides?: IModelTableOverridesMUI;
stringsOverrides?: Partial<IModelGridStringsMUI>;
/**
* Controlled sort model for the table view. When provided, the table's sort
* state is fully controlled by the parent and must be kept in sync via
* `onSortModelChange`.
*/
sortModel?: GridSortModel;
/** Called whenever the table sort model changes. */
onSortModelChange?: (sortModel: GridSortModel) => void;
}

/**
Expand Down Expand Up @@ -149,6 +158,8 @@ const IModelGridInternal = ({
onRefetch,
dataMode = "internal",
disableAddToRecents = false,
sortModel,
onSortModelChange,
}: IModelGridMUIProps) => {
const [sort, setSort] = React.useState<IModelSortOptions>(sortOptions);

Expand Down Expand Up @@ -408,6 +419,8 @@ const IModelGridInternal = ({
tableOverrides={tableOverrides}
isLoading={fetchStatus === DataStatus.Fetching}
fetchMore={fetchMore}
sortModel={sortModel}
onSortModelChange={onSortModelChange}
data-testid="imodel-table"
/>
)}
Expand Down
12 changes: 12 additions & 0 deletions packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
DataGrid,
GRID_DEFAULT_LOCALE_TEXT,
GridColDef,
GridSortModel,
Comment thread
alexdunae marked this conversation as resolved.
Outdated
} from "@mui/x-data-grid";
import svgMore from "@stratakit/icons/more-vertical.svg";
import { Icon } from "@stratakit/mui";
Expand Down Expand Up @@ -62,6 +63,13 @@ export interface IModelTableMUIProps {
isLoading?: boolean;
/** Called when more data should be loaded. */
fetchMore?: (() => void) | false;
/**
* Controlled sort model. When provided, the table's sort state is fully
* controlled by the parent and must be kept in sync via `onSortModelChange`.
*/
sortModel?: GridSortModel;

@alexdunae alexdunae Jul 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this just effects the table view, not the tile/card view. My initial thought is that would be good to keep sorting unified between both views. WDYT?

@arome arome Jul 30, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i updated the changes to apply to both views as you suggested

/** Called whenever the sort model changes. */
onSortModelChange?: (sortModel: GridSortModel) => void;
}

/**
Expand All @@ -79,6 +87,8 @@ export const IModelTableMUI = ({
} = {},
isLoading,
fetchMore,
sortModel,
onSortModelChange,
}: IModelTableMUIProps) => {
// Eagerly load all available data so the table has the full dataset
// for client-side pagination and sorting.
Expand Down Expand Up @@ -188,6 +198,8 @@ export const IModelTableMUI = ({
rows={iModels}
columns={columns}
loading={isLoading}
sortModel={sortModel}
onSortModelChange={onSortModelChange}
onRowClick={
actions
? (params) => {
Expand Down
Loading